In this article I will explain with an example, how to access child popup window elements from parent page window in JavaScript.
 
 
Popup Child Window Page
The Popup Child Window Page consists of two HTML Span elements. These Span elements will display the FirstName and LastName values passed from the Parent page.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            First Name:&nbsp;
        </td>
        <td>
            <span id="lblFirstName"></span>
        </td>
    </tr>
    <tr>
        <td>
            Last Name:&nbsp;
        </td>
        <td>
            <span id="lblLastName"></span>
        </td>
    </tr>
</table>
 
 
Parent Page
The Parent page consists of two TextBoxes and two Buttons. When the Open Popup button clicked, it opens Child page as Popup window using OpenPopup JavaScript function.
Once the Child page is opened as Popup window, the Send button has to be clicked, which makes a call to the SendToPopup JavaScript function.
Inside the SendToPopup JavaScript function, first a check is performed whether the Child page Popup is open or closed and if the popup is open, its HTML Span elements are accessed and the values of the FirstName and LastName TextBoxes are set into the respective HTML Span elements.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            First Name:&nbsp;
        </td>
        <td>
            <input type="text" id="txtFirstName" value="" />
        </td>
    </tr>
    <tr>
        <td>
            Last Name:&nbsp;
        </td>
        <td>
            <input type="text" id="txtLastName" value="" />
        </td>
    </tr>
    <tr>
        <td>
        <input type="button" value="Open Popup" onclick="OpenPopup()" />
        </td>
        <td>
            <input type="button" value="Send" onclick="SendToPopup()" />
        </td>
    </tr>
</table>
<script type="text/javascript">
    var popup;
    function OpenPopup() {
        popup = window.open("Popup.htm", "Popup", "width=300,height=100");
    };
    function SendToPopup() {
        if (popup != null && !popup.closed) {
            var lblFirstName = popup.document.getElementById("lblFirstName");
            var lblLastName = popup.document.getElementById("lblLastName");
            lblFirstName.innerHTML = document.getElementById("txtFirstName").value;
            lblLastName.innerHTML = document.getElementById("txtLastName").value;
            popup.focus();
        } else {
            alert("Popup has been closed.");
        }
    }
</script>
 
 
Screenshot
Accessing Child window elements from Parent window in JavaScript
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads

Download Code