javascript 闪烁标题栏

Flash the title bar

提问by Margaret Zakowski

I am try to get the title bar to flash, using very basic HTML. I've given it a shot, but the code below doesn't seem to work, and I have no idea why. Also, is there a way to make the title bar flash text, but only if the user is not viewing the current browser page?

我尝试使用非常基本的 HTML 使标题栏闪烁。我试过了，但下面的代码似乎不起作用，我不知道为什么。另外，有没有办法让标题栏闪烁文本，但前提是用户没有查看当前浏览器页面？

My attempt:

我的尝试：

function Flash() {
            window.setTimeout(function() {
            alert(document.title);
                document.title = (document.title == "Company" ? "Company - flash text" : "Company");
            }, 1000);

            this.stop = function() { 
                document.title = "Company";
                clearTimeout(this.timer);
            }
        }

回答by mplungjan

Duplicate of this one make my browser blink as indicator

重复这个使我的浏览器作为指示器闪烁

But since I wrote this script now anyway:

但既然我现在写了这个脚本：

https://plungjan.name/SO/flashtitle.html

https://plungjan.name/SO/flashtitle.html

<script>
var timer="";
var isBlurred=false;
window.onblur=function() {
  isBlurred = true;
  timer=window.setInterval(function() {
    document.title = document.title == "Company" ? "Company - flash text" : "Company";
  }, 1000);
}
window.onfocus=function() { 
  isBlurred = false;
  document.title = "Company";
  clearInterval(timer);
}
</script>

jQuery version is not really much different (but not tested)

jQuery 版本并没有太大的不同（但没有经过测试）

var timer="";
var isBlurred=false;
$(window).on("blur",function() {
  isBlurred = true;
  timer=window.setInterval(function() {
    document.title = document.title == "Company" ? "Company - flash text" : "Company";
  }, 1000);
}).on("focus",function() { 
  isBlurred = false;
  document.title = "Company";
  clearInterval(timer);
});

回答by Roman

You ask about flashing (blinking) document.title bar when visitor is not viewing the current browser page (window hide, blur). So we have to set up two functions. First we need to detect if a browser window is not currently active - visibilityChange(actionFunction). And second we need to start get flashing document.title bar - comeBackAlerts(). Here you are - The solution works for me fine, hopefully, and for you.

当访问者未查看当前浏览器页面（窗口隐藏、模糊）时，您询问闪烁（闪烁） document.title 栏。所以我们必须设置两个函数。首先，我们需要检测浏览器窗口当前是否处于非活动状态——visibilityChange(actionFunction)。其次，我们需要开始获取闪烁的 document.title bar - comeBackAlerts()。你在这里 - 该解决方案对我很有效，希望对你也有效。

/* Set event leaving the page to execute actionFunction */

function visibilityChange(actionFunction) {

  window.focus(); /* window.onfocus = infoIn;  */

  var hidden = "hidden";

  /* Standards: */
  if (hidden in document) {
    document.addEventListener("visibilitychange", actionFunction);
  } else if ((hidden = "mozHidden") in document) {
    document.addEventListener("mozvisibilitychange", actionFunction);
  } else if ((hidden = "webkitHidden") in document) {
    document.addEventListener("webkitvisibilitychange", actionFunction);
  } else if ((hidden = "msHidden") in document) {
    document.addEventListener("msvisibilitychange", actionFunction);
  }
  /* IE 9 and lower: */
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = actionFunction;
  }
  /* All others: */
  else {
    window.onpageshow = window.onpagehide = window.onfocus = window.onblur = actionFunction;
  }
}


/* Function to make browser window blink in task bar */

var comeBackAlerts = (function() {
  var oldTitle = document.getElementsByTagName('h1')[0].innerText; /* document.title; */
  var msg = "Arbir.ru";
  var intervalId;
  var blink = function() {
    intervalId = setInterval(function() {
      /* document.title = document.title == msg ? ' ' : msg; */
      if (document.title == msg) {
        document.title = oldTitle;
      } else {
        document.title = msg;
      }
    }, 1000);
  };
  var clear = function() {
    clearInterval(intervalId);
    document.title = oldTitle;
    window.onmousemove = null;
    window.onmouseout = null;
    intervalId = null;
  };
  return function() {
    if (!intervalId) {
      blink();
      window.onmousemove = clear;
    }
  };
}());

/* Running the functions */

visibilityChange(comeBackAlerts);