Introduction
This article explains basic
options available to access the data present in a parent browser window from a
child browser window or vice versa. By telling the word Parent I mean the browser window that opens another browser window, the new window is what I call Child. At times when you are developing a web application you could face a situation,
where there is a need to access the HTML forms and controls present in a parent
window from a popup window or something similar, this article provides few
solutions for accomplishing this. I am considering only IE and Firefox for this
article, these options may work in other browsers also. I am going to mention
the basic options, which someone can use immediately in their work, instead of
analyzing all the options/workarounds available for a specific need.
Topics discussed:
Using
window.opener object to access the parent browser window from a child window:
(compatible with IE & Firefox)
The window.opener object can be used to access the HTML
elements present in the parent browser window from the 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:
<br /><html>
<br /><script language="javascript">
<br />function openwindow()
<br />{
<br />window.open("target.htm","_blank","height=200,width=400,
<br />status=yes,toolbar=no,menubar=no,location=no")
<br />}
<br /></script>
<br /><body>
<br /><form name=frm>
<br /><input id=text1 type=text>
<br /><input type=button onclick="javascript:openwindow()" value="Open window..">
<br /></form>
<br /></body>
<br /></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:
<br /><html>
<br /><script language="javascript">
<br />function changeparent()
<br />{
<br />window.opener.document.getElementById('text1').value="Value changed.."
<br />}
<br /></script>
<br /><body>
<br /><form>
<br /><input type=button onclick="javascript:changeparent()" value="Change opener's textbox's value..">
<br /></form>
<br /></body>
<br /></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 window.showModalDialog()
to send data to parent browser 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 js 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 window that opens this file
showmodal.htm:
<br /><html>
<br /><script language="javascript">
<br />function openwindow()
<br />{
<br />retval=window.showModalDialog("modaltarget.htm")
<br />document.getElementById('text1').value=retval
<br />}
<br /></script>
<br /><body>
<br /><form name=frm>
<br /><input name=text1 type=text>
<br /><input type=button onclick="javascript:openwindow()" value="Open window..">
<br /></form>
<br /></body>
<br /></html>
modaltarget.htm:
<br /><html>
<br /><head>
<br /><script language="javascript">
<br />function changeparent()
<br />{
<br />window.returnValue="Value changed.."
<br />window.close()
<br />}
<br /></script>
<br /></head>
<br /><body>
<br /><form>
<br /><input type=button onclick="javascript:changeparent()" value="Change main window’s textbox value..">
<br /></form>
<br /></body>
<br /></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
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 browser windows
from parent windows: (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 in parent/client windows:
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:
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 browser 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 child browser windows and parent windows. There may be many such options or workarounds
available, if so please leave a comment by specify your method.
