logo标签列表

检测浏览器标签页/窗口是否处于活动状态

javascriptjquery
4

能否检测浏览器窗口的活动状态？

我尝试了：

$(window).on('focus', function(){
    console.log(1);
});
$(window).on('blur', function(){    
    console.log(2);    
});

但是它似乎只在用户点击窗口时起作用，当用户点击例如浏览器地址栏时会显示2。

我想要实现的是检测当前标签页是否为活动状态。

如何改进这段代码？

你无法检查那个。你可以检查的是用户是否将鼠标移动到选项卡上（但选项卡也可能处于活动状态，但鼠标在其他地方）。 - hffmr
3
现代浏览器提供了页面可见性API：http://caniuse.com/#search=page visibility - Mottie
1个回答
3

Active表示选项卡是可见的。但是，如果您想判断用户的鼠标是否直接在页面上，可以使用以下方法：

<html onmouseenter="document.getElementById('h1').innerHTML = 'active'"onmouseleave="document.getElementById('h1').innerHTML = 'not active'">
  <body style="width:100%;height:100px">
    <h1 id="h1">not active</h1>
  </body>
</html>

With the simple code above you can tell if the users mouse is on the page or not

编辑: 使用页面可见性API：

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} 
else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} 
else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} 
else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
    if (document[hidden]) {
        //Not visible, Do whatever
    }
    else {
        //Visible
    }
}

if (typeof document.addEventListener === "undefined" ||
    typeof document[hidden] === "undefined") {
    alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} 
else {
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接