如何使用javascript或jquery检查命名窗口是否存在 [英] How do I use javascript or jquery to check if named window exists

问题描述

这是场景.我在网站的页脚中有一个静态音频播放器.如果您转到另一个页面，音频播放器将重新加载.没问题，因为它是音频流​​而不是静态文件.此页脚中还有一个链接，当单击该链接时，将导致整个静态页脚消失，​​并弹出带有音频流的窗口.当然，问题在于，如果有人重新加载页面或转到另一个页面，则页脚将重新加载.弹出窗口是通过与弹出窗口相同的JavaScript来命名的.如果他们离开网站再回来，这也是一个问题.我想找出一种方法来对加载的窗口进行检查，以查看具有特定名称的窗口是否仍处于打开状态.因此，如果我单击按钮以获取此弹出窗口时，我也将窗口命名为"Radio"，则它将检查是否存在名称为radio的窗口.像这样:

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();

在文档准备好后运行的东西.我只需要一种方法来查看该命名窗口是否已打开，然后就可以从那里去了. 这是我在页脚中使用的jQuery:

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>');}); 

以下是我创建弹出链接的HTML:

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>

请记住，有人可能会离开网站，所以我不认为使用window.opener在这里可以正常工作.我可以使用php，javascript，jquery，css，html，如果不顾一切，可以使用大锤. :)预先感谢您的任何想法. < --->编辑< ---> 以下是我遗漏的一些详细信息: 我在wordpress中使用纯HTML5音频，并且因为mediaelement.js讨厌流音频并且基本上在wordpress中是废话，所以我必须创建一个自定义模板，然后将其静态浮动在网站底部的iframe中.这增加了页面上其他链接的复杂性，可能会删除框架.因此，根据杰克留下的答案，我将以下javascript/jquery代码放入了我的wordpress模板.

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>');
}); 

在同一模板的html中，我向页面上的链接添加了lnk2类.在该网站的其他部分，我向整个网站上弹出播放器的所有链接添加了lnk1类.我在网站的页脚中添加了其他代码:

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"
});

此内容现已在网站上发布，到目前为止似乎运行良好. 如果有人感兴趣，可以在这里找到: http://www.kgraradio.com KUDOS向Jack和其他所有帮助过的人致敬.

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.

推荐答案

听起来您只是想跟踪弹出窗口的打开状态.我会改用localStorage，因为我认为您将无法执行所要谈论的事情.

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"

在弹出窗口中:

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

然后在您的页面上执行以下操作:

Then on your page just do:

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

这篇关于如何使用javascript或jquery检查命名窗口是否存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！