HTML5 可以很方便的讓資料在網頁之間傳遞,只要調用方法 postMessage() ,並監聽 onmessage 事件即可輕易的達到這個目的,直接來看作法。建立兩個網頁,分別是 postonmessage.html 與 amessage.html ,前者會在網頁載入完成之後,開啟後者。
以下列舉 postonmessage.html 的<body> 內容配置:
其中配置了一個 <div> 標籤,內部則是測試文字,現在於網頁一開始的地方,加入以下的程式碼:
一開始調用 open() 方法,開啟 amessage.html 檔案,然後取得此開啟的目標網頁參照變數 target 。緊接著是 sendMessage() 函式,首先取得目標網頁的路徑資訊 locationurl,然後取出畫面中 <div> 標籤的內容文字,最後這一行是關鍵,透過 target 調用 postMessage() ,將文字內容傳送至指定的位址。
接下來則是目標網頁 tmessage.html ,其中的程式碼如下:
此段程式碼監聽 message 事件,當上述的 postonmessage.html 調用 postMessage() 傳送資料過來的時候,此 message 事件被觸發,其中取得傳送過來的資料,並且顯示在畫面上。
左邊的截圖是 postonmessage.html 初始顯示的畫面,它會同時開啟另外一個網頁 amessage.html ,也就是右邊背景黑色的載圖:
現在於左圖的網頁中按一下畫面上的文字,這段文字被傳送至右邊的畫面,結果如下:
進入 HTML5 的世界,瞭解這個機制非常重要,透過 postMessage() 傳送資料,監聽 message 事件,它不止被運用在網頁間的資料傳遞,還有許多場合運用相同的原理。
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>
</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>
沒有留言:
張貼留言