In this article I will explain with an example, how to open popups and exchange data between popup and parent page using
JavaScript.
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.
Exchanging data between parent page and child popup window using JavaScript
Parent Page
The HTML Markup consists of:
TextBox – For capturing text.
Buttons – For calling different
JavaScript functions i.e.
OpenPopup,
CallChildFunction,
GetChildControl and
RefreshChild.
The Buttons have been assigned with a
JavaScript onclick function.
<!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=100,height=100,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
Calling JavaScript function of the popup from the Parent page
When the
Call Child Function Button is clicked, the Popup page is referenced and the
JavaScript ChildFunction function of Popup page is called inside the Parent page.
This function returns the value of the Popup page TextBox.
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 page is referenced and then its TextBox 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 page is referenced is referenced and it is refreshed using the
JavaScript location.reload function.
Popup Page
The HTML Markup consists of:
TextBox – For capturing text.
Buttons – For calling different
JavaScript functions i.e.
ChildFunction,
CallParentFunction,
GetParentControl and
RefreshParent.
The Buttons have been assigned with a
JavaScript onclick function.
<!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
JavaScript window.opener property and the
JavaScript ParentFunction function is called inside the Parent page.
This function returns the value of the Parent page TextBox.
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
JavaScript window.opener property and then its TextBox 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
JavaScript window.opener property and then it is refreshed using the
JavaScript location.reload function.
Screenshot
![Open Popups and exchange data between parent page and Popup using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
