Javascript-在一页上打开窗口，然后在另一页上关闭

Question

Let me explain my scenario. I have a play/stop pair of CSS buttons at my footer. I don't want to use frames. When I press play on the current page (page 1), a popup opens and jplayer starts playing music. When I press close, the window closes thanks to my persisting the window value from the initial opening.

Now, here's my problem: Lets say the user moves to another page (page 2) on the main site - the popup remains playing (that's not a problem, that's what I intended). But I would like for the user to be able to press stop on page 2 and kill the window that was created in page 1.

I tried using HTML5 local storage, but it didn't work - odd thing: the object stored in HTML5 storage, is the of type window - so it is stored. It still seems unable to close it.

Has anyone ever done this before or know of a way to get around it? Here is my code (which does not work) as is:

$(document).ready(function () {
    var win;

    $('#playButton').click(function () {                                
        win = window.open('Player.html', 
                          "popupWindow", 
                          "width=265,height=360,scrollbars=yes");
        $(this).attr('class', 'active');
        $('#stopButton').attr('class', 'none');
        localStorage.setItem("player", win);
    });

    $('#stopButton').click(function () {
        $(this).attr('class', 'active');
        $('#playButton').attr('class', 'none');                                    
        win = localStorage.getItem("player");
        win.close();
    });                                 
});

Answer 1

Following my comment: Change your page's code to:

$(document).ready(function () {
                            $('#playButton').click(function () {                                
                                window.open('Player.html', "popupWindow", "width=265,height=360,scrollbars=yes");
                                $(this).attr('class', 'active');
                                $('#stopButton').attr('class', 'none');
                            });

                            $('#stopButton').click(function () {
                                $(this).attr('class', 'active');
                                $('#playButton').attr('class', 'none');                                    
                                localStorage.setItem("player", false);
                            });                                
                        });

And add this to your popup's code:

 setInterval(function(){
   if(localStorage.getItem("player") == false)
     window.close();
 }, 1000);

SetInterval will run the internal anonymous function every 1000ms, and it checks the player value and will close itself if it is set to false.