父頁面iframe中的第三方子頁面跨域交互技術(shù)—postMessage實現(xiàn)方法

更新時間：2023年06月17日 11:27:05 投稿：yin

web網(wǎng)站通過iframe嵌入第三方web頁面，父頁面和子頁面如果需要數(shù)據(jù)交互，顯然違反了同源策略，在HTML5標準引入的window對象下的postMessage方法，可以允許來自不同源的JavaScript腳本采用異步方式進行有限的通信，可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞...

在web項目中通過iframe嵌入另一個第三方web項目，第三方web項目里點擊某個按鈕要實時調(diào)用web項目的全局函數(shù)打開某個全局彈窗或者進行路由跳轉(zhuǎn)，這時候兩個項目存在了數(shù)據(jù)交互，顯然違反了同源策略，在HTML5標準引入的window對象下的postMessage方法，可以允許來自不同源的腳本采用異步方式進行有限的通信，可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞。

window.postMessage是HTML5中新增的一個API（不能低于IE8）,postMessage方法允許來自不同源的腳本采用異步方式進行有限的通信 ,使其可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞，這個API為 window 對象新增了一個window.postMessage方法，允許跨窗口通信，無論當前兩個窗口否是同源。

postMessage傳遞消息

在 html5，window 對象上有一個方法叫做postMessage，與它的名字一樣，這個方法就是用來發(fā)送信息的，但是它只能用來在兩個窗口之間發(fā)送信息

發(fā)送消息方法的參數(shù)和使用

win.postMessage(data, origin)
// win 這個參數(shù)為需要接受消息的 window 對象
// 當我們通過 window.open() 打開一個新窗口時，會返回一個新窗口的 window 對象，通過這個新窗口的 window 對象，就可以向新窗口發(fā)送消息
// 如果頁面中有 frame 時，也可以通過這個 frame 對象發(fā)送消息
// data 為我們想要發(fā)送的數(shù)據(jù)，理論上 data 可以是任何可以被復制的數(shù)據(jù)類型，但是由于部分瀏覽器只支持傳輸 String 類型，所以傳輸?shù)臄?shù)據(jù)最好是通過 JSON.stringify() 序列化后再傳輸
// origin 為字符串，為目標窗口的源，由 協(xié)議+ip/域名+端口號 組成
// 如果想要傳遞給任意窗口，可以將這個參數(shù)設置為 * ，為了安全起見，不建議設置為 *
// 如果目標窗口與當前窗口同源，則設置為 /

接收消息方法的參數(shù)和使用

window.addEventListener('message', function (e) {...})
// 第一個參數(shù)為這個事件監(jiān)聽器的類型，'message' 表示會監(jiān)聽當前窗口接收到的消息
// 第二個參數(shù)為接收到消息后的回調(diào)函數(shù)，在回調(diào)函數(shù)中，我們可以對發(fā)送消息的源進行一些驗證，從而保證安全性
// 回調(diào)函數(shù)參數(shù) e 上有很多屬性，我們可以將其打印出來，其中 origin 表示發(fā)送消息窗口的源；source 屬性表示發(fā)送消息的窗口，通過 e.source == window.opener 可以判斷發(fā)送消息的窗口與打開當前頁面的窗口是否為同一個；data 屬性標書傳遞過來的數(shù)據(jù)

使用場景

當想要在Web頁面中嵌入一個來自其他站點的模塊或者“gadget”的時候，利用 postMessage() 和 message 事件實現(xiàn)的跨域消息傳遞是很有用的。

首先 gadget 的開發(fā)者可以將 gadget 內(nèi)容定義在一個 HTML 頁面中，它負責監(jiān)聽 message 事件，并將它們分發(fā)給對應的 js 函數(shù)去處理。然后，嵌入 gadget 的Web頁面就可以通過 postMessage() 方法傳遞消息來和 gadget 進行交互了。

使用示例

加入有a.html和b.html兩個頁面，a.html是父頁面，b.html是子頁面，可以是同源同一個網(wǎng)站（網(wǎng)址一樣），也可以是不同源的跨域網(wǎng)站。

父級頁面給子級頁面?zhèn)鲄?/h3>

//a.html
<body>
    <div class='body'>
        <div class='left'>
            <p>LEFT</p>
            <button id='iframeEvent'>給子級頁面?zhèn)鲄?lt;/button>
        </div>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        var ifr = document.getElementById('ifrA');
        var send = document.getElementById('iframeEvent');
        //父級頁面發(fā)送參數(shù)
        send.addEventListener('click', function() {
            var url = 'http://127.0.0.1:5500/b.html';//地址必須為服務器地址（本地文件打開無效）
            var val = '我是父級頁面過來的參數(shù)';//傳遞的參數(shù)
            ifr.contentWindow.postMessage(val, url)
        }, false)
    </script>
</body>

//b.html
<body>
    <p class='title'>我是子級頁面</p>
    <script>
        window.addEventListener('message', function(event) {
            var url = 'http://127.0.0.1:5500';//指定的源
            if (event.origin != url) {//判斷是否來自指定源
                return;
            }
            console.log(event.data);//讀取傳遞過來值
        }, false)
    </script>
</body>

子級頁面給父級頁面?zhèn)鲄?/h3>

//a.html
<body>
    <div class='body'>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        //接送參數(shù)
        window.addEventListener('message', function(e) {
            var url = 'http://127.0.0.1:5500';
            if (e.origin != url) {
                return;
            }
            console.log(e.data);
        }, false)
    </script>
</body>

//b.html
<body>
    <button class='childPage'>給父頁面?zhèn)鬟f參數(shù)</button>
    <script>
        //發(fā)送子級頁面的參數(shù)給父級頁面
        var btnEvent = document.querySelector('.childPage');
        var data = '我是子級頁面?zhèn)鬟f過來的參數(shù)';
        btnEvent.addEventListener('click', function(e) {
            window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
        }, false)
    </script>
</body>

安全問題

如果你不希望從其他網(wǎng)站接收 message，請不要為 message 事件添加任何事件監(jiān)聽器。
如果你確實希望從其他網(wǎng)站接收message，請始終使用 origin 和 source 屬性驗證發(fā)件人的身份。
當你使用 postMessage 將數(shù)據(jù)發(fā)送到其他窗口時，始終指定精確的目標 origin，而不是 *。

兼容性

所有主流瀏覽器（包括IE8）都支持。

到此這篇關(guān)于父頁面iframe中的第三方子頁面跨域交互技術(shù)—postMessage實現(xiàn)方法的文章就介紹到這了,更多相關(guān)iframe跨域postMessage內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: