html5跨域通讯之postMessage的用法
生活随笔
收集整理的這篇文章主要介紹了
html5跨域通讯之postMessage的用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?轉自: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>?
若轉載請注明出處！若有疑問，請回復交流！總結
以上是生活随笔為你收集整理的html5跨域通讯之postMessage的用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mybatis学习--Mapper.xm
- 下一篇： 框架设计：实现数据的按需更新与插入的改进