康廷數位: HTML5 HTML5 網頁溝通機制： postMessage 方法與 message 事件

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

<body>

【HTML5 專業解構】

<br />

8.18/8.19 熱烈開講 XD

</div>

</body>

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

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 ，其中的程式碼如下：

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>

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>

【HTML5 專業解構】

<br />

8.18/8.19 熱烈開講

</div>

</body>

</html>

amessage.html

<!DOCTYPE html >

<html>

<head>

addEventListener("message", function (event) {

document.body.innerHTML = event.data;

}, false);

</script>

</head>

</body>

</html>

繼續閱讀…

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

沒有留言: