How to get the status of child page in parent page in javascript

In web development, a commonly used scenario is that a parent page opens a child page. When the child page is closed, some operations need to be performed, such as refreshing the parent page, etc. When using JavaScript to write web applications, we need to know how to obtain the status of the child page in the parent page so that we can make corresponding operations.

In JavaScript, you can use the window object to open and close pages. When we open a new page, we can use the window.open() method. This method accepts three parameters. The first parameter is the address of the page to be opened, the second parameter is the name of the window, and the third parameter is the characteristics of the window.

For example, the following code opens a new window and sets the window name to "myWindow":

var myWindow = window.open("http://www.example.com", "myWindow", "width=500,height=500");

When we want to get whether the subpage is closed, we can use the subpage's window object. In a subpage, you can use the window.onunload event to detect whether the page has been closed. When the page is closed, a message can be sent to the parent page.

The following is an example of JavaScript code for a child page:

window.onunload = function() {
    window.opener.postMessage("childClosed", "*");
}

In this example, when the child page is closed, it sends a message named "childClosed" to the parent page. The parameter of the message is a string, which can be anything. The second parameter is a source parameter that specifies the sender of the message.

In the parent page, you can add an event listener to receive messages from the child page. When a message is received, appropriate actions can be performed. Here is a sample code:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
    if (event.data === "childClosed") {
        // 子页面已关闭，执行相应操作
    }
}

In this code, when a message is received, a function called receiveMessage is called. In this function, check whether the message is a "childClosed" string, and if so, perform the appropriate operation.

In general, to use JavaScript in the parent page to get whether the child page is closed, we need to add an event listener in the child page to send the message, and then add an event listener in the parent page to receive it. message and perform appropriate actions.

The above is the detailed content of How to get the status of child page in parent page in javascript. For more information, please follow other related articles on the PHP Chinese website!