html5跨文档消息传递
2011-06-16 11:51 飞魚 阅读(522) 评论(0) 编辑 收藏 举报基于js的同源策略使文档不能跨域访问，为此html5提供了跨文档消息传递功能,下贴出示例...
http://localhost:4933站页面代码
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript">
window.addEventListener("message", function(ev) {
ev.origin == "http://www.woyun.com" && alert(ev.origin + "说:" + ev.data);
}, false);
function say() {
document.getElementById("myifr").contentWindow.postMessage("Hello", "http://www.woyun.com");
}
</script>
</head>
<body>
<iframe src="http://www.woyun.com/mytest.htm" onload="say()" id="myifr"></iframe>
</body>
</html>
http://www.woyun.com/站页面代码
<!DOCTYPE html>
<head>
<title></title>
<script>
window.addEventListener("message", function(ev) {
if (ev.origin == "http://localhost:4933") {
document.body.innerHTML = ev.origin + "说:" + ev.data;
ev.source.postMessage(ev.data.split("").reverse().join(""), ev.origin);
}
}, false);
</script>
</head>
<body>
</body>
</html>
运行效果截图...
使用跨文档消息传递首先监控窗口message事件
事件对象包括的属性
data：传递的内容，可以是字符串或对象
origin:发送消息的窗口的协议、域名和端口号
source：发送消息的窗口对象
使用窗口对象的postMessage发送消息，postMessage接受俩个参数，传递的内容和接受页面的origin...
