首先建立两个文件
(1)在http://h.com/Html/目录下创建window_postMessage.htm文件,该文件代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<pre>
(1)利用window.postMessage()跨域传递消息
(2)本域是http://h.com,向http://x.com/Html/webtwo.htm 传递数据
<button id="btnPassData"> 跨域传递消息</button>
</pre>
<div> //利用Iframe加载另一个域http://x.com/下的文件
<iframe src="http://x.com/Html/webtwo.htm" id="twoiframe" width="800" height="200">
</iframe>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btnPassData").onclick = function() {
var iframedom = document.getElementById("twoiframe").contentWindow;
if (typeof window.postMessage !== "undefined") {
iframedom.postMessage("Hellow,这个消息来源于http://h.com", "http://x.com");
//iframe向http://x.com/Html/webtwo.htm传递字符串消息,在下面蓝色部分看webtwo.htm如何接收传递过来的数据
}
}
if (window.attachEvent) {
window.attachEvent("onmessage", receiveMsg);
}
else {
window.addEventListener("message", receiveMsg, true);
}
};
var receiveMsg = function(e) {
document.title = e.origin; //获取跨域传的源
alert(e.data); //获取传递过来的数据
}
</script>
(2)http://x.com/Html/webtwo.htm下webtwo.htm页面的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>第二个网站</title>
</head>
<body>
<div id="testdiv" style="border: 1px solid lime; width: 400px; height: 400px;">
UserName:<input type="text" id="txtUser" value="jackie" />
<br />
Password:<input type="text" id="txtPwd" value="123" />
</div>
<br />
接受来自http://h.com域下传递过来的值
<div id="acc" style="border: 1px solid blue; width: 100px; height: 100px;">
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
if (window.attachEvent) {
window.attachEvent("onmessage", acceptMsg);
}
else {
window.addEventListener("message", acceptMsg, true);
}
}
var acceptMsg = function(e) { //该函数用来表示在window.onmessage事件触发时进行接收数据的处理
if(e.origin.indexOf("http://h.com")){ //这句的作用是排除其他非法的域名，也就是说只接收http://h.com传递过来的数据
alert(e.data) ;//webtwo.html页面接收数据
}
window.top.postMessage("Got it Thanks", "http://h.com/Html/window_postMessage.htm"); //向页面回传数据,那么在
};
</script>
总结:
(1)利用window.postMessage进行跨域传递数据时.在window.onload事件中，如果通过闭包的形式来帮顶事件接收acceptMsg 函数是不行的。
（2）window.postMessage作为HTML5的新特性，在IE8,FF3.5+,chrome,opera，safari中才支持,IE较低的版本是不支持的.
（3）window.postMessage不仅可以用在跨域传递数据，在同源策略中也可以使用.
(4) 在利用window.postMessage进行跨域传递数据时,可以利用Event.origin属性来过滤那些不合法的域名来传递数据，
没有评论:
发表评论