Rumah  >  Artikel  >  hujung hadapan web  >  html5 penghantaran mesej silang dokumen contoh perbincangan_html5 kemahiran tutorial

html5 penghantaran mesej silang dokumen contoh perbincangan_html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:49:491342semak imbas

Pantau peristiwa mesej objek tetingkap

Salin kod
Kod adalah seperti berikut:

window .addEventListener("message", function(event) {
// kod pengendali
}, false);

Gunakan kaedah postMessage() objek tetingkap untuk menghantar mesej ke tetingkap lain , kaedah ditakrifkan seperti berikut:

Salin kod
Kod adalah seperti berikut:

tetingkap lain (mesej, targetOrigin);

Kaedah ini menggunakan dua parameter: parameter pertama ialah teks mesej yang dihantar, tetapi ia juga boleh berupa JavaScript objek (menukar objek kepada teks melalui JSON); Parameter kedua ialah alamat URL tetingkap objek yang menerima mesej Anda boleh menggunakan kad bebas "*" dalam rentetan alamat URL untuk menentukan semua alamat, tetapi disyorkan untuk gunakan alamat URL yang tepat. otherwindow adalah untuk menghantar rujukan kepada objek tetingkap Anda boleh mengembalikan objek melalui kaedah window.open(), atau mengembalikan objek tetingkap yang dikaitkan dengan bingkai tunggal dengan menyatakan nombor siri (indeks) atau nama dalam window.frames. tatasusunan.
Contoh

Salin kod
Kodnya adalah seperti berikut:

< !DOCTYPE html> ;


title>
jenis skrip ="text/javascript">
$(function() {
// Dengar acara mesej.
window.addEventListener("message", function(event) {
// Abaikan Mesej URL yang ditentukan yang dihantar dari halaman lain
jika(event.origin != "http://www.blue-butterfly.net") kembalikan; . 🎜>}, palsu);
$("#iframeContent").load(function(event) {
// Hantar mesej ke sub-halaman
ini[0].postMessage("Hello" , " http://www.blue-butterfly.net/test/");
});

Contoh komunikasi merentas domain

" src ="http://www.blue-butterfly.net/test/">




sub Kod dalam halaman adalah seperti berikut:





Salin kod

Kod adalah seperti berikut:


"text/javascript" src="http ://code.jquery.com/jquery-1.6.4.min.js">