html5跨域通讯之postMessage的用法总结
2013-11-07 10:32
561 查看
postMessagePortal.html 页面代码
postMessageWidget.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>
相关文章推荐
- html5跨域通讯之postMessage的用法
- html5跨域通讯之postMessage的用法
- .NET与JSP页面之间消息通讯(跨域,使用html5的postMessage实现)
- html5的跨域问题(通讯)
- HTML5解决跨域方案之postMessage
- html5 postMessage解决跨域、跨窗口消息传递
- html5手机开发cookie的用法总结
- js跨域总结(jsonp,postMessage,CORS)
- HTML5之window.postMessage实现跨域传递消息
- html5 postMessage解决跨域、跨窗口消息传递
- 使用HTML5中postMessage实现Ajax中的POST跨域问题
- html5的postmessage实现js前端跨域访问及调用解决方案
- 跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))
- html5的postmessage实现js前端跨域访问及调用解决方案
- html5 postMessage解决跨域、跨窗口消息传递
- 利用html5 postMessage接口跨域设置iframe大小
- iframe跨域通信--html5.postmessage
- [HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信
- html5 postMessage解决跨域、跨窗口消息传递(转)
- html5 postMessage解决跨域、跨窗口消息传递