Komentar: Artikel ini memberikan ringkasan terperinci tentang penggunaan postmessage dalam komunikasi domain silang HTML5. Teman yang membutuhkannya bisa datang dan merujuknya. Saya harap ini akan membantu semua orang.
Kode halaman PostMessagePortal.html
<! Doctype html>
<title> title </iteme>
<link href = "styles.css">
<tautan 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);
} kalau tidak {
// abaikan pesan dari asal lain
}
} </p> <p> function sendString (s) {
document.getElementById ("widget"). contentWindow.postmessage (s, targetorigin);
} </p> <p>
fungsi memberi tahu (pesan) {
stopblinking ();
blinktitle (pesan, defaultTitle);
} </p> <p> Fungsi stopblinking () {
if (notificationTimer! == null) {
ClearTimeout (notificationTimer);
}
document.title = defaultTitle;
} </p> <p> Fungsi 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> Fungsi loadDemo () {
document.getElementById ("sendbutton"). addeventListener ("klik", sendstatus, true);
document.getElementById ("stopButton"). AddEventListener ("klik", stopblinking, true);
sendstatus ();
}
window.addeventlistener ("muat", loaddemo, true);
window.addeventListener ("pesan", pesan whega, true); </p> <p> </ptript> </p> <p> <h1> komunikasi domain lintas </h1>
Informasi Kirim: <Input Type = "Text" Value = "Online">
<button> konfirmasi </button>
<iframe src = "http://22527.vhost20.boxcdn.cn/postmessageWidget.html"> </iframe>
<p>
<button> Hentikan judul Flashing </button>
</p>
Halaman Kode PostMessageWidget.html
<! Doctype html>
<title> title </iteme>
<link href = "styles.css">
<script> </p> <p> var targetorigin = "http://www.weixiu0376.cn"; </p> <p> // array whitelist TODO </p> <p> Function MessageHandler (e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ("status"). TextContent = e.data;
} kalau tidak {
// abaikan pesan dari asal lain
}
} </p> <p> function sendString (s) {
window.top.postmessage (s, targetorigin);
} </p> <p> Fungsi loadDemo () {
document.getElementById ("ActionButton"). AddEventListener ("Klik",
fungsi() {
var messageText = document.getElementById ("messageText"). value;
sendString (MessageText);
}, true); </p> <p>}
window.addeventlistener ("muat", loaddemo, true);
window.addeventlistener ("pesan", pesan whandler, true); </p> <p> </script>
<p> Tampilkan informasi penerimaan: <strong> </strong> <p>
<div>
<input type = "text" value = "Isi konten pesan">
<button> Kirim pesan </button>
</div>