使用window.postMessage()方法在两个网页间传递数据

第使用window.postMessage()方法在两个网页间传递数据目录说明发送端postMessage程序发送消息的基本语法：targetWindowmessagetargetOrigintransfer接收端完整程序发送程序接收程序

说明

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。

通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为同源策略）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。

发送端

postMessage程序

varreceiver=document.getElementById('receiver').contentWindow;

varbtn=document.getElementById('send');

btn.addEventListener('click',function(e){

e.preventDefault();

varval=document.getElementById('text').value;

receiver.postMessage("Hello"+val+"！","");

});

发送消息的基本语法：

targetWindow.postMessage(message,targetOrigin,[transfer]);

targetWindow

targetWindow就是接收消息的窗口的引用。获得该引用的方法包括：

Window.openWindow.openerHTMLIFrameElement.contentWindowWindow.parentWindow.frames+索引值

message

message就是要发送到目标窗口的消息。数据使用结构化克隆算法进行序列化。这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin

targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串*或URI。*表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。

transfer

transfer是可选参数

接收端

目标窗口通过执行下面的JavaScript来侦听发送过来的消息：

window.addEventListener("message",receiveMessage,false);

functionreceiveMessage(event){

if(event.origin!=="")

return;

}

event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用;我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

完整程序

发送程序

!DOCTYPEHTML

html

head

metacharset="utf-8"

title42度空间-window.postMessage()跨域消息传递/title

/head

body

div

inputid="text"type="text"value="42度空间"/

buttonid="send"发送消息/button

/div

iframeid="receiver"src="/static/html/receiver.html"width="500"height="60"

p你的浏览器不支持IFrame。/p

/iframe

script

window.onload=function(){

varreceiver=document.getElementById('receiver').contentWindow;

varbtn=document.getElementById('send');

btn.addEventListener('click',function(e){

e.preventDefault();

varval=document.getElementById('text').value;

receiver.postMessage("Hello"+val+"！","");

/script

/body

/html

接收程序

!DOCTYPEHTML

html

head

metacharset="utf-8"

title42度空间-从接收消息/title

/head

body

divid="message"

HelloWorld!

/div

script

window.onload=function(){

varmessageEle=document.getElementById('message');

window.addEventListener('message',function(e){

alert(e.origin);

if(e.origin!==""){

return;

messageEle.inner