首頁 > web前端 > H5教程 > html5跨域通訊之postMessage的用法總結_html5教學技巧

html5跨域通訊之postMessage的用法總結_html5教學技巧

WBOY
發布: 2016-05-16 15:48:45
原創
1670 人瀏覽過

postMessagePortal.html 頁面代碼

複製代碼
代碼如下:


標題


var targetOrigin = "http://22527.vhost20.boxcdn.cn";

var defaultTitle = "Portal";
var notificationTimer = null;

function messageHandler(e) {
if (e.origin == targetOrigin) {
notification(e.data);
} else {
// 忽略來自其他來源的訊息
}
}

function sendString(s) {
document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);
}


函數notify(message) {
stopBlinking();
blinkTitle(message, defaultTitle);
}

function stopBlinking() {
if (notificationTimer !== null) {
clearTimeout(notificationTimer);
}
document.title = defaultTitle;
}
document.title = defaultTitle;
}
document.title = defaultTitle;
}

> ;

functionblinkTitle(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"clicking" , true);
sendStatus();
}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);

腳本>

跨域通訊


提交資訊:




postMessageWidget.html頁面的程式碼




複製代碼


代碼如下:



標題🎜>
標題🎜>
標題🎜>
標題🎜>
標題

<script>< /p> <p>var targetOrigin = "http://www.weixiu0376.cn"; <p>// TODO 白名單陣列 <p>function messageHandler(e) {<br /> if (e.origin === "http://www.weixiu0376.cn") {<br /> document.getElementById("status").textContent = e. data ;<br /> } else {<br /> // 忽略其他來源的訊息<br /> }<br />} <p>function sendString(s) {<br /> window.top.postMessage(s, targetOrigin);<br />} <p>function loadDemo() {</script>
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);

顯示接收資訊:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板