Saat membuat kode, kita sering menghadapi situasi lintas domain berikut:
1. Menyusun iframe di dalam halaman dan mengirim pesan dengan iframe
2. Mentransfer pesan antar halaman dan beberapa halaman
Menanggapi masalah lintas domain yang menyusahkan ini, HTML5 secara khusus meluncurkan fitur baru-postMessage (transmisi pesan lintas dokumen). Saat menggunakan postMessage, Anda harus memasukkan dua parameter, data dan originUrl. Data mengacu pada konten yang perlu diteruskan, tetapi beberapa browser hanya dapat menangani parameter string, jadi kami biasanya membuat serial data, yaitu JSON.stringify(), dan originUrl merujuk ke url target dan jendela yang ditentukan.
Di bawah ini adalah contohnya, saya yakin akan lebih mudah bagi semua orang untuk memahami dan menulisnya.
1. Iframe bersarang di dalam halaman
Halaman induk:
html:
<div id='parent'>halo kata postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Subhalaman:
html:
<div id='button' onclick='changeColor();' style=color:kuning>Terima informasi</div>
js:
window.addEventListener('message',function(e){ console.log(e) biarkan warna = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});fungsi changeColor(){ biarkan buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}Halaman induk meneruskan pesan ke iframe melalui metode postMessage, dan halaman anak mendengarkan metode pesan melalui window.addEventListener untuk mendapatkan nilai yang diteruskan oleh halaman induk. Seperti yang ditunjukkan pada gambar di bawah, data adalah nilai yang diteruskan oleh halaman induk.
Saat halaman anak mengirimkan pesan ke halaman induk, halaman tersebut juga meneruskan pesan melalui metode postMessage, alih-alih meneruskan nilai melalui window.parent.postMessage(data,url). Halaman induk juga mendengarkan peristiwa pesan saat mendapatkan nilainya.
2. Melewati pesan antar beberapa halaman
Halaman induk:
html:
<div id='parent' onclick=postMessage()>halo kata postMessage</div>
js:
biarkan induk = document.getElementById('parent')function postMessage(){ biarkan windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Subhalaman:
html:
<div id='button' onclick='changeColor();' style=color:#f00>Terima informasi</div>
js:
window.addEventListener('pesan',fungsi(e){ console.log(e) });Halaman induk mengirimkan pesan ke halaman anak untuk membuka halaman lain melalui window.open, dan kemudian meneruskan nilainya ke sana. Perlu dicatat bahwa saat menggunakan postMessage untuk mentransfer nilai, Anda perlu menggunakan setTimeout untuk menunda pengiriman pesan, karena pemuatan subhalaman tidak selesai sekaligus, yang berarti acara mendengarkan subhalaman belum dimulai, dan nilai yang diteruskan saat ini tidak dapat diterima.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.