HTML5跨⽂档消息传输
基本介绍
HTML5提供了在⽹页⽂档之间互相接收与发送信息的功能。使⽤这个功能，只要获取到⽹页所在窗⼝对象的实例，不仅同源（域+端⼝号）的Web⽹页之间可以互相通信，甚⾄可以实现跨域通信。
要想授受从其他窗⼝发送来的信息，必须对窗⼝对象的message事件进⾏监听，代码如下：
window.addEventListener("message", function(event) {
// 处理程序代码
}, false);
使⽤window对象的postMessage()⽅法向其他窗⼝发送消息，该⽅法的定义如下：
otherwindow.postMessage(message, targetOrigin);
该⽅法使⽤两个参数：第⼀个参数为所发送的消息⽂本，但也可以是任何JavaScript对象（通过JSON转换对象为⽂本）；第⼆个参数为接收消息的对象窗⼝的URL地址，可以在URL地址字符串中使⽤通配符“
*”指定全部地址，不过建议使⽤准确的URL地址。otherwindow为要发送窗⼝对象的引⽤，可以通过window.open()⽅法返回该对象，或通过对window.frames数组指定序号（index）或名字的⽅式来返回单个frame所属性的窗⼝对象。
跨域⽰例
主页⾯向iframe⼦页⾯发送消息，iframe⼦页⾯显⽰接收到的消息，然后向主页⾯返回消息，最后主页⾯接收消息并使⽤提⽰框显⽰该消息。
主页⾯代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>跨⽂档消息传输⽰例主⽂档</title>
<script type="text/javascript" src="code.jquery/jquery-1.6.4.min.js"></script>
html主页<script type="text/javascript">
$(function() {
// 监听message事件。
window.addEventListener("message", function(event) {
// 忽略指定URL之外的页⾯发送的消息。
igin != "www.blue-butterfly") return;
alert(event.data); // 显⽰消息。
}, false);
$("#iframeContent").load(function(event) {
// 向⼦页⾯发送消息
this[0].postMessage("Hello", "www.blue-butterfly/test/");
});
});
</script>
</head>
<body>
<header>
<h1>跨域通信⽰例</h1>
</header>
<iframe id="iframeContent" width="400" src="www.blue-butterfly/test/"></iframe>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。