postMessager

A support window, and iframe label page before communication library. Based on the postMessage. Use the typescript.

online demo

usage

page parent:

<input type="text" id="text">
<button>send</button>    
<iframe src="child" frameborder="0"></iframe>

  const p = new PostMessager({
    id: 'parent',
    target: document.querySelector('iframe').contentWindow
  })
  // send message
  document.querySelector('button').addEventListener('click', function() {
    p.send('child', { message:  document.querySelector('input').value })
  })

page child:

message from page parent:<p></p>

  const child = new PostMessager({
    id: 'child',
    target: window.parent
  });
  child.on('receive', function(content, event) {
    console.log(content.message)
    document.querySelector('p').innerHTML = content.message
  })

reference

1. postMessage`s compatibility
2. postmate