使用window.postMessage()方法在兩個網(wǎng)頁間傳遞數(shù)據(jù)

第使用window.postMessage()方法在兩個網(wǎng)頁間傳遞數(shù)據(jù)目錄說明發(fā)送端postMessage程序發(fā)送消息的基本語法：targetWindowmessagetargetOrigintransfer接收端完整程序發(fā)送程序接收程序

說明

window.postMessage()方法可以安全地實現(xiàn)Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。

通常情況下，不同頁面上的腳本允許彼此訪問，當且僅當它們源自的頁面共享相同的協(xié)議，端口號和主機（也稱為同源策略）。window.postMessage()提供了一個受控的機制來安全地規(guī)避這個限制（如果使用得當?shù)脑挘?/p>

一般來說，一個窗口可以獲得對另一個窗口的引用(例如，通過targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派發(fā)MessageEvent。接收窗口隨后可根據(jù)需要自行處理此事件。傳遞給window.postMessage()的參數(shù)通過事件對象暴露給接收窗口。

發(fā)送端

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+"！","");

});

發(fā)送消息的基本語法：

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

targetWindow

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

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

message

message就是要發(fā)送到目標窗口的消息。數(shù)據(jù)使用結構化克隆算法進行序列化。這意味著我們可以將各種各樣的數(shù)據(jù)對象安全地傳遞到目標窗口，而無需自己對其進行序列化。

targetOrigin

targetOrigin就是指定目標窗口的來源，必須與消息發(fā)送目標相一致，可以是字符串*或URI。*表示任何目標窗口都可接收，為安全起見，請一定要明確提定接收方的URI。

transfer

transfer是可選參數(shù)

接收端

目標窗口通過執(zhí)行下面的JavaScript來偵聽發(fā)送過來的消息：

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

functionreceiveMessage(event){

if(event.origin!=="")

return;

}

event對象有三個屬性，分別是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的發(fā)送來源，包括協(xié)議，域名和端口；event.source表示發(fā)送消息的窗口對象的引用;我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。

完整程序

發(fā)送程序

!DOCTYPEHTML

html

head

metacharset="utf-8"

title42度空間-window.postMessage()跨域消息傳遞/title

/head

body

div

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

buttonid="send"發(fā)送消息/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