jquery menukar bingkai

Dalam pembangunan bahagian hadapan, iframe ialah teg yang sangat biasa yang membolehkan kami membenamkan halaman lain dalam satu halaman. Walau bagaimanapun, dalam beberapa kes, kami perlu memuatkan kandungan yang berbeza dalam iframe atau melakukan beberapa tindakan tertentu. Dalam kes ini, kita boleh menggunakan jQuery untuk menukar dan memanipulasi kandungan dalam iframe.

1. Dapatkan objek iframe

Untuk menukar atau mengendalikan kandungan dalam iframe, anda perlu mendapatkan objek iframe terlebih dahulu. Anda boleh menggunakan pemilih jQuery untuk mendapatkan objek iframe. Sebagai contoh, katakan kita mempunyai iframe berikut:

We Objeknya boleh diperolehi melalui kod berikut:

var myFrame = $('#myFrame')[0].contentWindow;

Di mana, myFrame ialah objek iframe.

2. Dapatkan elemen dalam iframe

Selepas mendapat objek iframe, kita boleh mencari dan mendapatkan elemen yang perlu ditukar atau dikendalikan. Terdapat dua cara untuk mencapai fungsi ini.

Kaedah pertama adalah untuk mendapatkan objek dokumen dalam iframe melalui atribut contentDocument, dan kemudian anda boleh mencari elemen di dalamnya. Contohnya:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
var element = $(content).find('# myElement ');

Antaranya, myElement ialah ID elemen yang perlu dikendalikan.

Cara lain ialah mencari elemen terus dalam objek iframe. Contohnya:

var myFrame = $('#myFrame')[0].contentWindow;
var element = $(myFrame.document).find('#myElement');

Kedua-dua kaedah boleh mendapatkan elemen dalam iframe, yang mana satu untuk digunakan bergantung pada keperluan khusus.

3. Tukar kandungan dalam iframe

Selepas mendapatkan elemen dalam iframe, kita boleh menukar kandungannya melalui kaedah berkaitan jQuery.

Sebagai contoh, jika kita ingin menukar tajuk dalam iframe, kita boleh melakukan ini:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame .contentDocument;
$(content).find('title').text('New Title');

Antaranya tajuk ialah elemen yang perlu diubah. Kaedah $().text() boleh menukar kandungan teks dalam elemen.

Begitu juga, jika kita ingin menukar imej dalam iframe, kita boleh melakukan ini:

var myFrame = $('#myFrame')[0].contentWindow;
var kandungan = myFrame .contentDocument;
$(content).find('#myImage').attr('src', 'newimage.jpg');

Antaranya, myImage ialah ID bagi imej yang perlu diubah. Kaedah $().attr() boleh menukar nilai atribut sesuatu elemen.

4. Lakukan operasi dalam iframe

Selain menukar kandungan dalam iframe, kami juga boleh melakukan beberapa operasi khas dalam iframe. Sebagai contoh, jika kita ingin mengeluarkan beberapa kandungan dalam iframe, kita boleh melakukan ini:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument ;
$(content).find('body').append('

Some text

');

Antaranya, body ialah elemen yang perlu kandungan ditambah. Kaedah $().append() menambah kandungan baharu pada penghujung elemen.

Selain itu, kami juga boleh menggunakan JavaScript dalam iframe untuk melaksanakan beberapa operasi. Sebagai contoh, jika kita ingin memunculkan kotak dialog dalam iframe, kita boleh melakukan ini:

var myFrame = $('#myFrame')[0].contentWindow;
myFrame.alert( 'Hello, world !');

Antaranya, alert() ialah fungsi terbina dalam JavaScript, digunakan untuk muncul kotak dialog. Di sini, kami memanggilnya terus dalam objek iframe.

Ringkasan

Dengan kaedah di atas, kita boleh memanipulasi dan menukar kandungan dalam iframe dengan mudah. Perlu diingat bahawa apabila menggunakan jQuery untuk mengendalikan iframe, anda mesti memberi perhatian kepada isu merentas domain, jika tidak, anda mungkin menghadapi sekatan CORS (Cross-Origin Resource Sharing). Jika anda perlu mengendalikan iframe merentas domain, anda boleh menggunakan kaedah postMessage untuk mencapai ini.

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