卸载时关闭许多弹出窗口

Question

这是我的网站： http : //www.brute.adult 。 这是codepen： https ：//codepen.io/vaninoo/pen/GMbbEg。

正如您在网站上看到的那样，当您单击链接时，会出现许多弹出窗口。 我一直在尝试使它们在卸载时消失。 弹出式窗口的调用方式如下：

 $( "#title1" ).click(function() {
      popup1 = window.open("protein.html", "_blank","menubar=no,location=no,resizable=no,scrollbars=no,status=yes,top=0,left=500,width=500,height=500");

      setTimeout(function(){ 
           var popup2 = window.open("protein2.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=300,left=100,width=500,height=600");
      }, 500);

      setTimeout(function(){ 
           var popup3 = window.open("protein3.html", "_blank","toolbar=no,scrollbars=yes,resizable=yes,top=10,left=2000,width=400,height=700");
      }, 1000);

      setTimeout(function(){ 
           var popup4 = window.open("protein4.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=50,left=50,width=400,height=400");
      }, 1500);
 });

如您所见，其中一些延迟在窗口打开中产生节奏。 它们的变量名称是popup1，popup2，popup3，popup4等。

现在这是我尝试过的解决方案，但没有成功：

1）一个接一个地关闭它们，但是由于我不知道的原因，这只能在popup1上起作用：

$(window).on('beforeunload', function() {
    if(popup1) {
        popup1.close();
    }
    else {}
});

$(window).on('beforeunload', function() {
    if(popup2) {
        popup2.close();
    }
    else {}
});

2）尝试迭代它们。 通过添加警报，我将一一获得popup1，popup2等的名称，因此“ while”的第一部分起作用。 但是“如果”不是：

$(window).on('beforeunload', function() {
    var popup = "popup";
    var i = 0;

    while (i < 3) {
        namesofpopups = popup + i;
        i++;

        if(namesofpopups) {
            namesofpopups.close();
        }
    }
});

我已经有很长一段时间了，我使它在Codepen上更容易理解。 如果有人可以帮助，将不胜感激！

谢谢，对不起，我的帖子很长！

Answer 1

这是由于弹出参考变量的范围。 您已经在click处理程序中定义了所有它们（ popup1除外），因此无法从onbeforeunload事件处理程序访问它们。

要解决此问题，最好将引用推入一个数组中，这样在卸载选项卡时就可以循环通过，如下所示：

var popups = [];

$("#title1").click(function() {
  popups.push(window.open("protein.html", "_blank", "menubar=no,location=no,resizable=no,scrollbars=no,status=yes,top=0,left=500,width=500,height=500"));

  setTimeout(function() {
    popups.push(window.open("protein2.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=300,left=100,width=500,height=600"));
  }, 500);

  // other popups...
});

$(window).on('beforeunload', function() {
  popups.forEach(function(popup) {
    popup.close();
  });
});

话虽如此，用弹出窗口轰炸您的用户真是令人讨厌。 实际上，如果您对我这样做，我将有意不使用您的网站。 如果您确实需要这种行为，建议您改用页面内的模式弹出窗口。