HTML5 Postmessage Solves Cross -Domain dan solusi transmisi pesan silang -Window

Biasanya ketika melakukan pengembangan web, ada beberapa masalah yang sering ditemui selain klien dan transmisi server.

1. Transmisi data halaman dan jendela baru dibuka

2. Pesan di antara beberapa jendela

3. Halaman dan transmisi pesan iframe bersarang

4. Cross -Domain Data Transmisi dari tiga masalah di atas

postmessage ()

Masalah -masalah ini memiliki beberapa solusi, tetapi API pesan yang diperkenalkan oleh HTML5 bisa lebih nyaman, efektif, dan dipecahkan dengan aman. Metode PostMessage () memungkinkan skrip dari berbagai sumber untuk menggunakan metode asinkron untuk komunikasi terbatas, yang dapat mewujudkan file cross -text, multi -Window, dan pesan cross -domain.

Metode postmessage (data, asal) menerima dua parameter

1 . Perlu menggunakan metode JSON.stringify () untuk membuat serial parameter objek saat melewati parameter.

2.Origin: Parameter string, tunjukkan sumber jendela target, protokol+host+nomor port [+url], URL akan diabaikan, sehingga Anda dapat menulisnya. Hanya membuat pesan ke jendela yang ditentukan. ke/.

http://test.com/index.html

 <Div Style = Width: 200px; src = http://lslib.com/lslib.html> </fiframe> </div>

Kita dapat menyampaikan pesan ke silang -domain iframe page http: //lslib.html di salib -domain jika http://test.com/index.html mengirimkan pesan

 Window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');}

Menerima pesan

Halaman di atas test.com mengirim pesan ke lslib.com, jadi cara menerima pesan di halaman lslib.com, dan memantau acara pesan acara pesan Window.

http://lslib.com/lslib.html

 Window.addeventListener ('pesan', fungsi (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Postmessage (warna, '*');}, PALSU;

Dengan cara ini, kita dapat menerima pesan yang dilewati oleh jendela apa pun.

Ada beberapa atribut penting

1. Data: Seperti namanya, itu adalah pesan yang dilewati

2.Sumber: Objek jendela untuk mengirim pesan

3.origin: Sumber Mengirim Jendela Pesan (Protokol+Host+Nomor Port)

Dengan cara ini, Anda dapat menerima pesan silang -domain.

Demo sederhana

Dalam contoh ini, div di sebelah kiri akan berubah sesuai dengan perubahan warna div di kanan di sebelah kanan

 <! <Div ID = Color> Warna bingkai </div> </div> <verv> <iframe id = anak src = http://lslib.com/lslib.html> </div> </div> <type skrip = Text/JavaScript> window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');} window.addd eventListener ('pesan', fungsi (e) {var color = e.data;

 <! = Container OnClick = ChangeColor (); ); ;}, false); , 0) ';} else {color =' rgb (204,102,0) ';} container.style.backgroundColor = color;');} </script> </body> </html> http: // lslib. com/lslib.html

Ketika halaman dimuat dalam contoh, beranda mengirimkan permintaan 'getColor' ke iframe (parameter tidak praktis)

 Window.onload = function () {window.frames [0] .postmessage ('getColor', 'http://lslib.com');}

Iframe menerima pesan dan mengirim warna saat ini ke halaman utama

 Window.addeventListener ('pesan', fungsi (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundcolor; window.parent. Postmessage (warna, '*');}, PALSU;

Terima pesan di beranda, ubah warna div Anda sendiri

 Window.addeventListener ('pesan', fungsi (e) {var color = e.data; document.geteLementById ('color'). Style.backgroundColor = color;);

Saat mengklik iframe memicu metode perubahan warnanya, kirim warna terbaru ke halaman utama

 function changeColor () {var color = container.style.backgroundColor RGB (204,102,0) ';} container.style.backgroundColor = warna;

Beranda masih menggunakan program yang baru saja mendengarkan acara pesan untuk menangani perubahan warna sendiri

 Window.addeventListener ('pesan', fungsi (e) {var color = e.data; document.geteLementById ('color'). Style.backgroundColor = color;);

akhirnya

Penggunaan sederhana memecahkan masalah besar. Kompatibilitas browser yang disebut SO hampir menjadi masalah yang telah dimulai oleh IE. Esensi Esensi Namun, kabar baiknya seperti LocalStorage. juga menentukan apakah mendukung AddEventListener.

Di atas adalah semua isi artikel ini.