使用Javascript集中新页面中的现有HTML页面

Question

I have a simple site with links to different pages in the top bar.

Something like this

==============================================
 Index link  |  Page 1  |  Page 2  |  Page 3
==============================================

The 'site' is a user interface for a scientific data system on a ship and users will often navigate between the different links depending on the task they wish to perform. The idea is to limit the number of open pages to the links in the top bar, in other words, not having more than one 'Page 1' or 'Page 2' open within one browser session, but rather just navigate to the existing page. These pages contain dynamic JQueryUI information and this will be lost if a new page is opened.

I need to be able to give focus to existing pages or open them if they are not already visible.

The code below works well if the calling page opened the page needing focus:

function launchApplication(l_url, l_windowName)
{
  if ( typeof launchApplication.winRefs == 'undefined' )
  {
     launchApplication.winRefs = {};
  }
  if ( typeof launchApplication.winRefs[l_windowName] == 'undefined' || launchApplication.winRefs[l_windowName].closed )
  {
    launchApplication.winRefs[l_windowName] = window.open(l_url, l_windowName);
  } else {
    launchApplication.winRefs[l_windowName].focus()
  }
}

My problem is referencing pages that were not spawned by the calling page.

I have done quite a bit of research and it seems that due to security considerations, open browser windows not spawned by the calling page are not accessible.

Is there any way I can implement this functionality? I know the URLs and window names for all pages and browsers are limited to Chrome and Firefox.

Any advice greatly appreciated.

Answer 1

Caveat: Trying to manipulate windows on browsers is really difficult and hard to get (and keep) working cross-browser, because of all the nefarious things that have been done with it in the past. I recommend putting all of the content in a single window and doing the tabs within that window, via jQuery UI tabs or similar. This gives you full, unambiguous control over what's showing when.

But answer the actual question:

If you know the window names, then you can get access to those windows even if the page didn't open them (provided there are no cross-origin issues).

var wnd = window.open("", "windowname");

...will give you a reference to the existing window with that name if there is one, without opening a new window. If there isn't a window with that name, it will open a new, blank window with that name.

So I'd probably use that, and then look in wnd.document to see if the content is there. If it isn't, presumably you've just opened the window, so set wnd.location to the correct URL, like this:

// Try to get existing window
var wnd = window.open("", "thewindowname");

// Does it have our content?
if (!wnd.document.getElementById("someElementId")) {
    // No, set the location
    wnd.location = "/some/url";
}

// Bring it to the foreground
wnd.focus();

Live Example | Source - Note the counter running in the example, so you know whether you've just activated the same window without replacing its content (when it's already open).

The above works with windows opened with window.open (even if by another page) if the window name is given when opening, and with windows opened via links with target="thewindowname" .

This works for me in Chrome 23, IE8, and IE7 (and so probably IE6); it doesn't work for me in Firefox 17, Opera 11, or IE9 (and so probably not IE10). Hence my earlier caveat. :-)