JS检测页面是否被隐藏

已于 2024-07-10 12:45:29 修改
阅读量353 收藏
点赞数 2
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2024-02-21 15:25:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zghnpdswyp/article/details/136212966
版权
本文介绍了如何在JavaScript中使用不同浏览器的私有API（如hidden和visibilityChange）来检测页面是否被隐藏，通过添加事件监听器实现在各种浏览器环境中的兼容性处理。
摘要由CSDN通过智能技术生成 
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";
}
 
// 添加监听器
document.addEventListener(visibilityChange, function() {
    console.log("当前页面是否被隐藏：" + document[hidden]);
}, false);

王翼鹏
关注
专栏目录
js判断元素是否隐藏的方法
10-25
主要介绍了js判断元素是否隐藏的方法,需要的朋友可以参考下
javascript检测页面是否缩放的小例子
10-27
在给定的文件信息中，我们关注的是“javascript检测页面是否缩放的小例子”，它展示了一个如何通过JavaScript和jQuery实现页面缩放检测的简单示例。尽管示例说明只在Chrome浏览器中进行了测试，但其原理在多数现代...
页面可见性判断：document.hidden与visibilitychange事件
setsunadoudou的博客
10-07 725
　　我们需要在特定的时候判断页面的显示状态，例如：当视频加载到可播放状态时，根据用户是否停留在当前页面来决定是否开始自动播放。页面的展示的状态的判断就需要用到html5新增的一个api：documen...
js监听页面的显示和隐藏
最新发布
weixin_43617604的博客
05-06 1016
下方微信公众号 和微信小程序推荐。
js判断元素是否隐藏
it_xin_shou的博客
09-24 426
点击隐藏和显示 <div class="list"> 报名 </div> <div class="content" id="content" style="display: none; width:100px;height:100px; background:red"> </div> //jquery 点击事件 $ (’.list’).click(function(){ //判断元素是否隐藏 if($(
JS判断元素是否隐藏
编程书生的博客
08-09 792
判断元素是否隐藏 echo.js 源码 var isHidden = function(element) { return (element.offsetParent === null); }; 经过自己实践确实可以使用这种方法来判断当前元素是否被隐藏，包括通过设置父元素为display:none以及自己本身为none的情况。但是如果是通过设置visibility:hidden则无法检测出。 ...
js检测离开或刷新页面时表单数据是否更改的方法
10-21
需要注意的是，虽然`onbeforeunload`事件可以用来检测页面数据是否更改，但有些浏览器在用户没有进行任何输入操作时可能不会触发这个事件。因此，对于简单的场景，开发者也可以考虑使用HTML5提供的`<input>`和`...
基于javascript实现碰撞检测
10-15
本教程将深入探讨如何使用JavaScript实现基本的二维碰撞检测，以一个简单的HTML页面为例，展示了两个可移动的div元素（一个红色，一个黄色）之间的碰撞检测。 首先，我们要理解碰撞检测的基本概念。碰撞检测通常...
JS检测特定字体是否已安装在用户设备上
03-19
本文将详细介绍如何使用JavaScript来检测特定字体是否已安装在用户设备上。 一、检测字体的基本原理 检测字体通常依赖于浏览器的`@font-face`规则和`document.fonts`接口。通过创建一个隐藏的元素，并尝试为其设置...
js判断滚动条是否已到页面最底部或顶部实例
03-16
如果我们要检测滚动条是否已经到达页面底部，可以利用window对象的onscroll事件。当滚动条移动时，我们可以通过计算滚动条的垂直位置（通过document.documentElement.scrollTop或document.body.scrollTop获取）与...
javascript判断元素是否隐藏
ISaiSai的专栏
11-13 2234
jquery中通过  $("#subContent").is(":hidden");  ishidden weilei jQuery.expr.filters.hidden = function( elem ) { // Support: Opera // Opera reports offsetWidths and offsetHeights less than zero
如何通过JS判断一个元素是否显示、隐藏
热门推荐
bug处理进行时
05-08 1万+
无论元素是通过设置dispaly还是通过添加伪类:hidden来进行的控制，都可以使用其中一种方式进行判断。即：如果元素是通过添加伪类实现的隐藏，依旧可以通过display来进行判断。通过判断当前元素的display的值来判断当前元素是否是可见状态。只能用display来对none进行对比判断。因为可见元素的状态可能是block、inline等。
js判断页面元素是否隐藏
往南的博客
09-18 542
代码： var display =$('#id').css('display'); if(display == 'none'){ alert("我是隐藏元素！"); } 注意：需要引入 jQuery.js 文件
js判断div是否隐藏
weixin_34318326的博客
08-24 605
1 if( document.getElementById("div").css("display")==='none') {} 2 3 if( document.getElementById("div").css("display")==='block') {} 4 5 $("#div").is(":hidden"){}; // 判断是否隐藏 6 7 $("#div")....
JS监听页面是否被隐藏和显示
weixin_45119097的博客
11-01 3294
JS监听页面是否被隐藏和显示
js判断元素是否隐藏、显示
七色花
08-11 7182
js判断元素是否隐藏、显示的几种方法：第一种：使用CSS属性var display =$('#id').css('display'); if(display == 'none'){ alert("隐藏"); } 第二种：使用jquery内置选择器 1. if($("#test").is(":hidden")){ $("#test").show(); //如果元素
原生Js判断元素是否隐藏
weixin_33924220的博客
05-08 1185
刚刚在看echo.js的源码，所以此问题延伸自echo.js中的一行代码 var isHidden = function(element) { return (element.offsetParent === null); }; 经过自己实践确实可以使用这种方法来判断当前元素是否被隐藏，包括通过设置父元素为display:non...
js 控制页面的隐藏与显示
Kiss_Fly的专栏
01-07 583
var obj= document.getElementById("obj")； 隐藏 ：  obj.style.display = "none"; 显示 ：  obj.style.display = "block";
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值