Analisis ringkas kaedah pengendalian tetingkap kanak-kanak dan tetingkap induk dalam jQuery

Dengan pembangunan Internet, halaman web semakin memberi perhatian kepada pengalaman pengguna, dan jQuery, sebagai perpustakaan JavaScript yang sangat baik, membawa kemudahan yang hebat kepada pembangunan bahagian hadapan. Dalam halaman web, interaksi antara tetingkap anak dan tetingkap induk sering digunakan Mari perkenalkan kaedah tetingkap anak dan tetingkap induk jQuery.

1. Operasi sub-tetingkap

1 Buka sub-tetingkap

Apabila membuka sub-tetingkap, kami biasanya menggunakan window.open(), yang boleh lulus. empat parameter , masing-masing:

window.open(URL,name,features,replace);

Antaranya, URL ialah alamat sub-tingkap nama ialah nama sub-tetingkap, yang boleh ditentukan apabila membuka tetingkap baharu; parameter rentetan pilihan, menentukan sifat tetingkap , seperti saiz, kedudukan tetingkap, sama ada terdapat bar alat, dsb. ganti menentukan sama ada untuk menambah URL pada sejarah.

Kod contoh:

window.open("child.html","childWindow","height=200,width=200");

2. Tutup tetingkap kanak-kanak

Dalam tetingkap kanak-kanak, kita boleh menggunakan kaedah window.close() untuk menutup tetingkap semasa .

Kod contoh:

<button onclick="window.close()">关闭当前窗口</button>

3. Panggil kaedah tetingkap induk dalam tetingkap anak

Dalam tetingkap anak, kita boleh mendapatkan maklumat tetingkap induk melalui tetingkap. objek pembuka dan memanggil kaedahnya.

Kod contoh:

Tetingkap ibu bapa:

function showMessage(message){
    alert(message);
}

Tetingkap anak:

window.opener.showMessage("Hello,world!");

2 1. Dapatkan objek tetingkap kanak-kanak

Dalam tetingkap induk, kita boleh mendapatkan objek tetingkap anak yang dibuka melalui objek tetingkap yang dikembalikan oleh kaedah window.open().

Kod contoh:

2 Panggil kaedah tetingkap anak dalam tetingkap induk

var childWindow = window.open("child.html","childWindow","height=200,width=200");

Dalam tetingkap induk, kita boleh memanggil kaedah dalam tetingkap anak yang. telah dibuka.

Kod contoh:

Tetingkap ibu bapa:

Tetingkap anak:

function changeColor(color){
    childWindow.document.body.style.backgroundColor = color;
}

3. Dapatkan data tetingkap anak dalam tetingkap induk

<button onclick="window.opener.changeColor(&#39;red&#39;)">变红色</button>

Dalam tetingkap induk, kita boleh mendapatkan data tetingkap anak melalui objek tetingkap tetingkap anak.

Kod contoh:

Tetingkap ibu bapa:

Tetingkap kanak-kanak:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

setTimeout(function(){
    var childData = childWindow.document.getElementById("data").innerHTML;
    alert(childData);
},2000);

Ringkasan:

<div id="data">子窗口数据</div>

Melalui perkara di atas pengenalan , kita dapat melihat bahawa kaedah tetingkap anak dan tetingkap induk jQuery adalah sangat mudah, tetapi mereka menyedari interaksi antara tetingkap anak dan tetingkap induk dalam halaman web, memberikan lebih banyak kemungkinan untuk pengalaman pengguna. Dalam projek sebenar, jika interaksi antara tetingkap anak dan tetingkap induk diperlukan, pembangun boleh menggunakan kaedah di atas untuk mencapainya.

Atas ialah kandungan terperinci Analisis ringkas kaedah pengendalian tetingkap kanak-kanak dan tetingkap induk dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!