Accessing parent window from child window or vice versa in JavaScript – options explored

[Note: I wrote this article few years back, when I got few hours of free time to explore these; thought of putting it here as it has a set of different techniques which is helpful for someone facing this scenario and could be a reference for me, initially written for beginners/intermediates]

This article explains options available to access the data present in a parent window from a child window or vice versa in JavaScript. By telling the word Parent I mean the browser window that opens another browser window, the new window is what I call Child window. At times when you are developing a web application you could face a situation, where there is a need to use JavaScript to access the HTML forms and controls present in a parent window from a popup window(child window) or something similar, this article provides few solutions for accomplishing this. I am considering only Internet Explorer and Firefox for this article, these options may work in other browsers also. I am going to mention the options available in JavaScript that someone can use immediately in their work, instead of analyzing all the options/workarounds available for a specific need.

Options:

 

Using JavaScript’s window.opener object to access the parent window from a child window: (compatible with IE & Firefox)

In JavaScript, the window.opener object can be used to access the HTML elements present in the parent window from child window(popup or similar).

Let us consider two HTML files:

openwindow.htm – this has a text box and a button, clicking the button opens the target.htm file in a new browser window
target.htm – this has code to change the value of the text box present in the parent window(openwindow.htm) that opens this file

openwindow.htm: (parent window)
<html>
<script language="javascript">
function openwindow()
{
window.open("target.htm","_blank","height=200,width=400,
status=yes,toolbar=no,menubar=no,location=no")

}
</script>
<body>
<form name=frm>
<input id=text1 type=text>
<input type=button onclick="javascript:openwindow()" value="Open window..">
</form>
</body>
</html>

If you are not familiar with window.open() method, then you would be wondering what is "height=200, width=400, status=yes, toolbar=no, menubar=no, location=no", don’t worry, it just specifies the size and appearance of the new window, this line of code can be changed to window.open("target.htm","_blank") just see the difference in output if you change.

Note that if the parameter ”_blank” is not provided then the functionality will differ between IE and Firefox, in firefox a new tab will be opened instead of a new window. Just use window.open("target.htm") and see the difference yourself. For more info about window.open() method and its parameters, see http://msdn2.microsoft.com/en-us/library/ms536651(VS.85).aspx. Also note, in <input id=text1 type=text>, the id attribute is necessary, then only the code of target.htm(shown below) will execute in Firefox.

target.htm: (child window)
<html>
<script language="javascript">
function changeparent()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
<body>
<form>
<input type=button onclick="javascript:changeparent()" value="Change opener's textbox's value..">
</form>
</body>
</html>

Hope you can get what is going on in the above code, in the new window(target.htm) we are using the window.opener object to access the text box present in the parent window(openwindow.htm). You just need to prefix “window.opener.” and write the same code that you will write in the parent window’s HTML page to access its elements.

 

Using JavaScript’s window.showModalDialog() to send data to parent window from a child window: (only IE, wont work in Firefox)

If you want to open a modal dialog and access the parent window’s elements in it, then this method can be used, but this will work only in IE. (If you are new to the term modal dialog, see http://en.wikipedia.org/wiki/Modal_window) Here we will be calling the window.showModalDialog() method to open the child window and assign the return value of this method to a JavaScript variable, the return value for the window.showModalDialog() method is provided in the child window by using the window.returnValue property, as shown in the below example.

Here I am going to show two files similar to the example shown for window.opener object.

showmodal.htm – this has a text box and a button, clicking the button opens the modaltarget.htm file in a new browser window
modaltarget.htm – this has code to change the value of the text box present in the parent window(showmodal.htm) that opens this file

showmodal.htm: (parent window)
<html>
<script language="javascript">
function openwindow()
{
retval=window.showModalDialog("modaltarget.htm")
document.getElementById('text1').value=retval

}
</script>
<body>
<form name=frm>
<input name=text1 type=text>
<input type=button onclick="javascript:openwindow()" value="Open window..">
</form>
</body>
</html>

modaltarget.htm: (child window)
<html>
<head>
<script language="javascript">
function changeparent()
{
window.returnValue="Value changed.."
window.close()
}
</script>
</head>
<body>
<form>
<input type=button onclick="javascript:changeparent()" value="Change main window’s textbox value..">
</form>
</body>
</html>

As you can see, in showmodal.htm, the retval variable is assigned with the result of the window.showModalDialog() method call, and in the next line the text box’s value is set, but this line of code will execute when the modal window gets closed, in all modal window calls the next line executes only after the modal dialog closes, this is the reason I close the window after I set the returnValue in modaltarget.htm. If you remove the window.close(), then the second line in changeparent() function will not execute until you manually close the window. The showModalDialog() is not a w3c standard and it is also not supported by Firefox.

There is a method called showModelessDialog() if you are interested in displaying a modeless dialog you can use this. As my aim is to provide basic options and quick solutions to readers; and as this modeless functionality can be done using window.open() I am not explaining this.

 

Accessing child windows from parent windows using child window handles: (not working in Firefox)

We can access the child window elements by using the window handle that will be returned by the window.open() method, as shown below:

winobj=window.open(..)
...
winobj.document.getElementById("elementname").value=""

The winobj is actually a window object instance of the newly created window.

 

Calling JavaScript functions present in the parent window from child window or vice versa:

Calling JavaScript functions present in the parent window from child window: (IE & Firefox)

You can actually call a JavaScript function that is present in the parent window by using the below syntax:

window.opener.functioname()

Calling JavaScript functions present in the child window from parent window: (IE & Firefox)

To call JavaScript functions present in child window, use the window handle as shown below:

(Both the below code are written in parent window)

winobj=window.open(..)
...
winobj.functionname()

We can even have a function with arguments and use it as a workaround to share data between parent and child windows at some scenarios as shown below:

window.opener.functioname(arg1,arg2,..)
- to send data to the parent window from child window

winobj.functioname(arg1,arg2,..)
- to send data to the child window from parent window using the window handle got from window.open()

 

(The options mentioned in this article can be used to access multiple child windows and also multiple child windows can access a single parent window)

 

Conclusion:

I have explained methods to access and share data between parent windows and child windows in JavaScript. There may be many such options or workarounds available, if so please leave a comment by specify your method.

Bookmark / Share

Comments for this entry..

I have to agree with the last poster, you lay this out perfectly and even a novice can understand it quite easily!

by.. vegetarian dishes | May 23, 2010 07:19 | Reply

your detail instruction/tutor wil be more simple if there are include picture.. Smile

by.. paper shredders | May 31, 2010 09:11 | Reply

I would like to know the blogging platform that you are using. It looks simple . Are you running blogspot or blogster?

by.. Henry Bullock | June 2, 2010 08:08 | Reply

I'm not 100% on this, but I do like the idea. Good read here. Smile

by.. The Web Design Surrey Guy | June 9, 2010 06:46 | Reply

I cant believe the multitude of great info you have on your blog. I have learned a lot from it. Will be coming back soon.

by.. ps3 controller prices | June 9, 2010 08:17 | Reply

Ha, I think I know what you're getting at. Nice laylout on your blog by the way. Very cool.

by.. Tom @ Website Design Surrey | June 10, 2010 10:19 | Reply

Create a popup window in JavaScript

Create a popup window in JavaScript

by.. CodeHappiness.com | July 22, 2010 23:52 | Reply

Write your comment..




biuquote
  • Comment
  • Preview
Loading