HTML5 tetingkap/iframe silang domain pemesejan API pengenalan_html5 kemahiran tutorial

Alamat asal: API tetingkap HTML5.postMessage
Contoh dalam talian: Menggunakan tetingkap HTML5.postMessage(Sila buka konsol untuk melihat log)

Saya menulis pemalam MooTools "PostMessager" untuk merangkumkan window.postMessage, anda boleh klik di sini untuk memuat turun

Tidak ramai yang memahami API antara muka window.postMessage HTML5. window.postMessage membenarkan pemindahan merentas domain data dan maklumat antara berbilang tingkap/bingkai. Pada dasarnya, window.postMessage memainkan peranan permintaan Ajax merentas domain Sudah tentu, ia tidak memerlukan pelayan jauh untuk bekerjasama. Seterusnya, kami akan memperkenalkan cara window.postMessage berfungsi dan cara menggunakannya dalam FireFox, IE8, Opera, Safari dan Chrome

1 Message send end
Seluruh proses langkah pertama ialah menyediakan "sumber berita". Melalui sumber mesej ini, kami boleh menghantar data peringkat tetingkap (mesej) ke tetingkap (atau iframe) yang baru dibuka. Dalam contoh berikut, kekerapan menghantar mesej ke tetingkap baharu adalah sekali setiap 6 saat dan mendengar acara disediakan untuk memproses maklumat respons yang dikembalikan oleh tetingkap sasaran.

Salin kod

Kodnya adalah seperti berikut:

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

Kod tersebut ialah seperti berikut:


// Buat juga tetingkap lain (iframe, bingkai, set bingkai, atas, tetingkap adalah semua objek berkaitan tetingkap.)
var domain = 'http://scriptandstyle.com ';
var iframe = document.getElementById('myIFrame').contentWindow
// Sudah tentu, kaedah dipacu peristiwa juga boleh digunakan. . .

setInterval(function(){

var message = 'Masa semasa: ' (new Date().getTime()); trace('Data source.Message sent: ' message); iframe.postMessage(message,domain); //Hantar maklumat data dan tetapkan URI sasaran },6*1000); —— Dan bukan hanya objek iframe.

2. Penghujung penerimaan mesej

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.

Nota tentang penggunaan window.postMessage

Sama seperti semua teknologi web lain, bahayanya jelas jika digunakan secara tidak wajar (tanpa mengesahkan sumber acara). Sudah tentu, keselamatan terpulang kepada anda.
window.postMessage sangat serupa dengan PHP dalam teknologi JavaScript (haha, iklan kecil!).window.postMessage ialah teknologi yang sangat hebat, apa pendapat anda?