Home > Uncategorized > Opening New Browser Windows Part 2

Opening New Browser Windows Part 2

In part 1 I created a prototype of a window that would open in all required browsers.  Now I need to design a message sending process that will allow us to:

  • pass parameters to the new window
  • notify the parent window when an item has been selected
  • manage whether a child window has already been opened

When we create a child window, a window object is returned.  This is the object I plan to leverage to allow communication between windows.  The event we need to use is window.onunload.

As per the final post in this forum, we set up a function in the main window, that is called by the child window when it has finished processing.   It can pass back a parameter which gives us the ability to return a value as necessary. It is also nice because the child window will not need to know anything about its parent.  This helps us separate concerns, and have all the window management done in the parent!

The above design assumes the child object has a reference to its parent.  Luckily there is a property available as part of the window object in w3schools and found the opener property. This returns a reference to the window that opened the child window. This is what we need. This reference gives us a circular reference, which is not ideal.

The next design issue is passing parameters to the child window. Now we have a reference to the parent window, we can call a function to retrieve parameters. That means we can attach a function to the window object which will pass a parameter object (whatever that may be).

We have a set of functionality for the parent and for the child window.  We could put all of this into a single javascript file or separate into two.  If we put it all into one, we can reference it in one place (a master page, for example) and forget about it.  Call the openWindow method in the parent and set up functions to handle the events.  This sounds good because it is build and forget.  However it is unclear which is to be used by the child, and which for the parent.  If we separate it, it will be much easier to understand and simplify maintenance.

In summary, we now have:

A javascript file for the main window that:

  • Contains an array/list of parameters.
  • Contains a variable which contains a reference to the currently open window (or null if no child window is open).
  • Contains a function which returns the parameters.
  • Contains a function which handles an event that the child window has finished processing (passing an object parameter).
  • Attaches the above two functions to the main (current) window object.
  • Contains a function which will open a window (only if one is not already open), and keep a reference to it.

A javascript file for the child window that:

  • Initially retrieves the parameters from the parent window.
  • Handles the window.onunload event and calls the parent window notification function.
  • Passes the above function an object as a return parameter.

Next is to create a proof of concept for the above design, then finally (assuming POC succeeds) implementing it.

  1. No comments yet.
  1. No trackbacks yet.