使用postMessage實現iframe跨域通信的示例代碼

Posted on by

1、父頁面內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>主頁面</h1>
        <iframe id="child" src="http://10.0.0.159:8080"></iframe>
        <div>
            <h2>主頁面跨域接收消息區域</h2>
            <div id="message"></div>
        </div>
    </body>
    <script>
        /* -------------iframe跨域數據傳遞--------------- */
        
        //傳遞數據到子頁面
        window.onload = function() {
            document.getElementById('child').contentWindow.postMessage("主頁面消息", "http://10.0.0.159:8080")
        }
        //接受子頁面傳遞過來的數據
        window.addEventListener('message', function(event) {
            document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
        }, false);
    </script>

</html>

2、子頁面

（我這裡在在vue頁面裡做的測試，vue模板的html代碼就不展示瞭）

mounted() {

            //接收父頁面傳過來的數據
            window.addEventListener('message', function(event) {    
                
                // 處理addEventListener執行兩次的情況，避免獲取不到data
                // 因此判斷接收的域是否是父頁面
                if(event.origin.includes("http://127.0.0.1:8848")){
                    console.log(event);
                    document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
                                        
                    //把數據傳遞給父頁面 > top.postMessage(要傳遞的數據,父頁面的url訪問地址)
                    top.postMessage("子頁面消息收到", 'http://127.0.0.1:8848/boatStaticHtml/iframe%E9%80%9A%E4%BF%A1.html');                
                }
            }, false);    

        }

3、效果圖展示

到此這篇關於使用postMessage實現iframe跨域通信的文章就介紹到這瞭,更多相關postMessage iframe跨域通信內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：