Persyaratan 1: Bagaimana cara mentransfer data dari halaman utama A ke iframe B?
Dengan cara ini, halaman utama perlu meneruskan data ke iframe B, dan kemudian iframe B akan melakukan pemrosesan tertentu setelah memperoleh data.
Metode implementasi
Trik implementasinya adalah dengan menggunakan nilai hash dari objek location untuk meneruskan data komunikasi melaluinya. Kita hanya perlu mengatur src dari iframe B di halaman utama A dan menambahkan string #data setelahnya (data adalah data Anda). ingin lulus), seperti terlihat pada gambar di bawah ini:
Kemudian di iframe B, Anda bisa mendapatkan datanya secara instan melalui beberapa metode. Bahkan, metode yang umum digunakan adalah:
1. Atur timer melalui metode setInterval di iframe B, dan pantau perubahan location.href untuk mendapatkan informasi data di atas.
2. Kemudian iframe B dapat melakukan pemrosesan logis yang sesuai berdasarkan informasi data ini.
Persyaratan 2: Bagaimana cara iframe B meneruskan data ke halaman utama A?
Dengan cara ini, iframe B perlu meneruskan data ke halaman utama, dan kemudian halaman utama akan melakukan pemrosesan khusus setelah memperoleh data.
Metode implementasi
Trik implementasinya adalah dengan menggunakan proxy IframeC yang tertanam di iframe B dan harus tetap berada di domain yang sama dengan halaman utama A. Kemudian kita dapat menggunakannya untuk sepenuhnya memanfaatkan prinsip implementasi metode komunikasi pertama di atas untuk mentransfer data iframe B Ke iframeC, pertanyaan selanjutnya adalah bagaimana membiarkan iframeC meneruskan data ke halaman utama A, seperti terlihat pada gambar di bawah ini:
Karena iframeC dan halaman utama berada dalam domain yang sama, transfer data di antara keduanya menjadi lebih mudah. Metode kami di sini adalah menggunakan atribut window.top yang sering digunakan (Anda juga dapat menggunakan window.parent.parent), yang Mengembalikan a referensi objek jendela tingkat atas yang dimuat ke browser, sehingga kita bisa langsung menggunakan metode di halaman utama A, hahaha, sederhana.
Pada titik ini, kami membuat analisis dan ringkasan sederhana
Premis dan kelemahan terbesar dari penerapan ini adalah bahwa konten di iframe harus dapat kami kendalikan, namun setidaknya penerapan kami didasarkan pada aturan keamanan browser dan tidak merusak keamanan aplikasi itu sendiri.
Beberapa detail yang perlu dipertimbangkan saat menerapkan
Cobalah untuk mempertimbangkan kemudahan penggunaan, skalabilitas, dan pemeliharaan, seperti:
Biarkan aplikasi pihak ketiga hanya perlu memuat file benih JS yang kami sediakan untuk dengan mudah menggunakan berbagai alat yang kami sediakan untuk mereka.
Kami mengatur berbagai alat di atas dalam bentuk paket untuk memaksimalkan pemuatan sesuai permintaan.
File benih JS di item pertama hanya menyediakan implementasi metode dasar, dan memasukkan toolkit yang paling umum digunakan di dalamnya, seperti sangat adaptif
Melalui file awal, kami juga menyediakan beberapa toolkit JS yang umum digunakan untuk aplikasi pihak ketiga, dan toolkit yang ditentukan dapat digunakan secara langsung menggunakan mekanisme pemuatan dinamis yang mirip dengan modul YUI3.
Klasifikasikan data yang diteruskan oleh aplikasi pihak ketiga dan halaman utama (panggilan mandiri, verifikasi login, data yang diteruskan, dll.)
Data yang ditransfer menggunakan format JSON yang memenuhi spesifikasi spesifik dan dikirim melalui outlet layanan terpadu. Halaman utama menyediakan antarmuka layanan terpadu untuk mengurai data dan memanggil metode yang sesuai sesuai dengan spesifikasi.
Ada juga masalah kontrol versi. Untuk meminimalkan dampak pada aplikasi pihak ketiga, versi semua file JS di atas mengadopsi strategi kompatibilitas mundur Cache SQUID pada frekuensi tertentu. Pembaruan versi utama diubah secara manual sesuai dengan kebutuhan pengguna
Tentu saja, hal di atas mungkin bukan solusi yang optimal, namun saya hanya berharap ini dapat memberi Anda bantuan dan panduan. Kami juga secara bertahap meningkatkan beberapa metode penerapan kami, seperti kontrol versi. Kami juga memiliki beberapa masalah yang perlu diperbaiki terselesaikan.
kode tertentu
Kode sumber halaman utama A
Copy kode kodenya sebagai berikut:
kode Js
/*Halaman utama A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Halaman utama A</title>
<skrip tipe="teks/javascript">
fungsi init(){
dokumen.domain = 'bai.sohu.com';
alert('Saya adalah frame utama, tertanam dengan aplikasi pihak ketiga IframeB, aplikasi akan mulai memuat di bawah');
var iframeTag = dokumen.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'blok';
};
panggilan balik fungsi(h){
var iframeB = dokumen.getElementById('frameB');
alert('IframeC memanggil antarmuka (frame utama) saya dan meneruskan ketinggian IframeB kepada saya. Nilai spesifiknya adalah: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ jam
};
</skrip>
</kepala>
<tubuh onload="init();">
<p>Saya adalah bingkai beranda, dan domain saya adalah: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</tubuh>
</html>
Kode sumber iframeB (iframePage.html)
Copy kode kodenya sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>iframeB</title>
</kepala>
<tubuh onload="init();">
<p style="height:500px;">Saya adalah aplikasi pihak ketiga, dan domain saya adalah: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</tubuh>
</html>
<skrip tipe="teks/javascript">
fungsi init(){
alert('Saya adalah Aplikasi pihak ketiga. Mari buat saluran komunikasi IframeC di domain yang sama dengan frame utama, atur src-nya, dan gunakan tanda # untuk meneruskan nilai ketinggian');
var iframeTag = dokumen.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = dokumen.documentElement.scrollHeight ||.
iframeTag.src = iframeSrc + tinggi halaman;
iframeTag.style.display = 'blok';
jendela.setTimeout(fungsi(){
alert('Halaman utama menyetel src dari (IframeB) saya dan memberi saya ketinggian yang diterimanya melalui Hash (#): ' + location.hash);
},2000);
};
</skrip>
Kode sumber iframeC (iframePageC.html)
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
dokumen.domain = 'bai.sohu.com';
alert('Saya (IframeC) menerima iframeB yang memberikan saya nilai ketinggian melalui parameter (#), sekarang saya memanggil metode halaman utama untuk mengatur ketinggian IframeB');
top.callback(window.location.href.split('#')[1]);
</skrip>