通常情況下,對于兩個不同頁面的腳本,只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議(通常為https),端口號(443為https的默認(rèn)值),以及主機時,這兩個腳本才能相互通信。而在實際項目開發(fā)過程中,經(jīng)常會利用iframe在一個父頁面中嵌入另外一個子頁面,或者在一個父頁面中彈出另一個頁面,由于同源策略的限制,父子頁面之間的腳本無法實現(xiàn)通信,而使用postMessage方法就實現(xiàn)了父子頁面之間的跨域信息傳遞。
語法:
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他頁面的引用,例如,iframe的contentWindow屬性,或者執(zhí)行window.open返回的窗口對象。
message:將要傳遞到另一個頁面的數(shù)據(jù)(可以不受限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化,原因是因為采用了結(jié)構(gòu)化克隆算法)。
targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件,其值可以是一個字符串"*"(表示無限制)或者一個Url。只有當(dāng)目標(biāo)窗口的協(xié)議、主機地址、端口號和targetOrigin完全匹配時,目標(biāo)窗口才會收到message信息。為了防止信息泄露,通常情況下都會指定特定的url。
transfer:可選參數(shù)。
使用方法:
1.父頁面:(url為http://www.b.com/main.html):
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父頁面</title></head><body> <iframe id="child" src="http://www.a.com/iframepage.html"></iframe> <script> window.onload = function(){ document.getElementById("child").contentWindow.postMessage("主頁面?zhèn)鬟f的消息","http://www.a.com/iframepage.html") } window.addEventListener('message', function(event){ //父獲取子傳遞的消息 if(event.origin == "http://www.a.com"){ //可以在這里做一些邏輯操作 } }, false) </script></body></html>2.子頁面(url為http://www.a.com/iframepage.html)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子頁面</title></head><body> <div>這里是子頁面</div> <script> window.addEventListener('message', function(event){ if(event.origin == "http://www.b.com"){ //可以在這里做一些操作 top.postMessage("子頁面收到父頁面?zhèn)鬟f來的消息", 'http://www.b.com/main.html')//子頁面向父頁面?zhèn)鬟f消息 } }, false); </script></body></html>postMessage方法被調(diào)用時,會在所有頁面腳本執(zhí)行完畢之后像目標(biāo)窗口派發(fā)一個 MessageEvent 消息,該MessageEvent消息有四個屬性需要注意:
type:表示該message的類型
data:為postMessage的第一個參數(shù)
origin:表示調(diào)用postMessage方法窗口的源
source:記錄調(diào)用postMessage方法的窗口對象
特別注意:
1.一定要等A頁面嵌入的B頁面加載完成之后,再進行postMessage跨域通信
2.一定要對origin做判斷,去掉不是來自我們目標(biāo)窗口的origin,防止來自其他origin的攻擊
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答