html5跨域通訊之postMessage的用法總結(jié)

2024-08-26 00:17:18

字體：大中小

供稿：網(wǎng)友

點(diǎn)評(píng)：本文是對(duì)html5跨域通訊之postMessage的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

postMessagePortal.html 頁(yè)面代碼

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<title>標(biāo)題</title>
<link href="styles.css">
<link >
<script></p><p>var targetOrigin = "http://22527.vhost20.boxcdn.cn";</p><p>var defaultTitle = "Portal";
var notificationTimer = null;</p><p>function messageHandler(e) {
if (e.origin == targetOrigin) {
notify(e.data);
} else {
// ignore messages from other origins
}
}</p><p>function sendString(s) {
document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);
}</p><p>
function notify(message) {
stopBlinking();
blinkTitle(message, defaultTitle);
}</p><p>function stopBlinking() {
if (notificationTimer !== null) {
clearTimeout(notificationTimer);
}
document.title = defaultTitle;
}</p><p>function blinkTitle(m1, m2) {
document.title = m1;
notificationTimer = setTimeout(blinkTitle, 1000, m2, m1)
}</p><p>function sendStatus() {
var statusText = document.getElementById("statusText").value;
sendString(statusText);
}</p><p>function loadDemo() {
document.getElementById("sendButton").addEventListener("click", sendStatus, true);
document.getElementById("stopButton").addEventListener("click", stopBlinking, true);
sendStatus();
}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);</p><p></script></p><p><h1>跨域通訊</h1>
傳遞信息：<input type="text" value="Online">
<button>確定</button>

<iframe src="http://22527.vhost20.boxcdn.cn/postMessageWidget.html"></iframe>
<p>
<button>停止標(biāo)題閃爍</button>
</p>

postMessageWidget.html頁(yè)面的代碼

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<title>標(biāo)題</title>
<link href="styles.css">
<script></p><p>var targetOrigin = "http://www.weixiu0376.cn";</p><p>// TODO whitelist array</p><p>function messageHandler(e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById("status").textContent = e.data;
} else {
// ignore messages from other origins
}
}</p><p>function sendString(s) {
window.top.postMessage(s, targetOrigin);
}</p><p>function loadDemo() {
document.getElementById("actionButton").addEventListener("click",
function() {
var messageText = document.getElementById("messageText").value;
sendString(messageText);
}, true);</p><p>}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);</p><p></script>
<p>顯示接收信息: <strong></strong><p>
<div>
<input type="text" value="填寫(xiě)消息內(nèi)容">
<button>發(fā)送消息</button>
</div>