溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5跨域通訊中postMessage的用法

發(fā)布時(shí)間：2021-10-08 11:51:53 來源：億速云 閱讀：154 作者：柒染 欄目：web開發(fā)

這篇文章給大家介紹html5跨域通訊中postMessage的用法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

postMessagePortal.html 頁面代碼

代碼如下:


<!DOCTYPE html>
<title>標(biāo)題</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><h2>跨域通訊</h2>
傳遞信息：<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">停止標(biāo)題閃爍</button>
</p>


postMessageWidget.html頁面的代碼

代碼如下:


<!DOCTYPE html>
<title>標(biāo)題</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="填寫消息內(nèi)容">
   <button id="actionButton">發(fā)送消息</button>
</div>

關(guān)于html5跨域通訊中postMessage的用法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手