HTML5 tetingkap/iframe silang domain pemesejan API pengenalan_html5 kemahiran tutorial

jejak fungsi(mesej){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos); } else {
alert(info);
};
// Cipta tetingkap timbul
var domain = 'http://scriptandstyle.com'; var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow'); Date().getTime( ));
trace('Sumber data. Mesej dihantar: ' message);
myPopup.postMessage(message,domain); },6*1000 );
fungsi bindEvent(target,noOnEventName,pengendali){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler); .attachEvent){
// Fungsi tetapan mendengar IE ialah attachEvent
target.attachEvent("on" noOnEventName,handler); ;
}
};
// Pantau maklumat yang diterima
bindEvent(tetingkap,'message',function(event) {
// Hanya terima mesej daripada domain tertentu
if(event.origin !== 'http://scriptandstyle.com') return;
trace('Maklumat respons diterima: ',event.data},false); 🎜>
Pengarang artikel asal menggunakan kaedah window.addEventListener untuk mengikat acara, tetapi ralat akan dilaporkan di bawah IE (IE ialah window.attachEvent Sudah tentu, anda boleh mencipta fungsi untuk membungkus acara itu). atau gunakan perpustakaan kelas sedia, seperti MooTools atau jQuery/dojo untuk mencapainya.
Dalam contoh di atas, jika tetingkap baharu dibuka seperti biasa, kami boleh menghantar mesej melalui rujukan objek tetingkap myPopup dan nyatakan URI (protokol, nama hos, nombor port) yang mesti sepadan (jika pengguna melompat ke dalam kanak-kanak tetingkap ke halaman lain, mesej tidak akan dihantar).
Begitu juga, kami juga telah mengikat fungsi pengendali acara untuk menerima mesej. Sebagai peringatan, adalah penting untuk mengesahkan atribut asal bagi peristiwa mesej, kerana adalah mungkin untuk menerima mesej yang dihantar kepada anda oleh semua URI, supaya anda tidak akan keliru apabila berinteraksi dengan berbilang bingkai. Selepas mengesahkan asal, cara mengendalikan mesej ini bergantung pada perniagaan dan keperluan khusus anda.

Jika menggunakan iframe, maka kodnya adalah seperti berikut:





Salin kod

Langkah kedua bagi keseluruhan proses ialah menyediakan tetingkap sasaran. Apa yang perlu dilakukan oleh tetingkap destinasi ialah mendengar acara mesej, dan sudah tentu mengesahkan sumber mesej asal acara tersebut. Peringatan sekali lagi: pengendali acara mesej boleh menerima mesej yang dihantar kepadanya daripada mana-mana nama domain, jadi adalah sangat penting untuk mengesahkan asal dan hanya memproses mesej daripada senarai amanah.





Salin kod


Kodnya adalah seperti berikut:

// Pantau maklumat yang diterima
bindEvent(tetingkap,'message',function(event) {
// Hanya terima mesej daripada domain tertentu<.> jika(event.origin !== 'http://davidwalsh.name') kembali;
trace('Maklumat yang didengar: ',event.data); .source .postMessage(""Hello, kawan-kawan, saya telah menerima mesej, event.origin); . Atribut penting
peristiwa mesej ialah:
sumber - objek tetingkap/iframe yang menghantar mesej
asal - URI yang sepadan dengan tetingkap yang menghantar mesej (protokol, domain dan port, jika ditentukan)
data - maklumat data khusus
Ketiga-tiga objek ini penting untuk sistem pemesejan dan pengesahan.