postMessage

前端开发过程中，有时需要调用显示别人的页面，此时如果模块化不高时，就有可能会使用iframe去进行引入，不过在iframe父子页面之间有时候会遇到参数传递问题。

本文主要通过postMessage的方式进行传参，这种传参方式可以减少跨域带来的问题。

MDN介绍：

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

url传参

在介绍postMessage的传参方式之前，先说一下子页面可以通过url来获取参数（如果只是固定不变的关键数据，使用这种方式也不错）

在父页面中：

<iframe id="ifr" src="./iframe.html?id=123" frameborder="0"></iframe>

在子页面中，可以直接分析window.location的url。

<script>
        let url = window.location.search.slice(1, window.location.search.length).split('=');
        console.log(url);
</script>

此时运行父页面到浏览器中，显示结果：

这样就能拿到关键的id参数了。

使用postMessage传参

方法的参数有三种：

在父界面中, 从iframe的contentWindow中找到postMessage方法

<script>
    let i = 0;
    let ifr = document.getElementById('ifr')
    function post() {
        ifr.contentWindow.postMessage(`发送数据 i: ${i}`, 'http://127.0.0.1:5500/', false);
        i++;
    }
</script>

iframe子界面通过addEventListener监听message。

window.addEventListener('message', (event)=> { //给当前window建立message监听函数
    console.log(event.data);
}, false);

效果如下：

现在上面的例子是父页面给子页面传值，也可以由子页面向父页面传值，原理其实是相同的。

同时为了安全性考虑，可以通过使用origin来对来源增加判断

window.addEventListener('message', (event)=> { //给当前window建立message监听函数
    console.log(event.origin);
    console.log(event.data);
}, false);