【转】浏览器跨域问题，top与iframe之间的通信问题

生活_对我扯淡

浏览: 21408 次
性别:
来自: 沈阳

最近访客更多访客>>

yangtze_yufei

godwhung

elfin1007

dawninautumn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

跨域

window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

useage：

Java代码

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

Java代码

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>

Java代码

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有延时，不正常。

源自：http://317948915.iteye.com/blog/2231677

分享到：