I have been writing a browser based application (or rather, rapid prototyping an application) using HTML and Javascript. I would like the main window to be able to display popup windows with dynamic data. However, I cannot figure out how to push data from a parent window to a popup window in Javascript. Note, I am working with the assumption that the application may be used in "offline" scenarios, so all dynamic data should be ing from the main window.

Ideally, I'd like to write

var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";

However, the getElementById function returns NULL. How can I push data to popup windows from a parent window?

I have been writing a browser based application (or rather, rapid prototyping an application) using HTML and Javascript. I would like the main window to be able to display popup windows with dynamic data. However, I cannot figure out how to push data from a parent window to a popup window in Javascript. Note, I am working with the assumption that the application may be used in "offline" scenarios, so all dynamic data should be ing from the main window.

Ideally, I'd like to write

var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";

However, the getElementById function returns NULL. How can I push data to popup windows from a parent window?

• javascript
• popup

• I know this might be a silly question, but are you positive that the child window has a node with that ID? Remember, case does matter! – Steven P. Commented Mar 3, 2011 at 22:43
• is the var popup within scope of the other function that is calling it? the syntax you have is correct. – rayman86 Commented Mar 3, 2011 at 22:45
• @Steven Paligo, yes, the popup.html (in this example) has a well defined "data" element. – Willi Ballenthin Commented Mar 3, 2011 at 22:51

4 Answers 4

Is the popup serving content from a different domain than the parent? If so, the short answer is you can't.

The long answer is that you can sent the popup's href fragment (i.e. the part after the # in protocol://server/path?query#fragment). If the content in the popup knows to check its fragment for changes, then you can pass data to it.

If it's from the same domain then your code should work, as long as an element with that id exists.

However, the getElementById function returns NULL.

Because popup.html hasn't loaded yet. If you want to interact with content from the document, you'll have to call back later when it has finished loading.

For pletely dynamic popups, open them with a blank URL and popupwindow.document.write their content into them. For co-operatively-scripting popups loaded from a separate document, have the child document call its parent when it is ready to be accessed. Or just use in-page pop-up divs which are typically less annoyance, both for you as a coder and for the end user.

Let me start off by presenting a possible solution that I just experimented with. I would like to encourage feedback and better solutions, however...

Its not very neat, but I can append GET-style query parameters to the source URL of the popup:

var popup = window.open("popup.html?" + identifier, somename, "");

Now in my particular situation, the popup is a view to some model identified by a unique ID, so the popup window can ask for the parent window for data related to that ID:

var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);

This strategy won't work in all cases, especially when the data is not easily marshaled into the getModel() implementation. However, in my case, I think this approach may work.

I'd appreciate feedback on this strategy. Thanks!

When the user clicks on your link to open the popup window pass a query string to it and then react to that value with your server side code.