为什么不在活动选项卡中时 JavaScript 警报不起作用？答案

【问题标题】：Why won't a JavaScript alarm work when not in an active tab?为什么不在活动选项卡中时 JavaScript 警报不起作用？
【发布时间】：2017-12-05 02:01:19
【问题描述】：

我一直在尝试为学校时间表创建一个 JavaScript 警报。当我在该 CodePen 选项卡上时，警报可以正常工作，但当我在另一个选项卡上时（仍在该窗口中）不会执行。密码笔是here。它使用 JavaScript 中的日期对象。可变日期适用于不同的时间表 - 我们在某些日期有一个简短的时间表，并设置了警报来处理它。

    var day;
  function choose(choice){
    day=choice;
  }
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
   var x=1;


window.setInterval(function(){ // Set interval for checking
    var date = new Date(); // Create a Date object to find out what time it is
if(day==1){
     document.body.style.background ="black";
  document.getElementById("number2").style.display="none";
  document.getElementById("number1").style.display="block";
if(date.getHours()===8 && date.getMinutes
()===16&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
  if(date.getHours()===9 && date.getMinutes
()===10&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
   if(date.getHours()===10 && date.getMinutes
()===04&&date.getSeconds()==18){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
     if(date.getHours()===11 && date.getMinutes
()===36&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
  if(date.getHours()===12 && date.getMinutes
()===42&&date.getSeconds()==0){
  window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
    if(date.getHours()===1 && date.getMinutes
()===24&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
    if(date.getHours()===2 && date.getMinutes
()===18&&date.getSeconds()==0){
  window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}}
  else if(day==0){
     document.getElementById("number1").style.display="none";
  document.getElementById("number2").style.display="block";
    document.body.style.background ="white";
    if(date.getHours()===8 && date.getMinutes
()===9&&date.getSeconds()==0){
  window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
  if(date.getHours()===8 && date.getMinutes
()===56&&date.getSeconds()==0){
   window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
   if(date.getHours()===9 && date.getMinutes
()===45&&date.getSeconds()==0){
  window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
     if(date.getHours()===10 && date.getMinutes
()===17&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
  if(date.getHours()===11 && date.getMinutes
()===08&&date.getSeconds()==0){
  window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}
    if(date.getHours()===11 && date.getMinutes
()===59&&date.getSeconds()==0){
 window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");
}
    if(date.getHours()===12 && date.getMinutes
()===46&&date.getSeconds()==0){
   window.open("https://www.youtube.com/watch?v=iNpXCzaWW1s");

}

【问题讨论】：

发布的代码不完整。在实现时，如果计时器没有按计划准确地关闭，它将错过特定时间，并且绝对不能保证此类计时器是准确的。浏览器会在非活动标签上减慢间隔计时器的速度。
“当我在不同的选项卡上时”是什么意思？这是同一个浏览器标签，但在显示的页面上显示不同的标签（div）？
setInterval is throttled to 1000ms when not in an active tab，但由于您似乎没有使用高于 1 秒的精度，所以这可能不是问题。我的猜测是您的浏览器不允许非焦点页面使用window.open。如果你 alert 某事而不是 window.open，它会起作用吗？
@apsillers 我有点困惑浏览器会让计时器事件循环使用window.open()。
@Pointy 我也是，这似乎是一个非常糟糕的主意，通常用于此

标签： javascript

【解决方案1】：

浏览器积极阻止 window.open，以防止垃圾邮件/弹出窗口/等。

这可能对您有所帮助：

https://stackoverflow.com/a/11821617/3650835

【讨论】：