In this article I will explain with an example, how to open popups using JavaScript and exchange data between popup and parent page.
This article will cover: How to:-
1.Open Popup window.
2. Call JavaScript function of the popup from the Parent page.
3. Access element of the popup from the Parent page.
4. Refresh the popup from the Parent page.
5. Call JavaScript function of the Parent page from the popup.
6. Access element of the popup from the Parent page.
7. Refresh the popup from the Parent page.
 
 
JavaScript function to open a popup window
The JavaScript window.openfunction is used to open a popup window. The window.openfunction returns the object of the opened Popup window.
Syntax
window.open(URL);
 
Parameters
URL – URL of the page to be opened.
 
Optional Parameters
ID - Id of the Popup Window.
toolbar - Enable/Disable toolbar of the Browser values. Accepted values (1/0, yes/no).
scrollbar - Enable/Disable scrollbar of the Browser values. Accepted values (1/0, yes/no).
location -  Enable/Disable location field  of the Browser values. Accepted values (1/0, yes/no).
menubar -  Enable/Disable menubar of the Browser values. Accepted values (1/0, yes/no).
resizable -  Enable/Disable resizing of the Browser values. Accepted values (1/0, yes/no).
statusbar -  Enable/Disable statusbar of the Browser values. Accepted values (1/0, yes/no).
width - Width of the Browser in Pixels.
height - Height of the Browser in Pixels.
top - Position of the Browser on Y Axis in Pixels.
left - Position of the Browser on X Axis in Pixels.
 
 
Open Popup window on Button click using JavaScript
HTML Markup
The following HTML Markup consists of a Button which has been assigned with an OnClick event handler.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <input id="btnOpenPopup" type="button" value="Open Popup" onclick="OpenPopup('Popup.htm')"/>
    <script type="text/javascript">
        function OpenPopup(url) {
            var popupObject = window.open(url);
            popupObject.focus();
        }
    </script>
</body>
</html>
 
Explanation
When the Button is clicked, the OpenPopup JavaScript function is called which opens a popup window using the window.open function and then sets focus to the popup window.
 
 
Exchanging data between parent page and child popup window using JavaScript
Parent Page
The HTML Markup  consists of an HTML TextBox and four HTML Buttons assigned with OnClick event handler.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1">
        <div>
            <input id="txtParent" type="text"/>
            <input id="btnOpenPopup" type="button" value="Open Popup" onclick="OpenPopup('Popup.htm')"/><br/>
            <input id="btnCallChildFunction" type="button" value="Call Child Function" onclick="CallChildFunction()"/><br/>
            <input id="btnGetChildControl" type="button" value="Get Child Control" onclick="GetChildControl()"/><br/>
            <input id="btnRefreshChild" type="button" value="Refresh Child" onclick="RefreshChild()"/><br/>
        </div>
    </form>
    <script type="text/javascript">
        var popupObject;
        function OpenPopup(url) {
            popupObject = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no" +
                ",statusbar=no,menubar=no,resizable=0,width=500,height=300,left=800,top=500");
            popupObject.focus();
        }
 
        function CallChildFunction() {
            if (popupObject != null && !popupObject.closed) {
                var val = popupObject.ChildFunction();
                alert(val);
            }
        }
 
        function ParentFunction() {
            return document.getElementById("txtParent").value;
        }
 
        function GetChildControl() {
            if (popupObject != null && !popupObject.closed) {
                var form1 = popupObject.document.getElementsByTagName("form")[0];
                alert(form1.txtChild.value);
            }
        }
 
        function RefreshChild() {
            if (popupObject != null && !popupObject.closed) {
                popupObject.location.reload();
            }
        }
    </script>
</body>
</html>
 
Explanation
Opening the popup
When the Open Popup Button is clicked, the OpenPopup JavaScript function gets called which opens the popup window using the window.open function.
 
Calling JavaScript function of the popup from the Parent page
When the Call Child Function Button is clicked, the popup is referenced and the ChildFunction JavaScript function is called inside the Parent page.
This function returns the value of the TextBox inside the popup.
Finally, the fetched value is displayed using JavaScript Alert Message Box.
 
Access element of the popup from the Parent page
When the Get Child Control Button is clicked, the popup is referenced and then its TextBox element is referenced and its value is fetched.
Finally, the fetched value is displayed using JavaScript Alert Message Box.
 
Refreshing the popup from the Parent page
When the Refresh Child Button is clicked, the popup is referenced and it is refreshed using the location.reload JavaScript function.
 
Popup Page
The HTML Markup  consists of an HTML TextBox and three HTML Buttons assigned with OnClick event handler.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1">
        <div>
            <input id="txtChild" type="text"/><br/>
            <input id="btnCallParentFunction" type="button" value="Call Parent Function" onclick="CallParentFunction()"/><br/>
            <input id="btnGetParentControl" type="button" value="Get Parent Control" onclick="GetParentControl()"/><br/>
            <input id="btnRefreshParent" type="button" value="Refresh Parent" onclick="RefreshParent()"/><br/>
        </div>
    </form>
    <script type="text/javascript">
        function ChildFunction() {
            return document.getElementById("txtChild").value;
        }
 
        function CallParentFunction() {
            if (window.opener != null && !window.opener.closed) {
                var val = window.opener.ParentFunction();
                alert(val);
            }
        }
 
        function GetParentControl() {
            if (window.opener != null && !window.opener.closed) {
                var form1 = window.opener.document.getElementsByTagName("form")[0]
                alert(form1.txtParent.value);
            }
        }
 
        function RefreshParent() {
            if (window.opener != null && !window.opener.closed) {
                window.opener.location.reload();
            }
        }
    </script>
</body>
</html>
 
Explanation
Calling JavaScript function of the Parent page from the popup
When the Call Parent Function Button is clicked, the Parent page is referenced using the window.opener JavaScript property and the ParentFunction JavaScript function is called inside the popup.
This function returns the value of the TextBox inside the Parent page.
Finally, the fetched value is displayed using JavaScript Alert Message Box.
 
Access element of the Parent page from popup
When the Get Parent Control Button is clicked, the Parent page is referenced using the window.opener JavaScript property and then its TextBox element is referenced and its value is fetched.
Finally, the fetched value is displayed using JavaScript Alert Message Box.
 
Refreshing the popup from the Parent page
When the Refresh Parent Button is clicked, the Parent page is referenced using the window.opener JavaScript property and then it is refreshed using the location.reload JavaScript function.
 
 
Screenshot
Open Popups and exchange data between parent page and Popup using 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
 
 
Downloads