Menggunakan postMessage() untuk melaksanakan kaedah pemindahan maklumat antara kemahiran iframe pages_javascript merentas domain

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 sebarang jenis asas atau objek JavaScript yang boleh disalin Walau bagaimanapun, tidak semua penyemak imbas hanya boleh Memproses parameter rentetan perlu menggunakan kaedah JSON.stringify() untuk menyerikan parameter objek apabila menghantar parameter Kesan serupa 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 kepada rentetan, dan kemudian gunakan JSON.parse() pada halaman penerima untuk menukarnya kembali menjadi objek.

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);
suis (data.type) {
kes 1:
alert(data.a);break;
}
}, palsu);

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 window ke. terima:

window.parent.postMessage(dataJson, '*'); Jika ia dari halaman utama ke subhalaman, ia perlu ditukar Gunakan tetingkap untuk menghantar dan window.frames[0] untuk menerima.

Artikel di atas menggunakan postMessage() untuk merealisasikan pemindahan maklumat antara halaman iframe merentas domain Ini adalah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi anda rujukan, dan saya harap anda akan menyokong Script Home.