Rumah > Artikel > hujung hadapan web > 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:
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.
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.
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 display
harta 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!