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

2020-03-24 16:31:03

字体：大中小

来源：转载

供稿：网友

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
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：5 个强大的HTML5 API 函数推荐

下一篇：html中form表单的内标签是什么？如何使用？