html5跨域通讯中postMessage的用法
这篇文章给大家介绍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><h2>跨域通讯</h2>
传递信息：<input type="text" id="statusText" value="Online">
<button id="sendButton">确定</button>
<iframe id="widget" class="lazy" data-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>
关于html5跨域通讯中postMessage的用法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
