溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“html5的postMessage如何使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html5的postMessage如何使用”吧！
代碼如下:
<!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頁面的代碼
復(fù)制代碼
代碼如下:
<!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>
感謝各位的閱讀，以上就是“html5的postMessage如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)html5的postMessage如何使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
