postMessage() 函数是用来实现安全跨网站通讯,可以是另一个浏览器的 tab 或者嵌入页面的 iframe。这个接口可以让浏览器的页面协作起来,实现更丰富的功能,例如我们准备开发一个可能重用的页面组件,便可以将页面通过 iframe 嵌入然后通过 postMessage() 进行通讯。

postMessage() 的格式

父页面与子页面通讯

我们假设子页面是 iframe 页面,往 iframe 页面发消息为:

...
<iframe name="myiframe" id="myrame" src="http://www.example.com/" >
 
</iframe>
...
<script>
    // 获取iframe标签
    let iframe = document.getElementById("myrame"); 
    // 获取iframe的window对象
    let iwindow = iframe.contentWindow; 
    
    // 父页面给子页面(iframe)发消息
    // 第一个参数是要发送的数据(体)
    iwindow.postMessage({
    msg: "hello world"
    }, "http://www.example.com"); // URL 可以用 iwindow.origin 代替

    // 注册监听事件
    window.addEventListener('message', handleMessage, false);
    // 处理消息
    function handleMessage(event) {
        // event 包含对象 {source, origin }
        // source 是事件源的窗口对象
        // origin 源窗口的URL e.g. https://elltor.com
        
        // 给源窗口发送「回执」事件
        event.source.postMessage({
            msg:"hello world"
         }, event.origin);
    }
</script>