当浏览器选项卡/窗口处于活动状态时进行检测
Detect when browser tab/window is active
是否可以检测浏览器窗口何时处于活动/非活动
我确实尝试过:
$(window).on('focus', function(){
console.log(1);
});
$(window).on('blur', function(){
console.log(2);
});
但它似乎只有在用户点击窗口时才起作用。但是当用户点击例如浏览器地址栏时显示2。
我想要实现的是检测当前选项卡何时处于活动状态。
如何改进此代码?
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>
通过上面的简单代码,你可以判断用户的鼠标是否在页面上
编辑:使用页面可见性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);
相关文章:
- 在Angular 2中布线期间保持零部件处于活动状态
- 如何使bxslider仅在移动视图中处于活动状态
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- 返回上一页时,Javascript仍处于活动状态
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- 按钮处于活动状态,焦点无法在Mac FireFox上工作
- 禁用永久活动状态
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- Facebook API - 检测会话是否处于活动状态
- 检测浏览器选项卡是否处于活动状态或用户是否已切换
- jQuery webcam/flash:如何检测网络摄像头是否处于活动状态
- 检测文本溢出:省略号在输入字段上是否处于活动状态
- 是否有任何方法可以检测IE8中该窗口当前处于活动状态
- 当浏览器选项卡/窗口处于活动状态时进行检测
- 检测浏览器窗口是否处于活动状态,并在窗口再次处于活动状态后启动事件[JavaScript]
- 如果移动浏览器未打开或处于活动状态,请在Javascript/jQuery中进行检测
- Phonegap检测手机是否处于活动状态
- 检测选项卡是否处于活动状态?(不同于focus)