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>

於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)