Saya baru-baru ini mengalami kebutuhan di tempat kerja. Skenarionya adalah: halaman h5 tertanam di halaman PC sebagai modul pratinjau. Pengguna dapat melakukan beberapa operasi pada halaman PC, dan kemudian halaman h5 membuat perubahan responsif untuk mencapai efek pratinjau .
Hal pertama yang terlintas dalam pikiran di sini adalah menyematkan halaman h5 ke halaman web pc menggunakan iframe, dan kemudian pc mengirimkan data yang diubah ke iframe melalui metode postMessage. H5 yang tertanam di iframe menerima data melalui addEventListener , lalu membuat perubahan responsif pada data.
Berikut ringkasan penggunaan postMessage API-nya sangat sederhana:
otherWindow.postMessage(pesan, targetOrigin, [transfer]);
otherWindow adalah referensi ke jendela target, yaitu iframe.contentWindow dalam skenario saat ini;
message adalah pesan yang dikirim. Sebelum Gecko 6.0, pesan harus berupa string, tetapi versi yang lebih baru dapat mengirim objek secara langsung tanpa membuat serial sendiri;
targetOrigin mewakili asal jendela target, dan nilainya dapat berupa string * (menunjukkan tidak terbatas) atau URI. Saat mengirim pesan, jika salah satu protokol, alamat host atau port jendela target tidak cocok dengan nilai yang diberikan oleh targetOrigin, pesan tidak akan dikirim hanya jika ketiganya cocok, pesan akan dikirim. Untuk data rahasia, sangat penting untuk menetapkan asal jendela target;
Ketika postMessage() dipanggil, event pesan dikirim ke jendela target. Antarmuka ini memiliki acara pesan, yang memiliki beberapa properti penting:
1.data: Seperti namanya, itu adalah pesan yang disampaikan
2.source: objek jendela yang mengirimkan pesan
3.origin: sumber jendela pesan (protokol + host + nomor port)
Dengan cara ini, kami dapat menerima pesan lintas domain, dan kami juga dapat mengirim pesan kembali dengan cara yang sama.
Transfer parameter opsional adalah string objek yang Dapat Dipindahtangankan yang diteruskan bersama dengan pesan. Kepemilikan objek ini akan ditransfer ke penerima pesan, dan pengirim tidak lagi memiliki kepemilikan.
Kemudian, saat iframe diinisialisasi, Anda bisa mendapatkan referensi ke iframe dan mengirimkan pesan melalui kode berikut:
// Perhatikan bahwa ini bukan untuk mendapatkan referensi dom dari iframe, tetapi referensi dari jendela iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /hostanda.com' );Dalam iframe, pesan dapat diterima melalui kode berikut.
window.addEventListener('pesan', msgHandler, false);Saat menerima, Anda dapat memfilter asal pesan sesuai kebutuhan untuk menghindari serangan XSS yang disebabkan oleh penerimaan pesan dengan nama domain ilegal.
Terakhir, untuk penggunaan kembali kode, pengiriman dan penerimaan pesan dienkapsulasi ke dalam kelas, dan API jenis pesan disimulasikan, yang sangat nyaman digunakan. Kode spesifiknya adalah sebagai berikut:
ekspor kelas default Messager { konstruktor(menang, targetOrigin) { this.win = menang; this.targetOrigin = targetOrigin; this.actions = {}; window.addEventListener('message', this.handleMessageListener, false); => { if (!event.data || !event.data.type) { kembali; } const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: pendengar yang hilang`); this.actions[type](event.data.value } pada = (type, cb) = > { this.actions[type] = cb; kembalikan ini; } emit = (tipe, nilai) => { this.win.postMessage({ type, value }, this.targetOrigin); window.removeEventListener('pesan', this.handleMessageListener }}Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.