postMessage

Posted on Edited on In Views: Disqus:

 

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset=”UTF-8”>
    <title>HTML5 使用postMessage在不同網頁之間傳送文字訊息(傳送頁面)</title>
    <style>
    </style>
    <script>
        var new_win;


    <span style="color: #008800; font-style: italic;">/* 開啟另一個網頁 */</span>
    <span style="color: #aa22ff; font-weight: bold;">function</span> openWin() {
        new_win <span style="color: #666666;">=</span> <span style="color: #aa22ff;">window</span>.open(<span style="color: #bb4444;">"index2.html"</span>);
    }

    <span style="color: #008800; font-style: italic;">/* 傳送文字訊息 */</span>
    <span style="color: #aa22ff; font-weight: bold;">function</span> sendMsg() {
        <span style="color: #aa22ff; font-weight: bold;">var</span> msg <span style="color: #666666;">=</span> <span style="color: #aa22ff;">document</span>.getElementById(<span style="color: #bb4444;">"msg_txt"</span>).value;
        new_win.postMessage(msg, <span style="color: #bb4444;">"*"</span>);<span style="color: #008800; font-style: italic;">//表示限定訊息是給某特定網域，本例使用 * 表示沒限制</span>
    }
<span style="color: green; font-weight: bold;">&lt;/script&gt;</span>



</head>
<body>
    HTML5 使用postMessage在不同網頁之間傳送文字訊息(傳送頁面)<br>
    測試範例：<br>
    1.<button onclick=”openWin()”>開啟接收訊息頁面</button><br>
    2.<input id=”msg_txt” type=”text” value=”msg test” />
    <button onclick=”sendMsg()”>傳送文字訊息到接收頁面</button>
</body>
</html>


index2.html

<!DOCTYPE html>

<html>
<head>
    <meta charset=”UTF-8”>
    <title>HTML5 使用postMessage在不同網頁之間傳送文字訊息(接收頁面)</title>
    <style>
    </style>
    <script>
        var myMsg = function (e) {
            alert(“接收到的訊息：” + e.data);
            alert(“訊息來源網域：” + e.origin);


        <span style="color: #aa22ff;">document</span>.getElementById(<span style="color: #bb4444;">"res"</span>).innerHTML <span style="color: #666666;">=</span> <span style="color: #bb4444;">"接收到的訊息："</span> <span style="color: #666666;">+</span> e.data;
    };
    <span style="color: #aa22ff;">window</span>.addEventListener(<span style="color: #bb4444;">"message"</span>, myMsg, <span style="color: #aa22ff; font-weight: bold;">false</span>);<span style="color: #008800; font-style: italic;">//監聽message事件</span>
<span style="color: green; font-weight: bold;">&lt;/script&gt;</span>



</head>
<body>
    HTML5 使用postMessage在不同網頁之間傳送文字訊息(接收頁面)
    <div id=”res”></div>
</body>
</html>


說明：

1、postMessage 是應用於從 A 網域(index.html)傳送訊息至 B 網域(index2.html)。

2、postMessage 使用的前提是 B 網域要有提供頁面讓 A 網域來呼叫。

3、上例使用 window.open 開新視窗來示範，也可以使用 iframe 方式來示範。

4、注意，跑上面範例要在 hosted server 上跑才行。


參考資料：

HTML5 postMessage iframe跨域web通信简介

HTML5 使用postMessage在不同網頁之間傳送文字訊息

window.postMessage