如何使用javascript或jquery检查命名窗口是否存在

Question

Here is the scenario. I have a static audio player in the footer of a site. If you go to another page, the audio player reloads. Not an issue because it's an audio stream not a static file. There is also a link in this footer that when clicked will cause the entire static footer to disappear and a window to pop up with the audio stream. Of course the problem is that if someone reloads the page or goes to another one the footer will reload. The pop up window is named through the same javascript that popped up the window. This is also a problem if they leave the website and come back. I would like to figure out a way to run a check on the window loading to see if a window with a specific name is still open. So, if when I clicked on a button to get this pop up window I also named the window "Radio" then it would check to see if a window with the name radio exists. So something like:

if window.name("Radio).exists then $(".radio").remove();

Something that runs after the document is ready. I just need a way to see if that named window is open then I can go from there. Here's the jquery I have in the footer:

$(".lnk1,#xx").click(function() {
  $("div").remove("#fixedBar")
});
$( document ).ready(function() {
$(".radio2").html('<audio src="http://www.live365.com/play/372874/" type="audio/mpeg" autoplay="autoplay" preload="auto" controls="controls"></audio>');}); 

Here's the HTML where I create the pop up link:

<div class="radioBar"><a class="lnk1" style="font-size:125%;text-align:center;" href="javascript://" onclick="window.open('/live365', 'live365',',width=400,height=550,resizable=yes,scrollbars=no,menubar=no'); return true;"><span style="padding:0 0 0 1%;">Click To Pop Out Player</span></a><div id="container1" class="radio2"></div></div>

Keep in mind that it's possible someone might leave the website so I don't think that using the window.opener is going to work here. I can use php, javascript, jquery, css, html, and if desperate, sledge hammer. :) Thanks in advance for any ideas. <--->EDIT<---> Here are some details I left out: I'm using straight HTML5 audio in wordpress and since mediaelement.js hates streaming audio and is basically crap in wordpress, I had to create a custom template and then float it statically in an iframe at the bottom of the website. This added some complexities with other links on a page that might remove the frame. So based on the answer left by Jack I put the following javascript/jquery code in my wordpress template.

$( document ).ready(function() {
if (window.localStorage.radioOut === "1") {
  $("#fBar").remove();
}
$(".lnk2,#xx").click(function() {
  $("div").remove("#fbar");
      window.localStorage.radioOut = "1"
});
$(".radio2").html('<audio src="http://www.live365.com/play/372874/" type="audio/mpeg" autoplay="autoplay" preload="auto" controls="controls"></audio>');
}); 

in the html of the same template I added a class of lnk2 to the link on the page. In other parts of the site I added a class of lnk1 to all links that pop up the player on the entire site. I added additional code to the footer of the site:

$(".lnk1").click(function() {
  $("div").remove(".fixedBar")
});
if (window.localStorage.radioOut === "1") {
  $(".fixedBar").remove();
}

So far this works perfectly as I have another template that handles the pop up audio player and it has it's own header. Since I deduced that the other aspect of the code is to change the value of local storage should that pop up window be closed and since I had two different pop up players that both used the same header, I added this code to the header file.

 window.addEventListener("beforeunload", function (event) {
  window.localStorage.radioOut = "0"
});

This is now live on the website and so far it appears to be working perfectly. If anyone is interested you can find it here: http://www.kgraradio.com KUDOS to Jack and everyone else who helped.

Answer 1

It sounds like you just want to track the state of the popup being open. I'd just use localStorage instead since I don't think you'll be able to do what you're talking about.

When the popup is opened do:

window.localStorage.radioOut = "1"

In the popup itself:

window.addEventListener("beforeunload", function (event) {
  window.localStorage.radioOut = "0"
});

Then on your page just do:

if (window.localStorage.radioOut === "1") {
  $(".radio").remove();
}

Answer 2

You could have the click function that launches the pop out also set a cookie. When the user leaves the site, then returns, you could have a check that looks for the cookie. If the cookie exists, hide the footer bar, else, show it.

Since you are using jQuery, a cookie plugin could make it simpler https://cdnjs.com/libraries/jquery-cookie .

Maybe something like:

$(window).load(function() {
  if (!$.cookie('playerPop')) {
    $('.radio').show;
  }
});    

$(".lnk1,#xx").click(function() {
  $("div").hide("#fixedBar");
  $.cookie('playerPop', {
        path: '/',
        expires: 1
    });
});

You could use a technique like this to detect the closing of the popup: http://www.sitepoint.com/jquery-capture-close-popup-window/ .

Not only would closing the popup remove the cookie, but it would be cool if you "popped the player back into the page" by showing the footer bar again.

Answer 3

since storage events fire on all tabs on the same domain (except on the tab setting the value), they can be used to poll for other tabs.

Listen for marco storage events on the popup tab, and trigger a polo event when they occur:

addEventListener("storage", function(e){
    if(e.key=='marco') localStorage.polo = e.newValue;
});

On the main page, trigger a new marco storage event and listen for a polo event:

addEventListener("storage", function(e){
    if(e.key=='polo' && e.newValue == localStorage.marco){
         $(".radio").remove();
    }
});
localStorage.marco=Math.random();

this works on all tabs, iframes, and popups (at once), so it's a bit more flexible than looking for only popups.