0


I need to open a popup on page load and than on each new page load I need to check if the popup is still there or not. When the is loaded a cookie is stored so, if the user closes the popup it will never opens again unless the user click to open it.
On page load I open the popup if the cookie is not set:

var page_id = getURLParameter('pageID'),
    popup_opened = readCookie('music_popup'),
    musicPopup;


if(page_id !== 'music_popup' & !popup_opened){
    musicPopup = window.open('?pageID=music_popup', 'musicPopup', 'height=720,width=980');
};

What I need is a control on click event.
1- If user click on a link and the popup is still there, then focus on the popup.
2- if the popup is closed, than open it with focus.
I tried this code:

$('.c_music').click(function (event) {
    event.preventDefault();
    if (musicPopup !== undefined) {
        musicPopup.focus();
    } else {
        musicPopup = window.open('?pageID=music_popup', 'musicPopup', 'height=720,width=980');
    };
});

This doesn't work because if I'm in a page that hasn't opened the popup "musicPopup" is always undefined and the popup is opened even if it is just open... I found this question: js open popup window and acces it's element in another page where this code is suggested:
from page 1

var popup = window.open("test.html","mypopup","width=500,height=300");
popup.document.getElementById("player").someFunction();

from page 2

var popup = window.open('','mypopup');
// now popup is know again
popup.document.getElementById("player").someFunction();

this works fine if the popup is still opened when page 2 load, but if the popup is closed than page 2 open a black popup...

I'm going crazy... Any help would be really appreciate!

Community
  • 1
  • 1
danipen
  • 341
  • 1
  • 6
  • 22
  • 1
    instead of using `window.open` for your popup, you should maybe consider a modal popup then you can just see if the element is visible or not and you won't run into problems like popup blockers – Pete Feb 03 '14 at 13:01
  • I have to use popup because I have to implement a background music that doesn't reload on page change but keep playing in the background. The popup solution is the simpler one. I've considered a solution link using address.js or iframe... but in this case popup is the best solution – danipen Feb 03 '14 at 13:09
  • You can use something like [fancybox 2](http://fancyapps.com/fancybox/) then if you need a new page to open, this will load a page into an iframe inside popup and then you can check to see if the popup is visible – Pete Feb 03 '14 at 13:21
  • no, I can't. If I use a light window (no matter which plugin) If I reload the page the light window reload too. So if I load music in a light window it will start from the beginning each time a load a new page. I don't like music or popup on website... but I have to do and the popup seems to be the simpler solution. – danipen Feb 03 '14 at 13:26
  • If you reload the page the lightbox will be closed – Pete Feb 03 '14 at 13:39
  • yes, and if I have music in it... the music stop playing when the lightbox dies. I don't want this happen so I have to load the music outside of the page (popup) or prevent the page from reloading (like using address.js etc). In this case I can't use the second option and so I need popup. – danipen Feb 03 '14 at 13:42

1 Answers1

1

I've just found out a workaround.
It seems not posibile to check if windows exist from a page how doesn't is the windows.opener
but what is possible to do is to check if the popup is loading whit no content.
As I state in the above question, using this code you can call the windows if it is open, or load an empty popup:

var popup = window.open('','mypopup');
// now popup is know again
popup.document.getElementById("player").someFunction();

If I check if the re-called popup is empty I can then fit it again with the desired content. so my final code is:

var page_id = getURLParameter('pageID'),
    popup_opened = readCookie('music_popup'),
    popup_url = '?pageID=music_popup',
    popup_name = 'musicPopup',
    popup_wh = 'height=720,width=980',
    musicPopup;

// open the popup if there isn't the popup_opened cookie 
if(!popup_opened){
    musicPopup = window.open( popup_url, popup_name, popup_wh);
};

$('.c_music').click(function(event) {
    event.preventDefault();
    //when the user click on a .c_music link check if popup is defined (I'm in the opener page)
    if(musicPopup !== undefined) {
        musicPopup.focus();
        musicPopup.document.getElementById("start").click();
        return false;
    } else {
        // I'm not in the opener page, so a call the popup again
        var musicPopup = window.open('', popup_name, popup_wh) ;
        // if popup doesn't exist a blank one would be opened
        if(musicPopup.location == 'about:blank' ){
            // load the desired content in the popup
            musicPopup.location = popup_url;
            return false;
        }
        // the popup still exist, so start the music again
        musicPopup.document.getElementById("start").click();
    };
});

This work fine for my needs and I hope it could be useful for others.

danipen
  • 341
  • 1
  • 6
  • 22