window.postMessage()实现跨域通信和页面间数据通信

window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。

postMessage 可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
页面与嵌套的 iframe 消息传递
多窗口之间消息传递

接口参数

otherWindow.postMessage(message, targetOrigin, [transfer]);

  

 

  
1
 

targetOrigin：

• 同源的话："/"
• 无限制：“*”

不同页面间通讯

A.html

// 发送消息
var child = window.open("B.html");

setTimeout(function () { child.postMessage("你好", "*");
}, 3000);

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) { console.log(event.data);
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

B.html

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) { event.source.postMessage(event.data, "*"); console.log(event);
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

iframe父子通讯

A.html

<iframe id="iframe" src="B.html" frameborder="0"></iframe> <script>
  var iframe = document.getElementById("iframe"); iframe.onload = function () { // 发送跨域数据 iframe.contentWindow.postMessage("你好", "*");
  }; // 接收消息
  window.addEventListener("message", receiveMessage);
  function receiveMessage(event) { console.log(event.data);
  }
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

B.html

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) { event.source.postMessage(event.data, "*"); console.log(event);
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

参考
前端 postMessage

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/107393284