转自:http://www.cnblogs.com/wshiqtb/p/3171199.html
postMessagePortal.html 页面代码
<!DOCTYPE html> <title>标题</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="http://apress.com/favicon.ico"> <script> 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); </script> <h1>跨域通讯</h1> 传递信息：<input type="text" id="statusText" value="Online"> <button id="sendButton">确定</button> <br> <br> <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> 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); </script> <p>显示接收信息: <strong id="status"></strong><p> <div> <input type="text" id="messageText" value="填写消息内容"> <button id="actionButton">发送消息</button> </div>
转载于:https://www.cnblogs.com/jym-sunshine/p/5491663.html
相关资源：html5跨域通讯之postMessage的用法总结