36275

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?

Answer1:

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.

Answer2:

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.

Answer3:

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!

Answer4:

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.

Recommend

  • image auto rotates while reading url from file upload (when it's a big image)?
  • HTML Entities with jQuery
  • dojo.parser.parse doesn't always return
  • else if statement in javascript not able to display validation message
  • How to call firefox addon function with onclick in html
  • html2canvas creates a canvas with a width and height of zero?
  • Navigation drawer is always inflated
  • OnChange event handler not working
  • Sending HTML Form Multiple box via POST request with AJAX?
  • How can I detect errors in an HTML document fragment with Ruby?
  • Running a Service from ASyncTask or Thread?
  • Get highlight text in current window and send it in a popup
  • Back press fragments issue in android
  • MVC extension method error
  • Angular - routerLinkActive and queryParams handling
  • jwtBearer bearer token with rc-1 update to ASP.Net 5
  • How do I signal completion of my dataflow?
  • Simulate click Geckofx vb,net
  • Convert Type Decimal to Hex (string) in .NET 3.5
  • Should I or shouldn't I use the CachingConnectionFactory with hornetq 2.4.1
  • Parsing a CSV string while ignoring commas inside the individual columns
  • How do I get HTML corresponding to current DOM tree?
  • Content-Length header not returned from Pylons response
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Play WS (2.2.1): post/put large request
  • Email verification using google app script and google forms
  • Jquery UI tool tip close icon
  • Avoid links criss cross / overlap in d3.js using force layout
  • How to access EntityManager inside Entity class in EJB3
  • HTML download movie download link
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • vba code to select only visible cells in specific column except heading
  • Jquery - Jquery Wysiwyg return html as a string
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Arrays break string types in Julia
  • WPF Applying a trigger on binding failure
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How do you join a server to an Active Directory (domain)?
  • Java static initializers and reflection