html5跨域通讯之postMessage的用法总结

postMessagePortal.htML 页面代码

复制代码代码如下:
!DOCTYPE html>
tITle> 标题/title>
link rel="stylesheet" href="styles.css">
link rel="icon" href="http://aPress.COM/favicon.ico">
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" id="statusText" value="Online">
button id="sendButton"> 确定/button>


iframe id="widget" src="http://22527.vhost20.boxcdn.cn/postMessageWidget.html"> /iframe>
p>
button id="stopButton"> 停止标题闪烁/button>
/p>

postMessageWidget.html页面的代码

复制代码代码如下:
!DOCTYPE html>
title> 标题/title>
link rel="stylesheet" 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 id="status"> /strong> p>
div>
input type="text" id="messageText" value="填写消息内容">
button id="actionButton"> 发送消息/button>
/div>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！