HTML5知识填坑(三)——跨文档传输消息

最新推荐文章于 2022-08-31 18:02:43 发布

joy_zxj

最新推荐文章于 2022-08-31 18:02:43 发布

阅读量1k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/zhoujie_zhoujie/article/details/61416016

版权

学习笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

跨文档传输消息(XDM)也就是跨域传递消息，是实现跨域的另一种方法（突然想到我的跨域系列文章好像少写了一篇）。

XDM的核心就是浏览器的postMessage()方法，这个方法看起来好熟悉，在web worker里也有用到，都是用来向另一个地方传递数据。在XDM中，“另一个地方”就是指包含在当前页面的iframe元素，或者由当前页面弹出的窗口。

在还没深入了解这前，看到这里我的心里就会有个疑问。

postMessage()方法只能与内嵌框架通信吗，为什么？

postMessage()方法就是用来与不同域之间的窗口进行通信的API，之所以只能与内嵌框架或在当前页面的弹出窗口进行通信，是因为要使用postMessage()的前提就是要获得接收页面所在的窗口对象，在该对象上调用postMessage方法。

说到这里又想提一下同源策略参考文章
同源策略时维护浏览器安全的必要限制，他规定我们不能对不同源文档或脚本进行读操作。

那为什么script，img， iframe标签就不受同源策略的限制呢。对于这个问题，我们可以这样理解，通过src引入的资源，是由网站编写人员决定的，他不会允许网站引入一些恶意资源，所以我们默认他是安全的。我们关注的是加载脚本的页面是否和当前窗口同源，而不是脚本来自那个源。

下面进入正题。。

1.postMessage()方法

使用详情

需要特别注意的是：

我们可以指定消息要发往那个域，也可以设置为*，即所有监听了message事件的域都可接收，但是我们不建议这么作，尤其是你在传递私密的信息。
接收消息的页面应该做好消息来源的检测，只接收特定来源的消息。

2.demo

首先我们修改hosts文件模拟跨域

127.0.0.1   localhost
127.0.0.1       www.myapp.com
127.0.0.1       www.otherapp.com

<!--"http://www.myapp.com:3000/window2.html"-->
<body>
    <button id="btn">发送</button>
    <iframe src="http://www.otherapp.com:3000/window2.html"></iframe>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=function () {
           window.frames[0].postMessage("hello window2!","http://www.otherapp.com:3000/window2.html");
        };
        window.addEventListener("message",function (e) {
            alert(e.data);
        },false)
    </script>
</body>

<!--"http://www.otherapp.com:3000/window2.html"-->
<body>
   <script>
       var result=document.getElementById('result');

       window.addEventListener("message",function (e) {
           alert(e.data);
           e.source.postMessage("hi window1",e.origin);
       },false)
   </script>
</body>