Heim  >  Artikel  >  Web-Frontend  >  So ermitteln Sie, ob das aktuelle Fenster ein übergeordnetes Fenster in Javascript hat

So ermitteln Sie, ob das aktuelle Fenster ein übergeordnetes Fenster in Javascript hat

PHPz
PHPzOriginal
2023-04-26 10:29:451832Durchsuche

Javascript wird als Programmiersprache für die Webentwicklung häufig für die Interaktion mit Webseiten, dynamische Effekte, Formularüberprüfung usw. verwendet. Bei der Entwicklung und Gestaltung von Webseiten müssen wir manchmal feststellen, ob das aktuelle Fenster über ein übergeordnetes Fenster verfügt. Diese Anforderung wird in der tatsächlichen Entwicklung nicht häufig verwendet, ist jedoch für einige spezifische Szenarien sehr nützlich. In diesem Artikel wird erläutert, wie Sie mithilfe von Javascript feststellen, ob das aktuelle Fenster über ein übergeordnetes Fenster verfügt, und eine detaillierte Analyse einiger gängiger Anwendungsszenarien bereitstellen.

1. So ermitteln Sie, ob ein übergeordnetes Fenster vorhanden ist

Javascript bietet viele integrierte Funktionen, um festzustellen, ob das aktuelle Fenster ein übergeordnetes Fenster hat. Die häufigste Methode ist die Verwendung von window.parent Attribut. Durch Zugriff auf die Eigenschaft window.parent können wir das übergeordnete Fensterobjekt des aktuellen Fensters abrufen. Um festzustellen, ob das aktuelle Fenster ein übergeordnetes Fenster hat, müssen wir nur feststellen, ob window.parent gleich window ist. Wenn gleich, bedeutet dies, dass das aktuelle Fenster hat kein übergeordnetes Fenster. window.parent属性。通过访问window.parent属性,我们可以获取到当前窗口的父窗口对象。为了判断当前窗口是否存在父窗口,我们只需要判断window.parent是否等于window即可,如果相等则表示当前窗口没有父窗口。

下面是示例代码:

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

以上代码通过比较window.parentwindow对象的引用是否相等来判断当前窗口是否存在父窗口。如果相等,则表示当前窗口没有父窗口,反之表示当前窗口存在父窗口。

除了使用window.parent属性以外,我们还可以使用其他一些方法来判断当前窗口是否存在父窗口,例如window.top属性,window.self属性等。下面是另一种判断方法:

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

以上代码通过比较window.topwindow.self对象的引用来判断当前窗口是否存在父窗口。如果相等,则表示当前窗口没有父窗口,反之表示当前窗口存在父窗口。

二、应用场景与实例分析

在实际开发中,判断当前窗口是否存在父窗口的场景相对比较少,但是在一些特定场景下,这个需求还是非常有用的。下面我们分析几个常见的应用场景:

  1. 防止页面被嵌入

有些网站(如银行、支付平台等)要求在外部网页插入iframe时跳转到外部页面,防止恶意网站把该站点伪造成登录页面,做钓鱼欺诈。而判断当前窗口是否存在父窗口,就可以方便地实现这个需求。当页面被嵌入到其他网站的iframe中时,可以通过判断window.parent === window来跳转到外部页面。

以下是示例代码:

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

以上代码通过判断window.parentwindow是否相等来判断当前窗口是否被嵌入到其他网站的iframe中,如果相等则表示当前窗口没有父窗口,反之则跳转到外部页面。

  1. 获取主页面的变量

在一些网站中,有时需要在子页面中获取主页面的变量,这时候就可以通过判断当前窗口是否存在父窗口来实现。如果当前页面存在父窗口,则可以通过window.parent来访问父窗口中的变量或者调用父窗口中的函数。

以下是示例代码:

父页面代码:

var username = 'admin';

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

子页面代码:

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

  window.parent.logout();
}

以上代码通过判断window.parentwindow是否相等来判断当前窗口是否存在父窗口,如果存在,则可以通过window.parent来获取父窗口中的变量或者调用父窗口中的函数。

  1. 隐藏iframe

在一些网站中,有时需要隐藏一些包含iframe的元素,这时候就可以通过判断当前窗口是否存在父窗口来实现。如果当前页面存在父窗口,则可以通过display属性来隐藏包含iframe的元素。

以下是示例代码:

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

以上代码通过判断window.parentwindow是否相等来判断当前窗口是否存在父窗口,如果存在,则可以通过display属性来隐藏包含iframe的元素。

总结:

在网页开发过程中,判断当前窗口是否存在父窗口的需求不是很多,但是在一些特定场景下,这个需求还是非常实用的。通过使用Javascript提供的window.parentwindow.topwindow.self

Das Folgende ist ein Beispielcode: 🎜rrreee🎜Der obige Code bestimmt, ob das aktuelle Fenster ein übergeordnetes Fenster hat, indem er vergleicht, ob die Referenzen von window.parent und window sind Objekte sind gleich. Wenn sie gleich sind, bedeutet dies, dass das aktuelle Fenster kein übergeordnetes Fenster hat. Andernfalls bedeutet dies, dass das aktuelle Fenster ein übergeordnetes Fenster hat. 🎜🎜Zusätzlich zur Verwendung der Eigenschaft window.parent können wir auch andere Methoden verwenden, um festzustellen, ob das aktuelle Fenster ein übergeordnetes Fenster hat, beispielsweise die Eigenschaft window.top , window .selfEigenschaft usw. Hier ist eine andere Möglichkeit, dies zu bestimmen: 🎜rrreee🎜Der obige Code bestimmt, ob das aktuelle Fenster ein übergeordnetes Fenster hat, indem er die Referenzen der Objekte window.top und window.self vergleicht . Wenn sie gleich sind, bedeutet dies, dass das aktuelle Fenster kein übergeordnetes Fenster hat. Andernfalls bedeutet dies, dass das aktuelle Fenster ein übergeordnetes Fenster hat. 🎜🎜2. Analyse von Anwendungsszenarien und Beispielen🎜🎜In der tatsächlichen Entwicklung gibt es relativ wenige Szenarien, um festzustellen, ob das aktuelle Fenster ein übergeordnetes Fenster hat, aber in einigen spezifischen Szenarien ist diese Anforderung immer noch sehr nützlich. Im Folgenden analysieren wir einige gängige Anwendungsszenarien: 🎜
  1. Einbettung von Seiten verhindern
🎜Einige Websites (z. B. Banken, Zahlungsplattformen usw.) erfordern einen Sprung zu, wenn ein Iframe eingefügt wird in eine externe Webseite Externe Seiten verhindern, dass böswillige Websites die Website in eine Anmeldeseite fälschen und Phishing-Betrug begehen. Diese Anforderung kann leicht erfüllt werden, indem ermittelt wird, ob das aktuelle Fenster über ein übergeordnetes Fenster verfügt. Wenn die Seite in einen Iframe einer anderen Website eingebettet ist, können Sie durch Beurteilung von window.parent === window zur externen Seite springen. 🎜🎜Das Folgende ist ein Beispielcode:🎜rrreee🎜Der obige Code bestimmt, ob das aktuelle Fenster in einen Iframe anderer Websites eingebettet ist, indem er beurteilt, ob window.parent und window sind gleich. Wenn gleich, bedeutet dies, dass das aktuelle Fenster kein übergeordnetes Fenster hat, andernfalls wird auf eine externe Seite gesprungen. 🎜
  1. Variablen der Hauptseite abrufen
🎜Auf manchen Websites ist es manchmal notwendig, die Variablen der Hauptseite auf der Unterseite abzurufen. Zu diesem Zeitpunkt können Sie den aktuellen Stand beurteilen Ob das Fenster ein übergeordnetes Fenster hat oder nicht. Wenn die aktuelle Seite über ein übergeordnetes Fenster verfügt, können Sie über window.parent auf Variablen im übergeordneten Fenster zugreifen oder Funktionen im übergeordneten Fenster aufrufen. 🎜🎜Das Folgende ist der Beispielcode:🎜🎜Code der übergeordneten Seite:🎜rrreee🎜Code der untergeordneten Seite:🎜rrreee🎜Der obige Code wird beurteilt, indem beurteilt wird, ob window.parent und window code> sind gleich Ob das aktuelle Fenster ein übergeordnetes Fenster hat. Wenn es existiert, können Sie <code>window.parent verwenden, um die Variablen im übergeordneten Fenster abzurufen oder die Funktion im übergeordneten Fenster aufzurufen. 🎜
  1. Iframe ausblenden
🎜Auf einigen Websites ist es manchmal notwendig, einige Elemente auszublenden, die Iframe enthalten. In diesem Fall können Sie feststellen, ob das aktuelle Fenster vorhanden ist ein übergeordnetes Fenster durchführen. Wenn die aktuelle Seite über ein übergeordnetes Fenster verfügt, können Sie das Element, das den Iframe enthält, über das Attribut display ausblenden. 🎜🎜Das Folgende ist ein Beispielcode:🎜rrreee🎜Der obige Code bestimmt, ob das aktuelle Fenster ein übergeordnetes Fenster hat, indem er beurteilt, ob window.parent und window gleich sind Wenn es existiert, können Sie das Attribut display übergeben, um das Element auszublenden, das den Iframe enthält. 🎜🎜Zusammenfassung: 🎜🎜Im Prozess der Webentwicklung muss nicht unbedingt festgestellt werden, ob das aktuelle Fenster über ein übergeordnetes Fenster verfügt. In einigen spezifischen Szenarien ist diese Anforderung jedoch immer noch sehr praktisch. Mithilfe der von Javascript bereitgestellten Eigenschaften window.parent, window.top, window.self und anderer Eigenschaften können wir leicht feststellen, ob das aktuelle Fenster angezeigt wird verfügt über ein übergeordnetes Fenster, um bestimmte Anforderungen zu erfüllen. Für gängige Anwendungsszenarien wie das Verhindern der Einbettung von Seiten, das Abrufen von Variablen der Hauptseite, das Ausblenden von Iframes usw. stellen wir außerdem detaillierte Beispielcodes und Analysen bereit. In der tatsächlichen Entwicklung können wir die geeignete Methode auswählen, um entsprechend den spezifischen Anforderungen zu bestimmen, ob das aktuelle Fenster über ein übergeordnetes Fenster verfügt, um die Entwicklungsarbeit für Webseiten besser abzuschließen. 🎜

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob das aktuelle Fenster ein übergeordnetes Fenster in Javascript hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn