Bagaimana untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk dalam javascript

Sebagai bahasa pengaturcaraan untuk pembangunan web, Javascript digunakan secara meluas dalam interaksi halaman web, kesan dinamik, pengesahan borang, dsb. Dalam pembangunan dan reka bentuk halaman web, kadangkala kami menghadapi keperluan untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk. Keperluan ini tidak biasa digunakan dalam pembangunan sebenar, tetapi ia sangat berguna untuk beberapa senario tertentu. Artikel ini akan memperkenalkan cara menggunakan Javascript untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk dan menyediakan analisis terperinci bagi beberapa senario aplikasi biasa.

1. Kaedah untuk menentukan sama ada tetingkap induk wujud

Javascript menyediakan banyak fungsi terbina dalam untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk Kaedah yang paling biasa ialah menggunakan window.parent atribut. Dengan mengakses atribut window.parent, kita boleh mendapatkan objek tetingkap induk bagi tetingkap semasa. Untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk, kita hanya perlu menentukan sama ada window.parent sama dengan window Jika sama, ini bermakna tetingkap semasa tidak mempunyai tetingkap induk.

Berikut ialah contoh kod:

if (window.parent === window) {
  console.log('当前窗口不存在父窗口');
} else {
  console.log('当前窗口存在父窗口');
}

Kod di atas menentukan sama ada tetingkap semasa mempunyai tetingkap induk dengan membandingkan sama ada rujukan objek window.parent dan window adalah sama rata. Jika ia sama, ini bermakna tetingkap semasa tidak mempunyai tetingkap induk, jika tidak, tetingkap semasa mempunyai tetingkap induk.

Selain menggunakan atribut window.parent, kami juga boleh menggunakan beberapa kaedah lain untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk, seperti atribut window.top, atribut window.self, dsb. Berikut ialah kaedah penghakiman lain:

if (window.top === window.self) {
  console.log('当前窗口不存在父窗口');
} else {
  console.log('当前窗口存在父窗口');
}

Kod di atas menentukan sama ada tetingkap semasa mempunyai tetingkap induk dengan membandingkan rujukan objek window.top dan window.self. Jika ia adalah sama, ini bermakna tetingkap semasa tidak mempunyai tetingkap induk, sebaliknya ia bermakna tetingkap semasa mempunyai tetingkap induk.

2. Analisis senario dan contoh aplikasi

Dalam pembangunan sebenar, terdapat sedikit senario untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk, tetapi dalam beberapa senario tertentu, keperluan ini masih sangat berguna. Di bawah ini kami menganalisis beberapa senario aplikasi biasa:

1. Halang halaman daripada dibenamkan

Sesetengah tapak web (seperti bank, platform pembayaran, dll.) memerlukan lompat apabila iframe sedang dimasukkan ke dalam halaman web luaran Pergi ke halaman luaran untuk menghalang tapak web berniat jahat daripada memalsukan tapak ke dalam halaman log masuk dan melakukan penipuan pancingan data. Keperluan ini boleh dicapai dengan mudah dengan menentukan sama ada tetingkap semasa mempunyai tetingkap induk. Apabila halaman dibenamkan dalam iframe tapak web lain, anda boleh melompat ke halaman luaran dengan menilai window.parent === window.

Berikut ialah contoh kod:

if (window.parent !== window) {
  window.top.location.href = 'http://www.example.com';
}

Kod di atas menentukan sama ada tetingkap semasa dibenamkan dalam iframe tapak web lain dengan menentukan sama ada window.parent dan window adalah sama . Jika ia adalah sama, maka Menunjukkan bahawa tetingkap semasa tidak mempunyai tetingkap induk, jika tidak, ia akan melompat ke halaman luaran.

2. Dapatkan pembolehubah halaman utama

Dalam sesetengah tapak web, kadangkala anda perlu mendapatkan pembolehubah halaman utama dalam sub-halaman Pada masa ini, anda boleh menilai sama ada tetingkap semasa wujud tetingkap Induk untuk dicapai. Jika halaman semasa mempunyai tetingkap induk, anda boleh menggunakan window.parent untuk mengakses pembolehubah dalam tetingkap induk atau memanggil fungsi dalam tetingkap induk.

Berikut ialah contoh kod:

Kod halaman induk:

var username = 'admin';

function logout() {
  console.log('logout');
}

Kod halaman kanak-kanak:

if (window.parent !== window) {
  var parentUsername = window.parent.username;
  console.log('parent username:', parentUsername);

  window.parent.logout();
}

Kod di atas melepasi pertimbanganwindow.parent dan window adalah sama untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk Jika wujud, anda boleh menggunakan window.parent untuk mendapatkan pembolehubah dalam tetingkap induk atau memanggil fungsi dalam tetingkap induk.

3. Sembunyikan iframe

Dalam sesetengah tapak web, kadangkala perlu untuk menyembunyikan beberapa elemen yang mengandungi iframe Ini boleh dicapai dengan menentukan sama ada tetingkap semasa mempunyai tetingkap induk. Jika halaman semasa mempunyai tetingkap induk, anda boleh menyembunyikan elemen yang mengandungi iframe melalui atribut display.

Berikut ialah contoh kod:

if (window.parent !== window) {
  document.getElementById('iframe-wrapper').style.display = 'none';
}

Kod di atas menentukan sama ada tetingkap semasa mempunyai tetingkap induk dengan menilai sama ada window.parent dan window adalah sama , ia boleh diluluskan displayharta benda untuk menyembunyikan elemen yang mengandungi iframe.

Ringkasan:

Dalam proses pembangunan web, tidak banyak keperluan untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk, tetapi dalam beberapa senario tertentu, keperluan ini masih sangat praktikal. Dengan menggunakan window.parent, window.top, window.self dan atribut lain yang disediakan oleh Javascript, kami boleh menentukan dengan mudah sama ada tetingkap semasa mempunyai tetingkap induk, dengan itu mencapai keperluan khusus. Untuk senario aplikasi biasa, seperti menghalang halaman daripada dibenamkan, mendapatkan pembolehubah halaman utama, menyembunyikan iframe, dll., kami juga menyediakan kod sampel dan analisis terperinci. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sesuai untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk mengikut keperluan khusus, untuk menyelesaikan kerja pembangunan web dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menentukan sama ada tetingkap semasa mempunyai tetingkap induk dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!