下面的範例，是先從某一個網頁，使用 window.open 開啟另一個網域的頁面，再將文字訊息傳送過去。
(若要傳送給 iframe 的頁面，可以使用 contentWindow 取得 iframe 載入的頁面，就可以用相同的方式傳送。)
傳送文字訊息頁面 (http://demo.cinc.biz/html5-postmessage/text.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 使用postMessage在不同網頁之間傳送文字訊息(傳送頁面)</title>
<style>
</style>
<script>
var new_win;
/* 開啟另一個網頁 */
function openWin() {
new_win = window.open("http://demo2.cinc.biz/html5-postmessage/text-new.html");
}
/* 傳送文字訊息 */
function sendMsg() {
var msg = document.getElementById("msg_txt").value;
new_win.postMessage(msg, "http://demo2.cinc.biz");//表示要送給demo2.example.com網域
}
</script>
</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>
接收文字訊息頁面 (http://demo2.cinc.biz/html5-postmessage/text-new.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);
if (e.origin != "http://demo.cinc.biz") {
alert("不明來源,不處理");
return; //不明來源,不處理
}
document.getElementById("res").innerHTML = "接收到的訊息：" + e.data;
};
window.addEventListener("message", myMsg, false);//監聽message事件
</script>
</head>
<body>
HTML5 使用postMessage在不同網頁之間傳送文字訊息(接收頁面)
<div id="res"></div>
</body>
</html>
DEMO：
http://demo.cinc.biz/html5-postmessage/text.html
參考：
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
沒有留言:
張貼留言