溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用iframe和postMessage怎么實現(xiàn)頁面跨域通信

發(fā)布時間：2021-04-06 17:02:54 來源：億速云 閱讀：296 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)使用iframe和postMessage怎么實現(xiàn)頁面跨域通信，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

通常情況下，對于兩個不同頁面的腳本，只有當執(zhí)行它們的頁面位于具有相同的協(xié)議（通常為https），端口號（443為https的默認值），以及主機時，這兩個腳本才能相互通信。而在實際項目開發(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ù)對象安全的傳送給目標窗口而無需自己序列化，原因是因為采用了結(jié)構(gòu)化克隆算法）。

targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件,其值可以是一個字符串"*"（表示無限制）或者一個Url。只有當目標窗口的協(xié)議、主機地址、端口號和targetOrigin完全匹配時，目標窗口才會收到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í)行完畢之后像目標窗口派發(fā)一個 MessageEvent 消息，該MessageEvent消息有四個屬性需要注意：

type：表示該message的類型

data：為postMessage的第一個參數(shù)

origin：表示調(diào)用postMessage方法窗口的源

source：記錄調(diào)用postMessage方法的窗口對象

特別注意：
1.一定要等A頁面嵌入的B頁面加載完成之后，再進行postMessage跨域通信
2.一定要對origin做判斷，去掉不是來自我們目標窗口的origin，防止來自其他origin的攻擊

關(guān)于使用iframe和postMessage怎么實現(xiàn)頁面跨域通信就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手