Gunakan postMessage() untuk memindahkan maklumat antara kemahiran pages_javascript merentas domain iframe

Disebabkan sekatan dasar asal web, apabila halaman menggunakan pautan iframe merentas domain, halaman utama dan sub-halaman tidak boleh berinteraksi, yang menyebabkan banyak masalah dalam pemindahan maklumat antara halaman Selepas satu siri percubaan, Akhirnya saya menemui kaedah berikut untuk mencapainya:

1. Lulus parameter url subhalaman

Ringkasnya, tambahkan semua parameter yang perlu dihantar ke url yang mempunyai asal yang sama seperti halaman utama, ubah hala subhalaman ke url, dan kemudian halaman utama memperoleh parameter ini melalui src daripada iframe

Prosesnya sangat rumit dan kaedah ini tidak disyorkan

2. postMessage()

postMessage() ialah API penghantaran mesej berasaskan peristiwa yang disediakan oleh HTML5, yang boleh merealisasikan dokumen silang teks, berbilang tetingkap dan pemesejan merentas domain.

kaedah postMessage(data,asal) menerima dua parameter

1.data: Data yang akan dihantar Spesifikasi html5 menyebut bahawa parameter ini boleh menjadi mana-mana jenis asas JavaScript atau objek yang boleh disalin Walau bagaimanapun, tidak semua penyemak imbas hanya boleh Memproses parameter rentetan kita perlu menggunakan kaedah JSON.stringify() untuk menyerikan parameter objek apabila menghantar parameter Kesan yang sama boleh dicapai dengan merujuk json2.js dalam versi IE yang lebih rendah.

2.origin: Parameter rentetan, menunjukkan sumber tetingkap sasaran, protokol + hos + nombor port [+URL]. . Kaedah postMessage() sahaja Mesej akan dihantar ke tetingkap yang ditentukan Sudah tentu, jika anda mahu, anda juga boleh menetapkan parameter kepada "*", yang boleh dihantar ke mana-mana tetingkap asal sebagai tetingkap semasa, tetapkannya kepada "/".

Hantar mesej (subhalaman)

function sendMessage(param) {
var url;
if (param.url) {
url = param.url;
};
var dataJson = JSON.stringify({　　　　 type:1,　　
a: param.c, b: param.c,
c: param.c,
url: url
});
window.parent.postMessage(dataJson, '*');
}

Memandangkan sesetengah penyemak imbas hanya boleh mengendalikan parameter rentetan, kita perlu menggunakan JSON.stringfy() dahulu untuk menukar parameter menjadi rentetan, dan kemudian gunakan JSON.parse() untuk menukar parameter kembali kepada objek apabila menerima halaman.

Terima mesej

Untuk parameter yang diluluskan oleh sub-halaman, kita boleh mendapatkannya dengan mendengar peristiwa mesej tetingkap:

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false); 

Acara mesej mempunyai beberapa atribut penting

1.data: Seperti namanya, ia adalah mesej yang dihantar

2.sumber: objek tetingkap yang menghantar mesej

3.asal: Sumber tetingkap mesej (protokol + hos + nombor port)

Penghantaran mesej merentas domain boleh dicapai melalui kaedah postMessage() dan acara mesej Perlu diingat bahawa dalam demo, kami menghantar mesej ke halaman induk melalui halaman anak, jadi kami menggunakan window.parent untuk menghantar. dan tetingkap untuk menerima :

window.parent.postMessage(dataJson, '*');

Jika ia dari halaman utama ke subhalaman, ia perlu ditukar Gunakan tetingkap untuk menghantar dan window.frames[0] untuk menerima.

Kandungan di atas adalah pengenalan editor untuk menggunakan postMessage() untuk merealisasikan pemindahan maklumat antara halaman merentas domain iframe saya harap ia akan membantu semua orang.