Referensi antar kerangka kerja
Semua frame dalam suatu halaman disediakan sebagai atribut objek jendela dalam bentuk koleksi. Misalnya: window.frames mewakili kumpulan semua frame dalam halaman. Ini mirip dengan objek bentuk, objek link, objek gambar, dll ., namun bedanya, koleksi-koleksi tersebut merupakan properti dari dokumen. Oleh karena itu, untuk mereferensikan subframe, Anda dapat menggunakan sintaks berikut:
Copy kode kodenya sebagai berikut:
window.frames["Namabingkai"];
window.frames.frameName
jendela.bingkai[indeks]
Diantaranya, kata window juga dapat diganti atau dihilangkan dengan self. Dengan asumsi frameName adalah frame pertama di halaman, metode penulisan berikut ini setara:
Copy kode kodenya sebagai berikut:
mandiri.frame["Namabingkai"]
diri.frame[0]
bingkai[0]
nama bingkai
Setiap frame berhubungan dengan halaman HTML, jadi frame ini juga merupakan jendela browser independen. Ia memiliki semua properti jendela. Yang disebut referensi ke frame adalah referensi ke objek jendela. Dengan objek window ini, Anda dapat dengan mudah mengoperasikan halaman-halaman di dalamnya, seperti menggunakan objek window.document untuk menulis data ke halaman, menggunakan properti window.location untuk mengubah halaman dalam bingkai, dll.
Berikut ini memperkenalkan referensi timbal balik antara berbagai tingkat kerangka kerja:
1. Referensi dari frame induk ke frame anak
Mengetahui prinsip diatas, maka sangat mudah untuk mereferensikan child frame dari parent frame, yaitu:
Copy kode kodenya sebagai berikut:
window.frames["Namabingkai"];
Ini mereferensikan subframe bernama frameName di dalam halaman. Jika Anda ingin mereferensikan subframe di dalam subframe, sesuai dengan sifat frame yang direferensikan, yang sebenarnya adalah objek window, Anda dapat mengimplementasikannya seperti ini:
Copy kode kodenya sebagai berikut:
window.frames["frameName"].frames["frameName2"];
Dengan cara ini, sub-frame tingkat kedua direferensikan, dan dengan analogi, referensi kerangka multi-layer dapat dicapai.
2． Referensi dari frame anak ke frame induk
Setiap objek jendela memiliki properti induk yang mewakili bingkai induknya. Jika frame sudah menjadi frame tingkat atas, window.parent juga mewakili frame itu sendiri.
3． Referensi antar frame saudara
Jika dua frame merupakan sub-frame dari frame yang sama, keduanya disebut frame saudara dan dapat mereferensikan satu sama lain melalui frame induk.
Copy kode kodenya sebagai berikut:
<frameset baris="50%,50%">
<bingkai src="1.html" nama="bingkai1" />
<bingkai src="2.html" nama="bingkai2" />
</bingkai>
Di frame1, Anda dapat menggunakan pernyataan berikut untuk mereferensikan frame2:
Copy kode kodenya sebagai berikut:
self.parent.frames["frame2"];
4. Referensi timbal balik antara berbagai tingkat kerangka kerja
Tingkat kerangka tersebut adalah untuk kerangka tingkat atas. Ketika levelnya berbeda, selama Anda mengetahui level di mana Anda berada dan level serta nama frame lainnya, Anda dapat dengan mudah mengakses satu sama lain dengan menggunakan properti objek jendela yang direferensikan oleh frame tersebut, misalnya:
Copy kode kodenya sebagai berikut:
self.parent.frames["childName"].frames["targetFrameName"];
5. Referensi ke frame tingkat atas
Mirip dengan properti induk, objek window juga memiliki properti top. Ini mewakili referensi ke frame tingkat atas, yang dapat digunakan untuk menentukan apakah suatu frame itu sendiri merupakan frame tingkat atas, misalnya:
Copy kode kodenya sebagai berikut:
//Tentukan apakah frame ini merupakan frame tingkat atas
if(diri==atas){
//melakukan sesuatu
}
Ubah halaman pemuatan kerangka kerja
Referensi ke frame adalah referensi ke objek window. Dengan menggunakan atribut location dari objek window, Anda dapat mengubah navigasi frame, misalnya:
jendela.bingkai[0].lokasi="1.html";
Ini mengalihkan halaman frame pertama di halaman ke 1.html. Memanfaatkan properti ini, Anda bahkan dapat menggunakan satu link untuk memperbarui beberapa frame.
Copy kode kodenya sebagai berikut:
<frameset baris="50%,50%">
<bingkai src="1.html" nama="bingkai1" />
<bingkai src="2.html" nama="bingkai2" />
</bingkai>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">tautan</a>
<!--somecode-->
Referensikan variabel dan fungsi JavaScript dalam kerangka lain
Sebelum memperkenalkan teknik untuk mereferensikan variabel dan fungsi JavaScript di framework lain, mari kita lihat kode berikut:
Copy kode kodenya sebagai berikut:
<skrip bahasa="JavaScript" type="teks/javascript">
<!--
fungsi halo(){
alert("Halo,ajax!");
}
jendela.halo();
//-->
</skrip>
Jika Anda menjalankan kode ini, jendela "halo, ajax!" akan muncul, yang merupakan hasil dari menjalankan fungsi hello(). Jadi mengapa hello() menjadi metode objek window? Karena semua variabel global dan fungsi global yang didefinisikan dalam suatu halaman adalah anggota objek window. Misalnya:
Copy kode kodenya sebagai berikut:
var a=1;
alert(window.a);
Sebuah kotak dialog akan muncul menampilkan 1. Prinsip yang sama berlaku untuk berbagi variabel dan fungsi antara kerangka kerja yang berbeda dengan memanggilnya melalui objek window.
Misalnya: halaman penelusuran produk terdiri dari dua sub-frame. Sisi kiri mewakili link ke kategori produk; ketika pengguna mengklik link kategori, daftar produk terkait ditampilkan di sisi kanan; Tautan Beli] di sebelah produk untuk menambahkan keranjang belanja produk.
Pada contoh ini, halaman navigasi kiri dapat digunakan untuk menyimpan produk yang ingin dibeli pengguna, karena ketika pengguna mengklik link navigasi tersebut, yang berubah adalah halaman lain yaitu halaman tampilan produk, dan halaman navigasi itu sendiri. tetap tidak berubah, sehingga variabel JavaScript tidak akan hilang dan dapat digunakan untuk menyimpan data global. Prinsip pelaksanaannya adalah sebagai berikut:
Asumsikan halaman sebelah kiri adalah link.html dan halaman sebelah kanan adalah show.html. Struktur halamannya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transisi//EN">
<html>
<kepala>
<title> Dokumen Baru </title>
</kepala>
<frameset cols="20%,80%">
<frame src="link.html" nama="link" />
<frame src="tampilkan.html" nama="tampilkan" />
</bingkai>
</html>
Anda dapat menambahkan pernyataan seperti ini di samping produk yang ditampilkan di show.html:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">Tambahkan ke troli</a>
Diantaranya, link mewakili kerangka navigasi. Array arrOrders didefinisikan di halaman link.html untuk menyimpan id produk. Fungsi addToOrders() digunakan untuk merespons peristiwa klik tautan [Pembelian] di sebelah product. Parameter id yang diterimanya mewakili id produk. Contohnya adalah produk dengan ID 32068:
Copy kode kodenya sebagai berikut:
<skrip bahasa="JavaScript" type="teks/javascript">
<!--
var arrOrders=Array baru();
fungsi addToOrders(id){
arrOrders.push(id);
}
//-->
</skrip>
Dengan cara ini, Anda dapat menggunakan arrOrders di halaman checkout atau halaman penelusuran keranjang belanja untuk menyiapkan semua produk untuk dibeli.
Kerangka kerja ini dapat membagi halaman menjadi beberapa modul dengan fungsi independen. Setiap modul tidak bergantung satu sama lain, namun dapat dihubungkan melalui referensi objek jendela.