Question

我有一个javascript计时器，它会不断地（每10秒一次）发出XMLHTTP请求。我希望能够在窗口或标签失去焦点时暂停计时器。

我完全了解onFocus对象上的onBlur和window事件，但它们无法在所有浏览器中可靠地触发。例如，in Safari, tabs don't trigger the events。

下面的简单代码提炼了我正在寻找的功能：

<html>
  <head>
    <title>Testing</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  </head>
  <body>
    <div id="console"></div>
    <script type="text/javascript">
      window.onfocus = function(event) {
        $('console').insert('Window gained focus<br />');
      }

      window.onblur = function(event) {
        $('console').insert('Window lost focus<br />');
      }
    </script>
  </body>
</html>

有没有人有一种技术可以确定浏览器窗口或标签何时失去/获得适用于所有流行浏览器的焦点？

Answer 1

上面的代码在Safari v3.0.4（WebKit 530+）中工作正常，这个bug似乎已经解决了。我已经在Google Chrome v3.0.195.27中检查了它并且它有相同的Safari错误，尽管它有更新版本的WebKit。

Answer 2

关于此主题还有另一个Stack Overflow问题。他们没有解决那里的标签浏览问题。虽然没有使用jquery，但它们确实给出了一些细节的链接。

Is there a way to detect if a browser window is not currently active?

我认为焦点/模糊事件根本不适用于Safari中的选项卡式浏览。有些人建议鼠标事件，例如mouseleave / mouseenter。

我自己也有一些这样的UI问题，所以如果我发现了什么，我会在这里跟进。

Answer 3

我以前绝望的尝试找到这样的东西让我得出结论，没有这样的动物。

哦，我多么希望自己错了。

Answer 4

<script>

    // Adapted slightly from Sam Dutton
    // Set name of hidden property and visibility change event
    // since some browsers only offer vendor-prefixed support
    var hidden, state, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
    }

    // Add a listener that constantly changes the title
    document.addEventListener(visibilityChange, function() {
        document.title = document[state];
    }, false);

    // Set the initial value
    document.title = document[state];

</script>

Answer 5

需要考虑的一件事是浏览器供应商阻止的标签 focus / blur事件可能是保护用户的一种方式。有些浏览器允许使用alert()式弹出窗口（甚至，我相信，focus()方法）使标签重新获得焦点。阻止用于制表符切换的focus / blur事件可能类似于保护，例如，未经请求的弹出窗口和窗口大小调整/定位/关闭。

是否有可靠的方法来确定浏览器选项卡或窗口是否处于非活动状态？

5 个答案: