Analisis ringkas beberapa cara untuk mendapatkan elemen atau data halaman induk menggunakan jquery

jQuery ialah perpustakaan JavaScript yang biasa digunakan kerana ia memudahkan pembangunan banyak tugas seperti traversal dokumen HTML dan pengendalian acara.

Dalam sesetengah kes, JavaScript perlu berkomunikasi dengan iframe atau halaman induk, dan dalam kes ini adalah perlu untuk mendapatkan elemen atau data dalam halaman induk. Berikut ialah beberapa kaedah untuk mendapatkan elemen atau data halaman induk.

1. objek induk

Halaman induk boleh menggunakan objek induk untuk mengakses halaman semasa dan halaman anak juga boleh mengakses halaman induk melalui window.parent. Gunakan induk untuk mendapatkan semua elemen dan atribut halaman induk. Dengan mengandaikan terdapat halaman induk yang mengandungi elemen iframe bernama myIframe, halaman anak boleh menggunakan kod berikut untuk mendapatkan semua teg h1 dalam halaman induk:

var h1s = parent.$("h1");

2. objek window.top

objek atas juga boleh digunakan untuk mengakses halaman induk. Ia menyediakan akses kepada keseluruhan hierarki halaman, di mana keseluruhan tetingkap boleh diakses. Anda boleh menggunakan bahagian atas untuk mengakses elemen dan atribut dalam halaman induk.

Berbanding dengan induk, kelebihan utama menggunakan atas ialah merentas domain. Jika halaman induk dan halaman anak mempunyai nama domain yang berbeza, gunakan bahagian atas untuk memintas sekatan keselamatan merentas domain.

var h1s = window.top.$("h1");

3. Menggunakan kaedah postMessage

postMessage ialah kaedah baharu yang diperkenalkan oleh HTML5, yang digunakan untuk menghantar mesej dengan selamat antara dua tetingkap. Apabila menggunakan kaedah postMessage, halaman anak boleh menghantar mesej ke halaman induk dan halaman induk boleh mendengar mesej ini.

Kod sub halaman:

window.parent.postMessage("Hello from iframe!", "*");

Dalam halaman induk, anda boleh mendengar mesej dan mendapatkan elemen atau data dalam halaman induk seperti yang diperlukan:

window.addEventListener("message", function(event) {
  if (event.source != window.parent) return;

  // 获取消息的内容
  var data = event.data;

  // 在父页面中查找h1元素
  var h1s = $('h1', event.source.document);
}, false);

4. Gunakan sifat window.opener (tetingkap timbul sahaja)

Jika subhalaman dibuka dalam tetingkap pop timbul, anda boleh menggunakan sifat window.opener untuk mengakses objek membuka tetingkap induk.

var h1s = window.opener.$("h1");

Ringkasnya, tidak kira kaedah yang digunakan, kebenaran merentas domain diperlukan untuk mendapatkan elemen atau data halaman induk. Apabila menggunakan fungsi merentas domain, pastikan anda melaksanakan keselamatan dan ikut amalan terbaik.

Atas ialah kandungan terperinci Analisis ringkas beberapa cara untuk mendapatkan elemen atau data halaman induk menggunakan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!