window.postMessage 是一个用于安全的使用跨源通信的方法。通常,不同页面上的脚本只在这种情况下被允许互相访问,当且仅当执行它们的页面所处的位置使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的主机(两个页面的 document.domain 的值相同)。 在正确使用的情况下,window.postMessage 提供了一个受控的机制来安全地绕过这一限制。
useage:
- otherWindow.postMessage(message, targetOrigin);
otherWindow.postMessage(message, targetOrigin);
otherWindow指定需要获得消息的窗体window,
message是字符串,指定要从当前窗体发送到otherWindow的消息,是字符串。targetOrigin指定otherWindow的来源(src)。想要被发送message的otherWindow的origin。可以是 '*'或者是uri ,如果搞错了,使得targetOrigin中的
协议,主机名,端口号与想要被发送message的窗体来源URI中的不一致,
那么这条消息不会被派遣到目标otherWindow内。所以别把协议等等搞错了。深层意思是会忽略路径!
只有都相同时指目标窗体otherWindow才会收到。这条指令告诉了我们在哪里发送消息,传输密码时一定要保证一致!不然会被第三方侦听。
在你知道otherWindow的来源时,请提供一个特殊化的uri,不要使用‘*’,一但没有特殊化targetOrigin会使它被发往一些不坏好意的地方。
然后再在otherWindow里 绑定onmessage事件,用来监听传来的message。
一旦监听到,会将一个对象传入onmessage的事件处理函数。由事件处理函数进行处理。该对象(设为a)有3个属性,a.data a.origin指在postMessage被调用时发送消息的对象otherWindow,包括协议,主机名,端口例子(http://www.baidu.com:8080;或者https://example.org 默认端口443,http://example.net默认端口80) a.source,指代发送message的window对象,(这是按照官方文档翻译的,但是有点不明白?照下面的例子它分明指的是消息来源所在的window。因为此时调用另一个window对于它是不可见的,因为同源策略)你可以用这个属性去建立两个不同源的window之间的双向通信,
其中a.data存储的是传来的message。
下面用例子实现双向通信。
http://bbs.example.com
- js
- function sendIt(){
- document.getElementById("otherPage").contentWindow.postMessage(document.getElementById("message").value,
- "http://hui.example.com");
- }
- window.onmessage=function(e){
- document.getElementsByClassName('h')[0].innerHTML+=e.data+"<br>";
- setTimeout(function(){
- e.source.postMessage(document.getElementById("message").value,e.origin);
- //获取发送message的源地址。
- },4000);
- }
- html
- <body>
- <iframe src="http://hui.example.com/TestHTML5/WebContent/other-domain.html" id="otherPage"></iframe>
- <br/><br/>
- <input type="text" id="message"><input type="button" value="Send to hui.example.com" onclick="sendIt()" />
- </body>
js function sendIt(){ document.getElementById("otherPage").contentWindow.postMessage(document.getElementById("message").value, "http://hui.example.com"); } window.onmessage=function(e){ document.getElementsByClassName('h')[0].innerHTML+=e.data+"<br>"; setTimeout(function(){ e.source.postMessage(document.getElementById("message").value,e.origin); //获取发送message的源地址。 },4000); } html <body> <iframe src="http://hui.example.com/TestHTML5/WebContent/other-domain.html" id="otherPage"></iframe> <br/><br/> <input type="text" id="message"><input type="button" value="Send to hui.example.com" onclick="sendIt()" /> </body>
- js
- window.onmessage=function(event){
- document.getElementById("message").innerHTML+=event.data+"<br/>";
- event.source/*或者window.top*/.postMessage('hello',event.origin);
- }
- html
- <body>
- Web page from http://hui.example.com
- <div id="message"></div>
- <input type="text" id="message"><input type="button" value="Send to child.com" onclick="postIt()" />
- </body>
js window.onmessage=function(event){ document.getElementById("message").innerHTML+=event.data+"<br/>"; event.source/*或者window.top*/.postMessage('hello',event.origin); } html <body> Web page from http://hui.example.com <div id="message"></div> <input type="text" id="message"><input type="button" value="Send to child.com" onclick="postIt()" /> </body>
这样可以使两个不同域名间的window互发短消息。
但是先修改下host文件,使域名主机不同
以下举一个实际运用的列子。
一般网站为了缓解流量压力,会在全国各地部署cdn系统(CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。)一般存放图片,css,js等等,
但是有时cdn可能会出现问题,访问不上,用户无法查看到图片啊等等,那么我们怎么知道是哪个cdn出问题了呢?或者哪个ip的客户无法访问呢?答案就是利用浏览器跨域通信,
在cdn上放一个测试文件比如,test.html.然后在网站里插入一个iframe,一般本站的网址与这个测试文件是不同主机的(因为测试文件与缓存放在cdn上面),所以不同源,
现在在iframe里用postMessage发送一条消息到外部window。
外部window用一个dom元素,接受这条消息,在等待1s去获取这条消息,如果没有获取到,说明有延时。
假如,cdn有延时,不正常。
相关推荐
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
iframe 跨域访问session问题解决方法
谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题 谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题 谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
浏览器跨域问题产生的原因,如果使用AJAX请求调用第三方接口,如果AJAX访问的接口域名和端口号与浏览器访问的域名端口号不一致的情况下,就会产生跨域问题。(属于浏览器安全策略)跨域不属于前端问题
layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。
uni-app运行到浏览器跨域H5页面的跨域问题解决方案.docx
以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...
iframe 与主框架相互访问例子,包含同域访问,跨域访问例子。
单点登录跨域iframe互相通信方案 ,内含详细步骤,可以实现不同源的域名互相通信。亲测,可用哦。也可以到我的博客查看具体操作步骤。
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
非常不错的开源andirod浏览器,需要借鉴的同学可以用来参考
链接:https://pan.baidu.com/s/1-mjkHmiuVLJzmqhnIyBHag 提取码:w9vu
chrome插件【Allow CORS: Access-Control-Allow-Origin】
iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信;例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间。
在web开发中,跨域问题是经常遇到的,但是由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的。本次讨论iframe和父页面的消息通信。
MessengerJS-master(iframe跨域通信) MessengerJS-master(iframe跨域通信)