postmessage解决iframe嵌套发送接收参数

• 使用场景:

  1:A项目页面引入iframe标签,iframe标签内容是B项目

  2:B项目给A项目传参

• 介绍:

利用window.postMessage() 方法可以安全地实现跨源通信,通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机(两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

• 参数:

postMessage(data,origin)//两个参数
data//需要传递的参数
origin//发送消息窗口的源（协议+主机+端口号） [也可以设置'*']

接收消息页面:

<div>
    <iframe  src="http://localhost:8081" id="iframe" frameborder="0" scrolling="no"></iframe> 
</div>

接收消息页面.js

mounted() {//接收消息
    window.addEventListener('message',function(e){
       console.log(e);//{data:'params'}
    });//本人使用vue脚手架，实际场景根据使用而定
}

发送消息页面:

send(){//发送消息
    window.parent.postMessage({
        data:"params"
    },'*');
}