Komentar: Jika Anda ingin mencapai transmisi pesan lintas dokumen, Anda harus terlebih dahulu mendengarkan acara pesan objek jendela, dan kemudian menggunakan metode postmessage () dari objek jendela untuk mengirim pesan ke jendela lain. Selanjutnya, mari kita perkenalkan secara detail. Teman yang tertarik dapat merujuknya.
Dengarkan acara pesan objek jendelawindow.addeventListener ("pesan", fungsi (event) {
// Tangani kode program
}, PALSU);
Gunakan metode postmessage () dari objek jendela untuk mengirim pesan ke jendela lain. Definisi metode ini adalah sebagai berikut:
OtherWindow.PostMessage (pesan, targetorigin);
Metode ini menggunakan dua parameter: parameter pertama adalah teks pesan yang dikirim, tetapi juga dapat berupa objek JavaScript (objek dikonversi menjadi teks melalui JSON); Parameter kedua adalah alamat URL dari jendela objek yang menerima pesan. Anda dapat menggunakan Wildcard * untuk menentukan semua alamat dalam string alamat URL, tetapi disarankan untuk menggunakan alamat URL yang akurat. OtherWindow adalah referensi ke objek jendela yang akan dikirim. Anda dapat mengembalikan objek melalui metode window.open (), atau mengembalikan objek jendela yang dikaitkan dengan satu bingkai dengan menentukan nomor urutan (indeks) atau nama ke array window.frames.
Contoh
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8"/>
<Title> Sampel dokumen utama untuk transfer pesan lintas dokumen </iteme>
<type skrip = "Text/JavaScript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<type skrip = "Teks/JavaScript">
$ (function () {
// dengarkan acara pesan.
window.addeventListener ("pesan", fungsi (event) {
// Abaikan pesan yang dikirim oleh halaman selain URL yang ditentukan.
if (event.origin! = "http://www.blue-butterfly.net") kembali;
alert (event.data); // Tunjukkan pesan.
}, PALSU);
$ ("#iframecontent"). Load (function (event) {
// Kirim pesan ke subhalaman
ini [0] .postmessage ("Hello", "http://www.blue-butterfly.net/test/");
});
});
</script>
</head>
<body>
<Header>
<h1> Bagian komunikasi lintas domain </h1>
</teader>
<iframe src = "http://www.blue-butterfly.net/test/"> </iframe>
</body>
</html>
Kode dalam subhalaman adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8"/>
<type skrip = "Text/JavaScript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<type skrip = "Teks/JavaScript">
$ (function () {
window.addeventListener ("pesan", fungsi (event) {
if (event.origin! = "http: // lulingniu") kembali;
$ ("#Console"). Append (event.origin) .Append ("Pesan dari:") .Append (event.data);
// Kirim pesan ke halaman utama.
event.source.postmessage ("Halo, ada:" + this.location, event.origin);
}, PALSU);
});
</script>
</head>
<body>
<p> Inilah yang ada di iframe. </p>
<div> </div>
</body>
</html>
• Dengan mendengarkan acara pesan objek jendela, Anda dapat menerima pesan.
• Dengan mengakses properti asal dari acara pesan, Anda bisa mendapatkan sumber pengiriman pesan (dalam contoh ini, sumber pengirim halaman utama adalah, dan sumber pengiriman subhalaman adalah). Catatan: Alamat URL dari sumber pengiriman dan situs web bukan konsep yang sama. Sumber pengiriman hanya mencakup nama domain dan nomor port. Agar tidak menerima pesan yang dikirim dengan jahat oleh sumber lain, yang terbaik adalah memeriksa sumber pengirim.
• Dengan mengakses atribut data dari acara pesan, konten pesan dapat diperoleh (dapat berupa objek JavaScript apa pun, menggunakan JSON).
• Kirim pesan menggunakan metode postmessage ().
• Dengan mengakses properti sumber dari acara pesan, Anda bisa mendapatkan objek proxy dari jendela sumber pesan.