Spiga

Cross-window Javascript pop-up detector

July 05, 08 by Gabi Solomon

I have started working on a music directory project recently and one on the task i had to do is to make the user experience more desktop-like with the current wimpyplayer.

The main problem that they were facing was that how the code was originally setup the player would open in a new pop-up window and load the songs you selected. The problem was that upon navigating to a new page and selecting new songs, the pop-up would refresh and clear the old songs and load the new ones.

The challenge was to make so that the player would support appending new tracks to its playlist. That was not quite the big problem .. since wimpyplayer has all the functions needed to do this, but how to detect the pop-up and trigger those functions ?

At first i tried a code to detect the pop-up that seem to work :

PLAIN TEXT
JAVASCRIPT:
  1. if (!winPlayer.closed && winPlayer.location) {
  2.         alert('window focus');
  3.         winPlayer.focus(); 
  4.     }
  5.     else {
  6.         alert('Window Create.');
  7.         winPlayer = window.open("about:blank","player_window",'toolbar=0,menubar=0,scrollbars=0,status=1,resizable=0,width=' + popup_W + ',height=' + popup_H);
  8.         winPlayer.document.write(html);
  9.         winPlayer.document.close();
  10.     }

But if you would navigate to a different page in the parent window it would lose its reference to that pop-up and reopen it. :(

So i started to do some more googling to find a new solution, one that would be cross window. Luckily i did on the blog of Martin Laine.

Apparently he had the same challenge, and found a more low tech solution in 2005 that he called Cross-window Javascript communication where basicly he had the pop-up window remind the opener that reference to it at a small interval of 200 milliseconds.

Later Robert Emmery left a comment on his blog giving him a new solution, that i adopted as well .. and i will post here also in the hope that you will find it upon needed :)

In the main window:

PLAIN TEXT
JAVASCRIPT:
  1. var popupWin = null;
  2.  
  3. function openPopup() {
  4.     var url = "popup.htm";
  5.     popupWin = open( "", "popupWin", "width=500,height=400" );
  6.     if( !popupWin || popupWin.closed || !popupWin.doSomething ) {
  7.         popupWin = window.open( url, "popupWin", "width=500,height=400" );
  8.     } else popupWin.focus();
  9. }
  10.  
  11. function doSomething() {
  12.      openPopup();
  13.      popupWin.doSomething();
  14. }

In the popup:

PLAIN TEXT
JAVASCRIPT:
  1. self.focus();
  2.  
  3. function doSomething() {
  4.     alert("I'm doing something");
  5. }