使用iframe+postMessage實(shí)現(xiàn)頁(yè)面跨域通信的示例代碼
我要評(píng)論通常情況下，對(duì)于兩個(gè)不同頁(yè)面的腳本，只有當(dāng)執(zhí)行它們的頁(yè)面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī)時(shí)，這兩個(gè)腳本才能相互通信。而在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)利用iframe在一個(gè)父頁(yè)面中嵌入另外一個(gè)子頁(yè)面，或者在一個(gè)父頁(yè)面中彈出另一個(gè)頁(yè)面，由于同源策略的限制，父子頁(yè)面之間的腳本無(wú)法實(shí)現(xiàn)通信，而使用postMessage方法就實(shí)現(xiàn)了父子頁(yè)面之間的跨域信息傳遞。
語(yǔ)法：
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他頁(yè)面的引用，例如，iframe的contentWindow屬性，或者執(zhí)行window.open返回的窗口對(duì)象。
message:將要傳遞到另一個(gè)頁(yè)面的數(shù)據(jù)（可以不受限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化，原因是因?yàn)椴捎昧私Y(jié)構(gòu)化克隆算法）。
targetOrigin:通過(guò)窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件,其值可以是一個(gè)字符串"*"（表示無(wú)限制）或者一個(gè)Url。只有當(dāng)目標(biāo)窗口的協(xié)議、主機(jī)地址、端口號(hào)和targetOrigin完全匹配時(shí)，目標(biāo)窗口才會(huì)收到message信息。為了防止信息泄露，通常情況下都會(huì)指定特定的url。
transfer：可選參數(shù)。
使用方法：
1.父頁(yè)面：(url為http://www.b.com/main.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父頁(yè)面</title>
</head>
<body>
<iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
<script>
window.onload = function(){
document.getElementById("child").contentWindow.postMessage("主頁(yè)面?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.子頁(yè)面(url為http://www.a.com/iframepage.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子頁(yè)面</title>
</head>
<body>
<div>這里是子頁(yè)面</div>
<script>
window.addEventListener('message', function(event){
if(event.origin == "http://www.b.com"){
//可以在這里做一些操作
top.postMessage("子頁(yè)面收到父頁(yè)面?zhèn)鬟f來(lái)的消息", 'http://www.b.com/main.html')//子頁(yè)面向父頁(yè)面?zhèn)鬟f消息
}
}, false);
</script>
</body>
</html>
postMessage方法被調(diào)用時(shí)，會(huì)在所有頁(yè)面腳本執(zhí)行完畢之后像目標(biāo)窗口派發(fā)一個(gè) MessageEvent 消息，該MessageEvent消息有四個(gè)屬性需要注意：
type：表示該message的類(lèi)型
data：為postMessage的第一個(gè)參數(shù)
origin：表示調(diào)用postMessage方法窗口的源
source：記錄調(diào)用postMessage方法的窗口對(duì)象
特別注意：
1.一定要等A頁(yè)面嵌入的B頁(yè)面加載完成之后，再進(jìn)行postMessage跨域通信
2.一定要對(duì)origin做判斷，去掉不是來(lái)自我們目標(biāo)窗口的origin，防止來(lái)自其他origin的攻擊
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用postMessage解決iframe跨域通信問(wèn)題
這篇文章主要介紹了詳解使用postMessage解決iframe跨域通信問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-11-01關(guān)于iframe跨域使用postMessage的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于iframe跨域使用postMessage的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2019-10-29
使用postMessage讓 iframe自適應(yīng)高度的方法示例
這篇文章主要介紹了使用postMessage讓 iframe自適應(yīng)高度的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-10-08
