jquery menukar bingkai

Dengan pembangunan pembangunan bahagian hadapan, jQuery telah menjadi teknologi penting untuk majoriti pembangun bahagian hadapan. Antaranya, teknologi menukar bingkai melalui jQuery semakin meluas digunakan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menukar bingkai.

1. Apakah itu bingkai

Dalam pembangunan Web, bingkai merujuk kepada bingkai, juga dipanggil borang. Ia ialah teknologi HTML yang membahagikan halaman kepada berbilang paparan, membolehkan pembangun memaparkan berbilang dokumen HTML bebas pada halaman yang sama pada masa yang sama. Bingkai boleh dibahagikan kepada dua jenis, satu set rangka mendatar dan satu set rangka menegak. Seperti yang ditunjukkan dalam rajah di bawah:

2 Cara jQuery menukar bingkai

Terdapat dua cara untuk menukar bingkai melalui jQuery:

1 .Kendalikan bingkai kanak-kanak melalui JS halaman induk

Dapatkan objek bingkai kanak-kanak melalui JS pada halaman induk, dan kemudian gunakan ID atau nama bingkai kanak-kanak untuk beroperasi untuk mengubah suai semua kandungan bingkai kanak-kanak itu. Antaranya, kaedah mendapatkan subframe adalah seperti berikut:

var frameObj = $(frames["frameName"]);

Antaranya, frame adalah objek global, yang mengandungi koleksi semua bingkai dalam dokumen Bingkai yang diperlukan boleh diperolehi dengan menambah nama atau id bingkai dalam kurungan segi empat sama.

Kemudian gunakan objek frameObj untuk mengendalikan kandungan bingkai. Kod contoh berikut:

var frameObj = $(frames["frameName"]);
// 更改frame的src为http://www.example.com
frameObj.attr("src", "http://www.example.com");
// 获取frame的内容
console.log(frameObj.contents().find('.className').html());

2 Kendalikan halaman induk melalui JS bingkai kanak-kanak

Gunakan JS dalam bingkai kanak-kanak untuk mendapatkan objek halaman induk, dan kemudian kendalikannya. melalui ID atau nama halaman induk . Antaranya, kaedah mendapatkan halaman induk adalah seperti berikut:

var parentObj = $(window.parent.document);

Antaranya, objek tetingkap induk diperoleh melalui window.parent, dan kemudian objek Dokumen tetingkap diperoleh melalui dokumen.

Kemudian gunakan objek parentObj untuk mengendalikan kandungan halaman induk. Contoh kod berikut:

var parentObj = $(window.parent.document);
// 更改父页面的title
parentObj.find('title').html('新的标题');
// 获取父页面的内容
console.log(parentObj.find('.className').html());

3. Senario penggunaan jQuery menukar bingkai

1. Apabila terdapat berbilang bingkai dalam halaman, ubah suai kandungan dalam bingkai secara dinamik untuk mencapai kesan mengemas kini halaman tanpa menyegarkan .
2. Halaman induk mengawal kandungan halaman anak melalui interaksi dengan bingkai anak, seperti menukar warna dan saiz elemen dalam halaman anak dalam halaman induk.
3. Halaman anak menyerahkan borang atau mendapatkan data halaman induk melalui interaksi dengan halaman induk, merealisasikan pemindahan dan perkongsian data.

4 Perkara yang perlu diberi perhatian

1. Disebabkan permintaan merentas domain, secara lalai, bingkai tidak boleh mengakses dan mengubah suai satu sama lain. Walau bagaimanapun, komunikasi merentas domain boleh dicapai dengan menetapkan atribut kotak pasir bingkai dan atribut benarkan asal yang sama bagi halaman induk.
2. bingkai perlu menggunakan nama domain, nombor port dan protokol yang sama untuk mengakses dan mengubah suai satu sama lain.
3. Untuk mengakses bingkai dalam jQuery, anda mesti menunggu DOM dimuatkan dahulu dan menggunakannya dalam window.onload.

5 Ringkasan

Artikel ini memperkenalkan cara menukar bingkai melalui jQuery, dan memperincikan senario dan langkah berjaga-jaganya. Pemahaman yang menyeluruh tentang pengetahuan ini membolehkan kami melaksanakan pembangunan bahagian hadapan dengan lebih baik dan melaksanakan lebih banyak fungsi.

Atas ialah kandungan terperinci jquery menukar bingkai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!