logo

Communicating with a pop-up's parent

Launching "pop-up" windows from the browser is fairly easy, assuming we all know about the window.open method. What do you do when you want to get some data from the new window back to the old one? We use the window.opener property of the pop-up don't we!?

window.opener creates an object reference to the window (or frame) that called window.open() in order to create the current window. We can use this to gain access to objects on the original document and alter them accordingly. Here's how:

On the original form create a link/button/action that launches a new window.


<input type="button" value="Choose.." onClick = "window.open('/dir/db.nsf/ColourPicker?OpenForm','new_win','width=150,height=150');">

In the form that is being opened we need a link that will send information back:

<input type="button" value="Send Colour" onClick="window.opener.document.forms['test'].MyFavouriteColour.value = this.form.Colour.value; window.close();">


And now what would this amount to without an example?

Colour:


In the above example I've used the onChange event handler of the drop-down list to call a function which returns the value and closes the window.

Feedback

  1. Pop-up performance

    I think this is an important side-note for using pop-ups, although it will be obvious to some.

    When I first began creating pop-up windows, I used a form to create the pop-up because I needed to do some lookups to populate fields in the pop-up. Of course, this requires an additional request to the server and processing time.

    Now, I put my lookups on the main form and create the pop-up by constructing the HTML, complete with JS functions, on the fly via JavaScript avoiding additional server hits until the form is actually submitted.

    The JavaScript function can be a little hairy since HTML syntax can be difficult enough by itself. More tips to make this easier: 1. Use linked resources such as CSS sheets and JavaScript source files. 2. Create the pop-up in the HTML editor of your choice, cut-n-paste the HTML into the JavaScript routine, and, finally, add any additional script that you will need to generate drop-down lists, checkbox lists, etc.

    1. Pop ups

      I agree with Jeffery.

      I'm using popup's to select user names (thousands of the buggers) and have found the solution to load the lists into a hidden frame and then reference them. The frame loads quietly in the background and users are not aware it's happening.

      This solution gives some dramatic time savings, no extra requests to the server and no server doing huge lookups.

      Also. IE (not sure about Netscape) has a problem in that a SELECT can only have 2500 OPTIONS.

      All in all exciting times .....

    • avatar
    • Stephen Neal
    • Tue 27 Feb 2001

    Using Opener

    There seem to be some issues with using Opener, I've got a piece of code that works perfectly under IE4 and Netscape but doesn't work under IE5, apparently the issue is to do with the 'settle' time required by IE5 before trying to communicate with a child window. Anybody got any more information on this ?

    1. Re: Using Opener

      This method does not work on IE version 5.5. I believe that there is a timing issue, because, the recieving field in the parent document goes blank. In addition, if you add a test field on the popup with the same name as the receiving field on the parent, it will be populated with the selected value from the dialog list.

      Any other ideas.

  2. How to run a function on closing the popup?

    I want this popup to run a function when it returns to the browser, as opposed to inserting a value in a field. Is this possible?

    1. Re: How to run a function on closing the popup?

      First of all, I'm not talking about modal windows, opened with showModalDialog(), but those opened with window.open().

      In the parent window, create a handle to the function you want to call on exit, e.g.

      [<br clear="all" /><code> exitFunction = myExitFunction; </code>]

      In the popup, you can reference that function as follows:-

      [<code> //...get a pointer to the exit function we will invoke... exitFuncName = window.opener.exitFunction; exitFunc = window.opener.document.forms[0][exitFuncName]; </code>]

      Then you can call it as part of the function that closes the popup window. This might be when the user clicks the OK button, for example.

      [<code> function okClick() { ....... if ( exitFuncName != '' ) { eval('window.opener.' + exitFuncName); } ....... } </code>]

      Note that we check if we have a handle to a function (well, to something anyway) before we try to run it.

      This technique dates back to Netscape 3.x and IE4.x. The only problems I have had are with a particular version of IE5.0x, which are security related.

      Show the rest of this thread

    • avatar
    • brother marcus
    • Mon 26 Jan 2004

    Good stuff

    Appreciate this how-to...haven't done anything in javascript in quite some time and this came in very handy.

    Thanks again.

    • avatar
    • cant get it to work
    • Tue 27 Apr 2004

    nice job

    how is it that you only give one file for downloading in the example.. I have downloaded your webpage anyways... and fixed up all the names and it still doesn't work.. even the examples that you give are very unclear.. one would think that you would make available ALL source files not just the new_window.html

      • avatar
      • Jake
      • Tue 27 Apr 2004

      Re: nice job

      That file is there merely for the demo and is not really meant as a "download". However you can download this page and the source of the article if you need to work on it from your own PC.

    • avatar
    • KB
    • Wed 19 Oct 2005

    Communicating with a pop-up's parent

    It doesnot work,when the pop up is opened and the color is changed it gives me error

    1. need help for Communicating with a pop-up's parent

      window.opener.document.forms['test'].MyFavouriteColour.value = this.form.Colour.value; window.close() Thanks for this article and i want some more.

      Can we load a parent dropdownlist with this code. can you please send me the code for this PLEASE.

  3. Error

    Hi Jakes,

    When I run the code(on this webpage) I get an run time error on line 7.

    REgards,

    J

    PS Using IE6.1

      • avatar
      • Jake Howlett
      • Wed 16 Nov 2005

      Re: Error

      Fixed. Thanks for the prompt to sort it out.

    • avatar
    • sree
    • Sun 5 Feb 2006

    thanks

    too gud

    • avatar
    • cgilbert
    • Mon 1 May 2006

    Frames

    How is the field value referenced if the field is in a frame inside a frameset?

    1. Re: Frames

      When using window.open(...) from within a frame, to set the value of 'fieldname' on the underlying form, use:

      window.opener.parent.frames['FrameName'].document.getElementById('fieldname').va lue = 'whatever value';

      This seems to work for IE, Firefox, Netscape, and safari.

  4. Feedback about this site

    It is a really wonderful site. Because i had been strucking up with this functionality since past 2 days. Thanks guys. And one more query, Suppose if i use Master/Content page of .NET version 2.0, what will come instead of forms(document.forms)

    • avatar
    • maya
    • Thu 21 Dec 2006

    run codebehind function from pop up

    hello, i would like to ask, 1.Is it possible to execute some parent codebehind function from popup?

  5. DOMM-4U4K9B :don't work in R6

    Hi Jake: Do you know?...I was trying your code in Lotus R6.5 and it doesn't work....I don't know why?...but it does work when I run your code with DreamWeaver editor...........please, Could you tell me How Can I implement in R6.5? Regards, Carlos

      • avatar
      • Jake Howlett
      • Thu 22 Mar 2007

      Re: DOMM-4U4K9B :don't work in R6

      Carlos,

      There's no reason it shouldn't work in 6.5. It's the browser that should dictate whether or not it works.

      Jake

      Show the rest of this thread

    • avatar
    • Anonymous
    • Wed 4 Jul 2007

    Thank you!

    I've just tried ten different examples of how to accomplish this, none worked! Many gave completely different examples from the source code offered! Basically, a complete waste of 30 minutes!

    Then I found this, copy, paste, and it works a charm!! Thank you!!!

    • avatar
    • bibhaw
    • Tue 24 May 2011

    Thank you so much. This script has been saved mine lot of time & effort.

    1. Re: Only works on editable fields.

      For mostly aesthetic reasons I too have a form that needs to be "read-only" with updates occurring through a dialog box. After pulling my hair out for 2 days I realized there was a simple solution.

      Set the HTML Attribute of the field on the calling (main) form to "DISABLED". The field will retain its programmability, the caveat is it will also be "grayed-out". If this is an issue set the HTML attribute to "READONLY" and set the field's border = 0 (in the html style or via a CSS). Read only prevents the user from changing the field's value but it leaves the field's border in tact, so the setting the style border = 0 is needed to complete the deception. Both provide you with an HTML equivalent of a computed field.

      btw... your modal dialog box was a great help. Thanks

      Hide the rest of this thread

      1. Re: Only works on editable fields.

        Cheers Stephen, you are right in what you say.

        Beware though that this is not a secure solution. As I mentioned in my blog post on Fri 5 Apr you can easily change the value of one of these fields by typing the following in the address bar. [<span class=".code">] javascript:void(document.forms[0].NameOfField.value='Hey, you changed me!') [</span>] Sure, you can assume this is well beyond most users but it's still worth noting.

        Jake -codestore

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Forms"

« Previous Article Next Article »
Creating a printer friendly page   Creating your own field properties

About This Article

Author: Jake Howlett
Category: Forms
Hat Tip: IT World
Keywords: window; parent; opener; form;

Attachments

new_window.html (1 Kbytes)

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »