| 标题 | html5跨域通讯之postMessage的用法总结 |
| 内容 | 本文是对html5跨域通讯之postMessage的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助 postMessagePortal.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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。