18.1　　跨文档消息传递

　　　　在以前，如果要在两个window装载的HTML文档之间传递消息，实现起来可能比较困难，因为所有的JavaScript脚本都是在一个window对象中装载并执行，

　　　　而两个window对象中的JavaScript对象很难相互传递消息。

　　　　跨文档消息传递机制的出现改变了这种现状，跨文档消息传机制可以保证两个不同window中的JavaScript脚本能互相通信，这样就可以解决它们的消息传递问题了。

18.1.1　　postMessage 与 onmessage

　　　　跨文档消息传递靠的是window对象新增的一个方法和一个事件监听器属性。向指定窗口发送消息的方法如下。

　　　　　　targetWindow.postMessage(message,targetOrigin)：该方法用于向targetWindow中装载的HTML文档发送消息，只要先获取装载该文档的window对象即可。

　　　　接收其他窗口发送过来的消息则靠的是window对象提供的如下事件监听器属性。

　　　　　　onmessage：这是一个事件监听器属性，该事件监听器属性是一个形如functon(event){}的函数。

　　　　onmessage所指定的事件监听器函数中声明了一个event形参，这个event形参是一个MessageEvent对象。

　　　　MessageEent提供了如下属性：

　　　　　　data：该属性返回消息传递所交换的信息。

　　　　　　origin：该属性返回发送该消息的源域名。

　　　　　　lastEventId：该属性返回发送该消息的事件ID。

　　　　　　source：该属性返回发送该消息的窗口。

　　　　通过上面介绍可以发现，跨文档消息传递时发送消息的文档只要两步即可。

　　　　　　1：获取将要发送消息的目标窗口对于的window对象。

　　　　　　2：调用目标窗口的window对象的postMessage(any message)方法发送消息。

　　　　接收其他文档的消息也只需要两步即可。

　　　　　　1：为window的onmessage事件绑定事件监听器。

　　　　　　2：在事件监听器函数中通过event形参获得需要交换的数据。

18.1.2　　跨文档消息传递示例

　　　　脚本代码：

　　　　　　var send = function()

　　　　　　{

　　　　　　　　//打开一个新窗口

　　　　　　　　var targetWin = window.open(‘http://localhost:8888/target/target.html‘,‘_blank‘,‘width=400,height=300‘);

　　　　　　　　//等该窗口装载完成时，向该窗口发送消息

　　　　　　　　targetWin.onload = function()

　　　　　　　　{

　　　　　　　　　　//向http：//localhost:8888/target发送消息

　　　　　　　　　　targetWin.postMessage(document.getElementById("msg").value,"http://localhost:8888/target");

　　　　　　　　}

　　　　　　}

　　　　　　//通过onmessage监听器监听其他窗口发送过来的消息

　　　　　　window.onmessage = function(ev)

　　　　　　{

　　　　　　　　//忽略来自其他域名的跨文档消息(只接收http://localhost:8888的消息)

　　　　　　　　if(ev.origin != "http://localhost:8888")

　　　　　　　　{

　　　　　　　　　　return;

　　　　　　　　}

　　　　　　　　var show = document.getElementById("show");

　　　　　　　　//显示消息

　　　　　　　　show.innerHTML += (ev.origin + "传来了消息：" + ev.data + "<br/>");

　　　　　　};

　　　　html代码：

　　　　　　消息：<input type="text" id="msg" name="msg" />

　　　　　　<button onclick="send();">发送消息</button>

　　　　　　<div id="show"></div>

9月9号=》461页-465页