html5的postMessage简易通俗使用说明

2019-05-25  本文已影响0人  果好鲜

其中的三种场景

  1. 可以实现页面和里面iframe页面之间的通讯
背景:页面A中通过iframe嵌入B页面
iframeEle.contentWindow.postMessage() 
window.parent.postMessage()
  1. 可以实现窗口和通过window.open的窗口间的通讯
背景:页面A通过调用window.open()打开B页面
// 
var openWindow = window.open()
// 如果直接openWindow.postMessage()是不行的,要异步才可以的
setTimeout(function(){
  openWindow.postMessage()
})
window.opener.postMessage()
  1. 可以实现窗口和通过a标签新打开的窗口间的通讯
背景:A页面里面有一个例如:<a href="B页面" target="_blank">新打开B页面</a>这样的一个a标签,能够新窗口中打开一个B页面
window.opener.postMessage()
window.addEventListener('message', function(event){
  event.source.postMessage()
})

对于上面这三种使用,对应接受消息的页面,也应该有window.addEventListener('message', function(){})的,这里就省略了,请知道!

然后window.addEventListener("message", receiveMessage, false);中,对于receiveMessage函数中,有event对象,其中包括data,origin,source这几个属性。

上一篇下一篇

猜你喜欢

热点阅读