九.postMessage

postMessage (opens new window)

http://localhost:3000/a.html 与 http://localhost:4000/b.html 之间通信

a.html 中通过 iframe 嵌套 b 页面，现在利用 postMessage 可以实现 a --> b, b --> a 传递消息

1.启动服务

node a.js

node b.js

2.打开页面

http://localhost:3000/a.html

<iframe style="display:none;" id="frame" src="http://127.0.0.1:4000/b.html"></iframe>
<script type="text/javascript">
    window.onload = function () {
        let frame = document.getElementById("frame")
        // 给子页面传递数据
        frame.contentWindow.postMessage("a.html页面内容", "http://127.0.0.1:4000/")
        window.onmessage = function (e) {
            //判断消息来源
            if (e.origin == 'http://127.0.0.1:4000') {
                //得到子页面的信息
                document.write(e.data)
            }
        }
    }
</script>

http://localhost:4000/b.html

window.onmessage = function(e) {
  //得到父页面的消息
  document.write(e.data)
  //给父页面发送消息
  e.source.postMessage("b.html页面内容", e.origin)
}