html5 window.postMessage 傳遞數據的使用

時間 2019-12-09

標籤 html5 html window.postmessage window postmessage 傳遞數據使用欄目 HTML5 简体版

原文原文鏈接

window.postMessage（圖片介紹）：

發送方（圖片介紹）：

接收方（圖片介紹）：

我的測試一（iframe）：

發送方，地址爲：http://localhost:63342/HelloHBuilder/html2/postmessage.html?_ijt=cdirh338ca9a8sbhrjg5ti9odk ，頁面內容以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>postmessage</title>
</head>
<body>
<h1>iframe:</h1>
<iframe id="iframe" src="http://localhost:63342/HelloHBuilder/html2/onmessage.html" style="width: 100%; height: 300px;"></iframe>
 <input id="msg" type="text" placeholder="請輸入要發送的消息">
 <button id="send">發送</button>

<script>
    window.onload =function() {
        document.getElementById('send').onclick = function() {
            var msg = document.getElementById('msg').value;
            var iframeWindow = document.getElementById('iframe').contentWindow;
            iframeWindow.postMessage(msg, "http://localhost:63342/HelloHBuilder/html2/onmessage.html");
        }
    }
</script>
</body>
</html>

接收方：地址爲：http://localhost:63342/HelloHBuilder/html2/onmessage.html?_ijt=bis6jq7vbn70k1vfeoeqbbb83n，代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmessage</title>
</head>
<body>
<div>
    <h2>target.html,如下是接收到的消息：</h2>
         <p id="msg"></p>
     </div>
    <script>
        window.onload = function() {
            if(window.addEventListener){
                window.addEventListener("message", handleMessage, false);
            }
            else{
                window.attachEvent("onmessage", handleMessage);
            }

            function handleMessage(event) {
                event = event || window.event;
                if (event.origin === 'http://localhost:63342') {
                    document.getElementById('msg').innerHTML = event.data;
                }
            }
        }
    </script>
</body>
</html>

實驗結果，在頁面發送message後，內嵌的iframe能夠接收到參數。當發送方和接收方在瀏覽器的不一樣Tab標籤頁時，接收方沒法接收message.post

我的測試二（window.open）：

發送方：http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/postMessage.html?_ijt=lj53j6mmfto33p5ufv35jd5s4e測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>postMessage</title>
</head>
<body>
<script>
    window.onload = function () {
        var popup = window.open('http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg');

        popup.onload = function () {  //必需要有onload
            // 假設當前頁面沒有改變location，這條語句會成功添加message到發送隊列中去（targetOrigin設置對了）
            popup.postMessage("hello there!", "http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg");

            function receiveMessage(event) {
                if (event.origin !== "http://localhost:63342") {
                    return;
                }
                console.log(event.data);
            }
            window.addEventListener("message", receiveMessage, false);
        }
    };
</script>
</body>
</html>

接收方：http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibgui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on message</title>
</head>
<body>
<h1>this is a new tab, crate by <code>window.open()</code></h1>

<script>
    document.onreadystatechange = function(e) {
        if (document.readyState === 'complete') {
            window.addEventListener('message', receiveMessage, false);
        }
    };

    function receiveMessage(event) {
        if (event.origin !== "http://localhost:63342") {
            return;
        }
        console.log('message', event.data);
        console.log('origin', event.source);
        document.write(event.data);

        // 假設你已經驗證了所受到信息的origin (任什麼時候候你都應該這樣作), 一個很方便的方式就是把enent.source
        // 做爲回信的對象，而且把event.origin做爲targetOrigin
        event.source.postMessage("hi there yourself!  the secret response " + "is: rheeeeet!", event.origin);
    }
</script>
</body>
</html>