HTML5 HTML5 網頁溝通機制: postMessage 方法與 message 事件

HTML5 可以很方便的讓資料在網頁之間傳遞,只要調用方法 postMessage() ,並監聽 onmessage 事件即可輕易的達到這個目的,直接來看作法。建立兩個網頁,分別是 postonmessage.html 與 amessage.html ,前者會在網頁載入完成之後,開啟後者。
以下列舉 postonmessage.html 的<body> 內容配置:

<body>
    <div id="msg" style="…;" >
        HTML5 專業解構】
        <br />
        8.18/8.19 熱烈開講 XD
    </div>
</body>

其中配置了一個 <div> 標籤,內部則是測試文字,現在於網頁一開始的地方,加入以下的程式碼:

<script>
    var target = open("amessage.html", "cwin");
    function sendMessage() {
        var locationurl = location.protocol + "//" + location.host;
        var message = document.getElementById("msg").innerHTML;
        target.postMessage(message, locationurl);
    }
</script>

一開始調用 open() 方法,開啟 amessage.html 檔案,然後取得此開啟的目標網頁參照變數 target 。緊接著是 sendMessage() 函式,首先取得目標網頁的路徑資訊 locationurl,然後取出畫面中 <div> 標籤的內容文字,最後這一行是關鍵,透過 target 調用 postMessage() ,將文字內容傳送至指定的位址。
接下來則是目標網頁 tmessage.html ,其中的程式碼如下:

<script>     
    addEventListener("message", function (event) {           
            document.body.innerHTML = event.data;
    }, false);     
</script> 

此段程式碼監聽 message 事件,當上述的 postonmessage.html 調用 postMessage() 傳送資料過來的時候,此 message 事件被觸發,其中取得傳送過來的資料,並且顯示在畫面上。
左邊的截圖是 postonmessage.html 初始顯示的畫面,它會同時開啟另外一個網頁 amessage.html ,也就是右邊背景黑色的載圖:

 

現在於左圖的網頁中按一下畫面上的文字,這段文字被傳送至右邊的畫面,結果如下:


進入 HTML5 的世界,瞭解這個機制非常重要,透過 postMessage() 傳送資料,監聽 message 事件,它不止被運用在網頁間的資料傳遞,還有許多場合運用相同的原理。

postonmessage.html
<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script>
        var target = open("amessage.html", "cwin");
        function sendMessage() {
            var locationurl = location.protocol + "//" + location.host;
            var message = document.getElementById("msg").innerHTML;
            target.postMessage(message, locationurl);
        }
    </script>
</head>
<body>
    <div id="msg" style="font-size: 36pt; font-weight: 600;" onclick="sendMessage()">
        HTML5 專業解構】
        <br />
        8.18/8.19 熱烈開講
    </div>
</body>
</html>

amessage.html
<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script>     
        addEventListener("message", function (event) {           
                document.body.innerHTML = event.data;
        }, false);    
    </script>
</head>
<body style="font-size:36pt;color:White;background:black; font-weight:600;" >
</body>
</html>

沒有留言: