How to determine whether the current window has a parent window in javascript

As a programming language for web development, Javascript is widely used in web page interaction, dynamic effects, form verification, etc. In the development and design of web pages, we sometimes encounter the need to determine whether the current window has a parent window. This requirement is not commonly used in actual development, but it is very useful for some specific scenarios. This article will introduce how to use Javascript to determine whether the current window has a parent window, and provide a detailed analysis of some common application scenarios.

1. Method to determine whether a parent window exists

Javascript provides many built-in functions to determine whether the current window has a parent window. The most common method is to use window.parent Attributes. By accessing the window.parent property, we can get the parent window object of the current window. In order to determine whether the current window has a parent window, we only need to determine whether window.parent is equal to window. If equal, it means that the current window has no parent window.

The following is a sample code:

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

The above code determines whether the current window exists by comparing whether the references of the window.parent and window objects are equal. Parent window. If they are equal, it means that the current window has no parent window, otherwise it means that the current window has a parent window.

In addition to using the window.parent property, we can also use other methods to determine whether the current window has a parent window, such as the window.top property, window.selfProperties, etc. The following is another judgment method:

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

The above code determines whether the current window has a parent window by comparing the references of the window.top and window.self objects. If they are equal, it means that the current window has no parent window, otherwise it means that the current window has a parent window.

2. Application Scenarios and Example Analysis

In actual development, there are relatively few scenarios for determining whether the current window has a parent window, but in some specific scenarios, this requirement is still very useful. . Below we analyze several common application scenarios:

1. Prevent pages from being embedded

Some websites (such as banks, payment platforms, etc.) require jumping when inserting an iframe into an external web page Go to an external page to prevent malicious websites from forging the site into a login page and committing phishing fraud. This requirement can be easily achieved by determining whether the current window has a parent window. When the page is embedded in an iframe of another website, you can jump to the external page by judging window.parent === window.

The following is a sample code:

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

The above code determines whether the current window is embedded in another window by judging whether window.parent and window are equal. In the iframe of the website, if they are equal, it means that the current window has no parent window, otherwise it will jump to an external page.

2. Get the variables of the main page

In some websites, sometimes you need to get the variables of the main page in the sub-page. At this time, you can determine whether the current window exists Parent window to achieve. If the current page has a parent window, you can access variables in the parent window or call functions in the parent window through window.parent.

The following is a sample code:

Parent page code:

var username = 'admin';

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

Child page code:

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

  window.parent.logout();
}

The above code passes the judgmentwindow.parent# Whether ## and window are equal to determine whether the current window has a parent window. If it exists, you can get the variables in the parent window or call the function in the parent window through window.parent .

Hide iframe

display attribute.

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

window.parent and window are equal. If present, the element containing the iframe can be hidden via the display attribute.

window.parent, window.top, window.self and other properties provided by Javascript, we can easily determine whether the current window has a parent window, thus Fulfill specific needs. For common application scenarios, such as preventing pages from being embedded, obtaining variables of the main page, hiding iframes, etc., we also provide detailed sample codes and analysis. In actual development, we can choose the appropriate method to determine whether the current window has a parent window according to specific needs, so as to better complete web page development work.

The above is the detailed content of How to determine whether the current window has a parent window in javascript. For more information, please follow other related articles on the PHP Chinese website!