今天小编跟大家讲解下有关html5跨域通讯之postMessage的用法总结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5跨域通讯之postMessage的用法总结 的相关资料，希望小伙伴们看了有所帮助。
postMessagePortal.html 页面代码复制代码代码如下:<!DOCTYPE html><title>标题</title><link rel="stylesheet"href="https://www.aidi.net.cn//html5/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="https://www.aidi.net.cn//html5/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>
来源：爱蒂网
