Question

以下是该方案。我在网站的页脚中有一个静态音频播放器。如果您转到另一页，则音频播放器会重新加载。不是问题，因为它是一个音频流而不是静态文件。此页脚中还有一个链接，单击此按钮将导致整个静态页脚消失，并弹出一个窗口以显示音频流。当然问题是，如果有人重新加载页面或转到另一个页面，页脚将重新加载。弹出窗口通过弹出窗口的相同javascript命名。如果他们离开网站并回来，这也是一个问题。我想弄清楚一种方法来运行窗口加载检查，看看具有特定名称的窗口是否仍然打开。所以，如果当我点击一个按钮来获得这个弹出窗口时，我也将窗口命名为＆＃34; Radio＆＃34;然后它会检查是否存在名为radio的窗口。如下所示：

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

文档准备好后运行的东西。我只需要一种方法来查看该命名窗口是否打开然后我可以从那里开始。这是我在页脚中的jquery：

$(".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：

<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，如果绝望，大锤。 :)提前感谢任何想法。＆LT; ---＆gt;编辑＆LT; ---＆GT; 以下是我遗漏的一些细节：我在wordpress中使用直接的HTML5音频，因为mediaelement.js讨厌流音频，而且基本上是wordpress的废话，我不得不创建一个自定义模板，然后静态地将它浮动到网站底部的iframe中。这增加了页面上可能删除框架的其他链接的一些复杂性。所以根据Jack留下的答案，我将以下javascript / jquery代码放入我的wordpress模板中。

$( 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。我在网站的页脚中添加了其他代码：

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

到目前为止，这完全有效，因为我有另一个处理弹出音频播放器的模板，它有自己的标题。由于我推断代码的另一个方面是更改本地存储的值，如果弹出窗口被关闭，并且由于我有两个不同的弹出播放器都使用相同的标头，我将此代码添加到头文件中。

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

现在它已经在网站上发布，到目前为止看起来效果很好。如果有人有兴趣你可以在这里找到它： http://www.kgraradio.com KUDOS给杰克和其他帮助过的人。

Answer 1

听起来你只想跟踪正在打开的弹出窗口的状态。我只是使用localStorage，因为我不认为你能够做你正在谈论的事情。

当弹出窗口打开时，执行：

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

在弹出窗口中：

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

然后在您的页面上执行：

my $ref = \@{

    $seq->{ $label }{ $ARGV[4] }

}

Answer 2

你可以使用启动弹出窗口的click功能也设置一个cookie。当用户离开站点，然后返回时，您可以检查查找cookie。如果cookie存在，请隐藏页脚栏，否则显示它。

由于您使用的是jQuery，因此Cookie插件可以简化https://cdnjs.com/libraries/jquery-cookie。

可能是这样的：

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

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

您可以使用这样的技术来检测弹出窗口的关闭：http://www.sitepoint.com/jquery-capture-close-popup-window/。

关闭弹出窗口不仅会删除cookie，而且如果你通过再次显示页脚栏“将播放器弹回页面”会很酷。

Answer 3

由于storage事件触发了同一域上的所有选项卡（设置值的选项卡除外），因此可以使用它们轮询其他选项卡。

在弹出选项卡上侦听marco存储事件，并在发生时触发马球事件：

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

在主页面上，触发新的marco存储事件并侦听马球事件：

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

这适用于所有标签页，iframe和弹出窗口（一次性），因此它比仅查找弹出窗口更灵活。

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

3 个答案: