Artikel ini memperkenalkan penjelasan rinci tentang html5 postMessage untuk memecahkan masalah komunikasi lintas domain dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
rendering
penguraian postmessage HTML5 menyediakan mekanisme baru PostMessage untuk mencapai komunikasi lintas asal yang aman. Sintaks otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: referensi ke jendela lain, seperti properti contentWindow dari IFRAME, eksekusi, objek jendela yang dikembalikan oleh window.open. pesan: data yang akan dikirim ke jendela lain. targetOrigin: Gunakan properti asal jendela untuk menentukan jendela mana yang bisa menerima peristiwa pesan, nilainya dapat berupa karakter * (menunjukkan tidak terbatas) atau transfer URL: adalah string objek yang dapat ditransfer yang dikirimkan bersamaan dengan pesan. Setelah dikirim, kepemilikannya tidak lagi dipertahankan. element.addEventListener(event,fn,useCaption); Peristiwa peristiwa tiga parameter seperti fungsi panggilan balik mouseenter mouseleave useCaption digunakan untuk menjelaskan apakah itu menggelegak atau menangkap. Nilai defaultnya adalah false, yang berarti pengiriman gelembung. Jika nilainya benar, maka nilai tersebut ditangkap dan diteruskan. Metode implementasi
Antarmuka utama main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Akses data lintas domain</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },salah) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> Saya antarmuka utama, menunggu untuk menerima pengiriman iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html lebar=800px tinggi=300px ></iframe> </div></tubuh></html>antarmuka iframe
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Dokumen</title> <style type=text/css> html,body{ height:100%; margin:0px; } </style></head> <body style=height:100%;> <div id=frame style=height:200px width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> Klik untuk mengubah warna</div> <script type=text/javascript> function changeColor(){ var frame = document.getElementById('frame'); var warna=bingkai.gaya.latar belakangWarna; if(warna=='rgb(204, 102, 0)'){ warna='rgb(204, 204, 0)'; )'; } konsol.log(bingkai====>,bingkai); window.parent.postMessage(warna,'*'); } </script> </body></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.