TechnoZone

Tuesday, May 18, 2010

How to pass values from child window to parent window using Javascript XHTML

Code for passing values from child window to parent window using Javascript and HTML. I am working on a project where I need to access parent page variables from child page without using GET and POST methods. Searched the net and got a technique to complete the work i.e using 'window.opener' properties.

Code for Parent HTML Page

Use window.open to open a new window. The following code opens a new window without toolbars, menubars, etc

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Parent </TITLE>
<META NAME="Generator" CONTENT="Bishwajeet">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT TYPE="text/javascript">
function sendTo()
{
window.open('child_blog.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+'');

}
</SCRIPT>
</HEAD>

<BODY>

<input type="text" value="" name="text1" id="pdetails1">
</br>
<a href="javascript:void(0)" onClick="sendTo()" >Pop Up</a>

</BODY>
</HTML>

Code for Child HTML Page

In the newly opened window, you can access the original window by using window.opener

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Child </TITLE>
<META NAME="Generator" CONTENT="Bishwajeet">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT TYPE="text/javascript">
function sendValue()
{
window.opener.document.getElementById('pdetails1').value=document.getElementById('details1').value;
window.close();

}
</SCRIPT>
</HEAD>

<BODY>
<form name="selectform">
<input name="details1" id="details1" value=""><br/>
<input type=button value="Copy input to parent opener" onClick="sendValue();">
</form>
</BODY>
</HTML>
(Read more inside ..)