postMessagePortal.html 頁面代碼

復制代碼代碼如下:

標題

var targetOrigin = "http://22527.vhost20.boxcdn.cn";

var defaultTitle = "Portal";

var notificationTimer = null;

function messageHandler(e) {

if (e.origin == targetOrigin) {

notify(e.data);

} else {

// ignore messages from other origins

}

}

function sendString(s) {

document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);

}

function notify(message) {

stopBlinking();

blinkTitle(message, defaultTitle);

}

function stopBlinking() {

if (notificationTimer !== null) {

clearTimeout(notificationTimer);

}

document.title = defaultTitle;

}

function blinkTitle(m1, m2) {

document.title = m1;

notificationTimer = setTimeout(blinkTitle, 1000, m2, m1)

}

function sendStatus() {

var statusText = document.getElementById("statusText").value;

sendString(statusText);

}

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);

跨域通訊

傳遞信息：

確定

停止標題閃爍

postMessageWidget.html頁面的代碼

復制代碼代碼如下:

標題

var targetOrigin = "http://www.weixiu0376.cn";

// TODO whitelist array

function messageHandler(e) {

if (e.origin === "http://www.weixiu0376.cn") {

document.getElementById("status").textContent = e.data;

} else {

// ignore messages from other origins

}

}

function sendString(s) {

window.top.postMessage(s, targetOrigin);

}

function loadDemo() {

document.getElementById("actionButton").addEventListener("click",

function() {

var messageText = document.getElementById("messageText").value;

sendString(messageText);

}, true);

}

window.addEventListener("load", loadDemo, true);

window.addEventListener("message", messageHandler, true);

顯示接收信息:

發送消息

總結

以上是生活随笔為你收集整理的html5跨域 postmessage,html5跨域通讯之postMessage的用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。