Beranda>Tutorial Desain Web>tutorial HTML

Untuk detailnya

Penulis：Eve Cole Waktu Pembaruan：2025-03-09 16:48:01

Dalam artikel sebelumnya, ia berbicara tentang strategi homolog browser, yaitu, mencegah metode dan atribut masing -masing dari mengakses halaman satu sama lain, dan menjelaskan solusi untuk solusi untuk masalah silang -domain dari strategi homolog: agensi sub -domain , JSONP, JSONP, CORS. Artikel ini akan menjelaskan secara terperinci jendela HTML5.PostMessage.

Html5 window.postmessage API

Html5 window.postmessage adalah API pesan berbasis acara yang aman.

Pesan Postmessage Kirim

Metode postmessage dipanggil di jendela sumber yang perlu mengirim pesan untuk mengirim pesan.

Jendela Sumber

Jendela sumber dapat berupa objek jendela global atau jenis jendela berikut:

Iframe di jendela dokumen:

 var iframe = document.getElementById ('my-iframe');

Javascript Open Pop -Up Window:

 var win = window.open ();

Jendela ayah dari jendela dokumen saat ini:

 var win = window.parent;

Buka jendela dokumen saat ini:

 var win = window.opner ();

Setelah menemukan objek jendela sumber, Anda dapat menghubungi API postmessage untuk mengirim pesan ke jendela target:

 `` `Win.postmessage ('halo', 'ttp: //jhssdemo.duapp.com/');` `` `` `` `` `` ``

Fungsi postmessage menerima dua parameter: yang pertama adalah pesan yang akan dikirim, dan yang kedua adalah sumber dari jendela sumber.

Catatan: Hanya ketika sumber jendela target dicocokkan dengan nilai parameter sumber yang dilewati dalam fungsi pascapsage, pesan dapat diterima.

Menerima pesan postmessage

Untuk menerima pesan dari jendela sumber sebelumnya melalui postmessage, Anda hanya perlu mendaftarkan acara pesan di jendela target dan mengikat fungsi pemantauan acara untuk mendapatkan pesan di parameter fungsi.

 Window.onload = function () {var text = document.geteLementById ('txt'); + e.origin); // Console.log (Sumber: + E.Source); } if (window.addeventListener) {// Daftarkan acara pesan untuk jendela, dan ikat jendela fungsi pemantauan. ;}};

Fungsi pemantauan acara pesan menerima parameter, instance objek acara, yang memiliki tiga atribut:

  1. Pesan khusus yang dikirim oleh data
  2. Asal mengirimkan sumber pesan
  3. Kutipan objek jendela dari sumber mengirimkan jendela pesan
menjelaskan

  1. Anda dapat mengatur parameter kedua dari fungsi postmessage ke*, dan Anda akan melewatkan pemeriksaan sumber pesan saat mengirim pesan silang -domain.
  2. Postmessage hanya dapat mengirim informasi string.
Contoh

Jendela Sumber

 <! # cccccc;} </tyle> </head> <body> <body id = btn> buka </button> <tombol id = kirim> </button> <!) -> <iframe src = http: // jhssdemo.duapp.com/demo/h5_postmessage/win.html id = Otherwin> </iframe> <br/> <br/> "<input type = tombol value = kirim ke child.com id = sendMessage/> <cript> Window.onload = function () {var btn = document.geteLementById ('btn'); window melalui window.open ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html', 'popup'); // Kirim Data Dokumen.GetElementById (Otherwin) .ContentWindow .PostMersage (Otherwin) d (pesan). ;}; </script> </body> </html>

Target window win.html

 <! ;} </tyle> </head> <body> <h1> Jendela baru </h1> <div id = txt> </div> <script> window.onload = function () {var text = dokumen ('TXT'); (norigin: + e.origin); untuk acara pesan dan mengikat jendela fungsi pemantauan.addeventListener ('pesan', receivemsg, false);} else {window.attachevent ('pesan', receivemsg); "
tinjauan

Melalui studi artikel ini, saya belajar tentang menggunakan API postmessage untuk menggunakan HTML5 untuk berkomunikasi di antara jendela, dan saya juga tahu bahwa itu dapat digunakan untuk mewujudkan komunikasi lintas domain; seperti IE7-, Anda dapat menggunakannya.

Di atas adalah semua isi artikel ini.

Artikel Terkait