Komentar: Window.PostMessage memungkinkan beberapa windows/frame untuk meneruskan data dan informasi di seluruh domain. Berikut adalah deskripsi tentang bagaimana window.postmessage bekerja dan cara menggunakannya di firefox, ie8+, opera, safari dan chrome
Alamat Asli: Window HTML5.PostMessage APIContoh online: Menggunakan window html5.postmessage (buka konsol untuk melihat log)
Saya menulis mootools plugin postmessager untuk merangkum window.postmessage, Anda dapat mengklik di sini untuk mengunduhnya!
Tidak banyak orang yang tahu tentang jendela HTML5.PostMessage API. Window.PostMessage memungkinkan data dan informasi dilewati di seluruh domain antara beberapa windows/frame. Intinya, Window.PostMessage memainkan peran permintaan AJAX lintas domain, dan tentu saja, itu tidak memerlukan server jarak jauh untuk berkolaborasi. Selanjutnya, kami akan memperkenalkan cara kerja Window.PostMessage, dan cara menggunakannya di Firefox, IE8+, Opera, Safari, dan Chrome.
1. Pesan Mengirim Akhir
Langkah pertama dalam seluruh proses adalah mengatur sumber pesan. Melalui sumber pesan ini, kami dapat mengirim data (pesan) tingkat jendela ke jendela yang baru dibuka (atau iframe). Dalam contoh berikut, frekuensi mengirim pesan ke jendela baru sekali setiap 6 detik, dan mendengarkan acara diatur untuk memproses informasi respons yang dikembalikan oleh jendela target.
function trace (pesan) {
var infos = array.prototype.slice.call (argumen, 0) .join ("");
if ("konsol" di jendela) {
Console.log (info);
} kalau tidak {
waspada (info);
}
};
// Buat jendela pop-up
var domain = 'http://scriptandstyle.com';
var mypopup = window.open (domain + '/windowpostmessagelistener.html' ,'mywindow');
// Kirim pesan secara teratur
setInterval (function () {
var message = 'waktu saat ini:' + (tanggal baru (). getTime ());
trace ('Sumber data. Pesan dikirim:' + pesan);
mypopup.postmessage (pesan, domain); // Kirim informasi data dan atur URI target
}, 6*1000);
Function Bindevent (Target, NooneventName, Handler) {
if (window.addeventListener) {
target.addeventListener (nooneventname, handler);
} lain jika (window.attachevent) {
// Fungsi pengaturan mendengarkan IE adalah lampiran
target.attachevent ("on"+nooneventname, handler);
} kalau tidak {
target ["on"+nooneventname] = handler;
}
};
// Dengarkan informasi yang diterima.
bindevent (window, 'message', function (event) {
// Hanya menerima pesan dari domain tertentu
if (event.origin! == 'http://scriptandstyle.com') kembali;
Trace ('Informasi Respons Diterima:', Event.data);
},PALSU);
Penulis asli menggunakan metode window.addeventListener untuk mengikat peristiwa, tetapi kesalahan akan dilaporkan berdasarkan IE (IE Window.Attachevent). Tentu saja, Anda dapat membuat fungsi untuk membungkus acara, atau menggunakan perpustakaan kelas yang sudah jadi, seperti mootools atau jQuery/dojo untuk mengimplementasikannya.
Dalam contoh di atas, jika jendela baru terbuka secara normal, kita dapat mengirim pesan melalui referensi ke mypopup objek jendela dan menentukan URI (protokol, nama host, nomor port) yang harus dicocokkan (jika pengguna melompat ke halaman lain di jendela anak, pesan tidak akan dikirim).
Demikian pula, kami juga mengikat event handler untuk menerima pesan pesan. Berikut adalah pengingat bahwa penting untuk memverifikasi atribut asal dari acara pesan, karena mungkin menerima pesan yang dikirimkan kepada Anda oleh semua URI, sehingga tidak akan bingung ketika beberapa frame berinteraksi. Setelah memverifikasi asal, cara memproses pesan ini tergantung pada bisnis dan kebutuhan spesifik Anda.
Jika menggunakan iframe, kode adalah sebagai berikut:
// Buat jendela lain (iframe, bingkai, frameset, atas, jendela dan objek lain yang termasuk terkait jendela.)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById ('myiframe'). ContentWindow;
// Kirim pesan dalam satu loop, tentu saja, berbasis acara atau sesuatu seperti itu dapat digunakan. . .
setInterval (function () {
var message = 'waktu saat ini:' + (tanggal baru (). getTime ());
trace ('Sumber data. Pesan dikirim:' + pesan);
iframe.postmessage (pesan, domain); // Kirim informasi data dan atur URI target
}, 6*1000);
Pastikan untuk mengakses properti ContentWindow dari objek iframe - bukan hanya objek iframe.
2. Penerima Pesan
Langkah kedua di seluruh proses adalah membuat jendela target siap. Apa yang perlu dilakukan oleh jendela tujuan adalah mendengarkan acara pesan, dan tentu saja itu juga perlu memverifikasi sumber asal acara. Sekali lagi, penangan acara pesan dapat menerima pesan yang dikirimkan kepadanya dengan nama domain apa pun, jadi sangat penting untuk memverifikasi asal dan hanya menangani pesan yang hanya daftar kepercayaan.
// Dengarkan informasi yang diterima.
bindevent (window, 'message', function (event) {
// Hanya menerima pesan dari domain tertentu
if (event.origin! == 'http://davidwalsh.name') kembali;
Trace ('Listen to Message:', event.data);
// Balas pesannya
event.source.postmessage ("Halo, teman, saya telah menerima pesan, event.origin);
},PALSU);
Contoh di atas menanggapi pihak yang meminta.
Atribut penting dari acara pesan adalah:
Sumber - Kirim Jendela Pesan/Objek IFRAME
Asal - sesuai dengan URI (protokol, domain, dan port, jika ditentukan)
Data - Informasi Data Spesifik
Ketiga objek ini sangat penting untuk sistem pesan dan verifikasi.
Catatan tentang menggunakan window.postmessage
Sama seperti semua teknologi web lainnya, bahayanya jelas jika digunakan secara tidak benar (tidak ada verifikasi sumber acara). Tentu saja, keamanan dijamin oleh Anda.
Window.PostMessage sangat mirip dengan PHP dalam teknologi JavaScript (haha, iklan kecil!). Window.PostMessage adalah teknologi yang keren, bagaimana menurut Anda?