您的位置：首页 > Web前端 > HTML5

html5跨文档消息传递

2011-06-16 11:51 351 查看

基于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...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航