Rumah > Artikel > hujung hadapan web > jquery melaksanakan kaedah halaman induk
jquery melaksanakan kaedah halaman induk
- WBOYasal
- 2023-05-28 13:37:111047semak imbas
Apabila membangunkan aplikasi web, selalunya terdapat situasi di mana anda perlu melaksanakan kaedah dalam halaman induk dari satu halaman. jQuery ialah perpustakaan JavaScript yang berkuasa yang membantu kami mencapai matlamat ini dengan mudah.
Dalam artikel ini, kami akan memperkenalkan cara melaksanakan kaedah halaman induk menggunakan jQuery. Di bawah, kami akan menerangkannya secara terperinci dalam bahagian berikut:
- Kaedah yang ditakrifkan dalam halaman induk
- Halaman anak mendapat rujukan halaman induk
- Anak halaman memanggil kaedah halaman induk
- Kaedah lain untuk melaksanakan kaedah halaman induk
- Kaedah yang ditentukan dalam halaman induk
Dalam skrip JavaScript dalam halaman induk, kita boleh menentukan beberapa kaedah untuk jangkakan dalam panggilan halaman kanak-kanak. Kaedah ini boleh berupa sebarang jenis kaedah, seperti memproses beberapa logik perniagaan atau mengemas kini beberapa elemen halaman web, dsb. Di sini, kami memberikan contoh mudah:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function displayMessage(){
alert("Hello from parent page!");
}
</script>
</head>
<body>
<a href="child.html" target="_blank">Open Child Page</a>
</body>
</html>Dalam contoh ini, kami mentakrifkan kaedah bernama "displayMessage()", yang digunakan untuk muncul kotak dialog dan memaparkan Mesej ringkas. Kami akan memanggil kaedah ini dalam halaman kanak-kanak.
- Halaman anak mendapat rujukan halaman induk
Pertama, kita perlu mendapatkan rujukan halaman induk dalam halaman anak. Kita boleh melakukannya dengan menggunakan sifat window.parent:
$(document).ready(function(){
var parentWindow = window.parent;
});Dalam contoh ini, kami menggunakan kaedah document.ready() jQuery. Kaedah ini menunggu sehingga keseluruhan halaman dimuatkan sebelum melaksanakan. Kami menyimpan rujukan halaman induk yang diperoleh dalam parentWindow yang berubah-ubah.
- Halaman anak memanggil kaedah halaman induk
Selepas mendapatkan rujukan ke halaman induk, kita boleh memanggil kaedah yang ditakrifkan dalam halaman induk:
$(document).ready(function(){
var parentWindow = window.parent;
parentWindow.displayMessage();
});Dalam contoh ini, kami memanggil kaedah displayMessage() dalam halaman induk. Kami mendapat rujukan kepada halaman induk dengan mengakses window.parent property yang diserahkan kepada tetingkap induk. Kami kemudian menggunakan rujukan ini untuk memanggil kaedah dalam halaman induk.
- Cara lain untuk melaksanakan kaedah halaman induk
Terdapat juga cara untuk melaksanakan kaedah dalam halaman induk, kita boleh menggunakan sifat window.opener dalam halaman anak, yang mengembalikan kaedah membuka tetingkap semasa A rujukan kepada tetingkap. Jika tetingkap induk tetingkap tidak dibuka, sifat ini mengembalikan nol. Berikut ialah contoh:
Dalam halaman induk:
<html>
<head>
<title>Parent Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function displayMessage(){
alert("Hello from parent page!")
}
</script>
</head>
<body>
<button onclick="window.open('child.html','_blank')">Open Child Page</button>
</body>
</html>Dalam halaman anak:
$(document).ready(function(){
var parentWindow = window.opener;
parentWindow.displayMessage();
});Dalam contoh ini, kami menggunakan kaedah window.open( ) membuka subhalaman bernama child.html. Apabila pengguna mengklik butang pada halaman induk, halaman anak dibuka dan kod dalam halaman anak dipanggil serta-merta.
Dalam halaman anak, kami menggunakan sifat window.opener untuk mendapatkan rujukan kepada tetingkap induk. Melalui rujukan ini kita boleh mengakses sebarang kaedah atau harta pada halaman induk. Dalam contoh ini, kami memanggil kaedah displayMessage() pada halaman induk melalui rujukan halaman induk.
Ringkasan
Apabila membangunkan aplikasi web, kita selalunya perlu memanggil kaedah dalam halaman induk daripada halaman anak. Dengan menggunakan jQuery, kita boleh mencapai matlamat ini dengan mudah. Dalam artikel ini, kami telah memperkenalkan dua kaedah di mana kami boleh memanggil kaedah dengan mudah daripada halaman induk dalam halaman anak.
Atas ialah kandungan terperinci jquery melaksanakan kaedah halaman induk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!