CODEWITHSUNDEEP
javascriptpopup
Willi Ballenthin
Willi Ballenthin

Reputation: 6604

How can a Javascript parent window send data to popup 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 coming 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?

Upvotes: 2

Views: 9650

Answers (4)

The Muffin Man
The Muffin Man

Reputation: 20004

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.

Upvotes: 0

bobince
bobince

Reputation: 536329

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 completely 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.

Upvotes: 1

Willi Ballenthin
Willi Ballenthin

Reputation: 6604

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!

Upvotes: 0

OrangeDog
OrangeDog

Reputation: 38749

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.

Upvotes: 1

Related Questions