浪费别人的时间等于是谋财害命，浪费自己的时间等于是慢性自杀。 —— 列宁

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>
复制代码

 

posted @ 2016-05-13 23:49  一谦的视界  阅读(242)  评论(0)  编辑  收藏  举报