js 判断 是否在当前页面

摘要:
1.使用visibilitychange浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.document.addEventListener("visibilitychange",function(){console.log(document.visibilityState);if(document.visibilityState=="hidden"){console.lo

1.使用visibilitychange

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.

复制代码
document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
    if(document.visibilityState == "hidden") {
        console.log('隐藏');
    } else if (document.visibilityState == "visible") {
        console.log('显示')
    }
});
复制代码

2.使用onblur和onfocus

通过获取失去焦点判断页面是否在最前端

复制代码
var count = 1;
var interval_output = null;
     
function output_number() {
    document.body.innerHTML += (count + " ");
    count++;
}
     
// window 失去焦点,停止输出
window.onblur = function() {
    clearInterval(interval_output);
};
     
// window 每次获得焦点
window.onfocus = function() {
    // 每 1 秒在页面输出一个数
    interval_output = setInterval(function() {
        output_number();
    }, 1000);
}
复制代码

免责声明:文章转载自《js 判断 是否在当前页面》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Python -- 限流 throttle在 Vue+TypeScript 项目中,如何配置 ESLint 和 Prettier下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

关于HTML、js加密、混淆、源码保护、代码安全,防止解压直接看源码

一直有人问HTML加密混淆怎么做,其实这在业内是早已很多人研究过的课题。假日期间整理一篇文章分享给大家。 我们先理下需求,加密的目的是什么?加密到什么级别?为此我们可以牺牲什么?我们知道这个世界不存在绝对的安全,加密会被破解、混淆会被反混淆。技术小白、开发者、黑客,是完全不同的级别,防范不同级别的人策略都不一样。防范力度越大,投入代价也越大,比如聘请专业的...

nodejs使用pkg打包

Node.js应用不需要经过编译过程,可以直接把源代码拷贝到部署机上执行,确实比C++、Java这类编译型应用部署方便。然而,Node.js应用执行需要有运行环境,意味着你需要先在部署机器上安装Node.js。虽说没有麻烦到哪里去,但毕竟多了一个步骤,特别是对于离线环境下的部署机,麻烦程度还要上升一级。假设你用Node.js写一些小的桌面级工具软件,部署到...

js中遇到的一个小问题,关于Uncaught ReferenceError:XXX is not defined at HTMLAnchorElement.onclick报错

一、报错代码及原因 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="javascript:void(0)" onclick="init()">点我<...

JS === 实现简易调色板

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin:0;padding:0;} .box{ 500px;height: 400px;...

js读取文件fileReader

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xm...

jQuery 分步引导 插件

转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验。往往这个时候都 会给你的站点(应用)添加一个分步指引的效果。然而这样的效果,对于不懂原生js的同学来说,是件蛮头痛的事情。不过大家不要慌,根据 Webreso...