postMessage 进行消息传递

117 阅读1分钟

父窗口

<iframe id="iframe" src="http://www.domain2.com/b.html"></iframe>
 
<script>
// 父窗口接收信息
 window.addEventListener('message',(e) => {
  console.log(e.data);
  }, false);
 // 父窗口向子窗口传递信息
  var iframe = document.getElementById('iframe');
// 根据语法 otherWindow.postMessage(message, targetOrigin, [transfer]);
// message (传递的信息) targetOrigin(指定的目标源,地址) transfer(可选参数 Transferable对象)
  iframe.contentWindow.postMessage('来自domain1的消息', 'http://www.domain2.com');
</script>

子页面 www.domain2.com/b.html

<script>
// 接收信息
 window.addEventListener('message', (e) => {
  console.log(e.data)
  })
// 发送消息给父窗口
  window.parent.postMessage('来自domain2的消息', 'http://www.domain1.com');
</script>