Articles → JAVASCRIPT → Window.Opener In Javascript

Window.Opener In Javascript

In this article, we will discuss Window.Opener in JavaScript.

Purpose

The Window.Opener returns the object of the parent window inside the child window.

Example

In this example, we will create 2 HTML files i.e.,

ParentPage.html
ChildPage.html

Let us discuss each page.

Parentpage.Html

On this page, we have a textbox and a button control. With the click of the button, we will open ChildPage.html in a new window.

<html>
<head>
    <title>DOM example</title>
    </head>
<body>
    <form name="frmDefault">
        <input type="text" name="txtName" id="txtName" />
        <button value="Click" onclick="return TestOpener()">Click</button>
        
    </form>

<script>
    function TestOpener() {

        window.open("ChildPage.html");
        return false;
    }
</script>
</body>
</html>

Try It

Childpage.Html

On this page, we will write the object of the textbox of the parent page in the browser console.

<html>
<body>
    <form></form>
</body>

</html>
<script>
    console.log(window.opener.document.getElementById("txtName"));  

</script>

Output

On page load, you will get the following page: -

Picture showing the parent page with a textbox and a button

With the click of the button, a new page will open in the new window.

Picture showing the outer HTML of the textbox of parent page

Posted By -	Karan Gupta

Posted On -	Friday, August 12, 2022

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**