Ad

How Do I Use Javascript Or Jquery To Check If Named Window Exists

- 1 answer

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;" target="_blank" rel="nofollow noreferrer" 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").removw.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.

Ad

Answer

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();
}
Ad
source: stackoverflow.com
Ad