Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >关于HTML面试题汇总之visibility

关于HTML面试题汇总之visibility

作者头像
sam dragon
发布于 2018-01-17 02:44:47
发布于 2018-01-17 02:44:47
86700
代码可运行
举报
文章被收录于专栏:cnblogscnblogs
运行总次数:0
代码可运行

一、页面可见性(visibility)

主要提供两个属性,一个事件(都在document对象上): 1. 属性:    1.1.  hidden:获取或设置当前页面的可见性,boolean值;    1.2. visibilityState: 获取当前页面可见性状态,值为hidden、visibility其中一个 2. 事件:visibilityChange:页面可见性发生改变时触发的事件

3. 由于各类浏览器的支持情况不一致,都需要加上私有属性的前缀,如 webkit、moz、ms、o等。在ie9-不支持。

3. 可见性的应用场景:   3.1. 视频播放的切换   3.2. 用户状态的验证

二、代码示例:

2.1. Utils类,提供page visibility的检测能力,主要实现兼容各种浏览器的能力:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const BROWER_PREFIX = ['webkit','moz','ms','o',''];
class Utils{
    constructor(){
      this.isPageVisibilitySupport = false;
      this.prefix = '';
    }
    /**
     * 获取驼峰命名格式的属性名
     * @param prefix {string} 前缀
     * @param value {string} 属性名
    */
    prefixToCamel( prefix, value){
      if(prefix){
        return prefix + value.slice(0,1).toUpperCase() + value.slice(1);
      }
      return value;
    }
    calculatePageVisibilitySupport(){
        var that = this;
        BROWER_PREFIX.forEach(function (data) {
          if(!that.isPageVisibilitySupport && document[that.prefixToCamel(data,'hidden')] != undefined ){
            that.isPageVisibilitySupport = true;
            that.prefix = data;
          }
        });
        return that.isPageVisibilitySupport;
    }
    isHidden(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,'hidden')];
        }
        return undefined;
    }
    visibilityState(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,"visibilitystate")];
        }
        return undefined;
    }
} 
export default Utils;
2.2. core类,提供外部可访问的静态方法和属性:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import utils from 'src/utils';
var _utils = new utils();
class Core {
    static visibilityChange(callback){
        if( _utils.calculatePageVisibilitySupport() && typeof callback == 'function'){
            return document.addEventListener(Core.prefix + 'visibilitychange',function(event){
                this.hidden = Core.hidden;
                this.visibilityState = Core.visibilityState;
                callback.call(this,event);
            });
            return undefined;
        }
    }
}
Core.hidden = _utils.isHidden();
Core.visibilityState = _utils.visibilityState();
export default Core;

visibilityChange方法:实现page visibility值改变时触事件绑定。

三、源码GIT地址

此包通过karma框架 + jasmine进行单元测试。源码通过babel

git@code.csdn.net:cqhaibin/visibilityproject.git

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-08-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Page Visibility API 教程
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
ruanyf
2018/11/22
6650
JavaScript 页面可见性 Page Visibility API 监听用户离开页面
Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
Leophen
2020/10/28
2.8K0
HTML5的这些api你知道吗?
摘要总结:本文主要介绍了移动端Web开发中一些常用的API,包括DeviceMotionEvent、DeviceOrientationEvent、Gyroscope、Compass、GPS、MediaStream和MediaRecorder,以及这些API在移动应用程序开发中的实际应用和注意事项。
IMWeb前端团队
2017/12/29
1.4K0
妙趣横生的HTML5 Page Visibility API
最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象。Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的
Jeff
2018/01/22
9680
妙趣横生的HTML5 Page Visibility API
浏览器visibilitychange事件
1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange
全栈程序员站长
2022/09/07
8390
前端常见技术点-HTML扫盲(17问)
根据 <!DOCTYPE> 是否存在选择呈现模式,被称为 <!DOCTYPE> 切换或 <!DOCTYPE> 侦测。
用户5997198
2019/08/09
6200
前端-如何精确统计页面停留时长
页面停留时间(Time on Page)简称 Tp,是网站分析中很常见的一个指标,用于反映用户在某些页面上停留时间的长短,传统的Tp统计方法会存在一定的统计盲区,比如无法监控单页应用,没有考虑用户切换Tab、最小化窗口等操作场景。 基于上述背景,重新调研和实现了精确统计页面停留时长的方案,需要 兼容单页应用和多页应用,并且不耦合或入侵业务代码。
grain先森
2019/03/29
10K0
前端-如何精确统计页面停留时长
animate is not a function(zepto 使用报错)
因为zepto默认构建包含: Core, Ajax, Event, Form, IE几个模块,要使用animate需要再引用fx模块。
White feathe
2021/12/08
9400
离开和进入html页面时改变title
离开和进入页面时改变网页标题,最近也才刚刚开始js学习,下面这段代码简单就是说访客如果离开你的网站之后,站点标题会发生变化。原理是使用了HTML5的Page Visibility API 目前页面可见性API有两个属性,一个事件:
qiangzai
2021/12/21
2.1K0
离开和进入html页面时改变title
浏览器的visibilitychange 事件ie10以下不兼容
方法1, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script> <script> /*** 切换浏览器tab,判断当前tab是否活跃 ***/
deepcc
2018/05/16
2.3K0
那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
9250
js判断用户进入和离开当前页面
VisibilityChange 事件;用于判断用户是否离开当前页面 // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidden let pageVisibility = document.visibilityState; // 监听 visibility change 事件 document.addEventListener('visibilitychange', function() { // 页面变为不可见时触发 if (do
河湾欢儿
2018/09/13
6.5K0
浏览器标签tab窗口切换时事件状态侦听
项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket
joshua317
2021/08/31
2.5K0
【JS】1676- 重学 JavaScript API - Page Visibility API
本文将介绍 Page Visibility API 的概念、使用方法、兼容性和实际应用案例。
pingan8787
2023/09/01
2470
【JS】1676- 重学 JavaScript API - Page Visibility API
你不知道的JavaScript APIs
这是一个鲜为人知的 web API,在JS现状调查[1]中,它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。
chuckQu
2022/11/28
1K0
你不知道的JavaScript APIs
display: none、visibility: hidden和opacity: 0的区别
display: none 和 opacity: 0,子元素会和父元素一样保持不可见。
lonelydawn
2022/09/27
8990
display: none、visibility: hidden和opacity: 0的区别
当前页面是否可见
Document.hidden属性来自于浏览器Page Visibility API。
公众号@魔术师卡颂
2020/08/26
2K0
Page Lifecycle API 教程
两周前,我介绍了 Page Visibility API。有了它,就可以监听各种情况的网页卸载。
ruanyf
2018/12/06
8830
Page Lifecycle API 教程
你不知道的JavaScript APIs
这个APi 可以让我们知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签,该API都会触发一个事件 visibilitychange 。
前端小智@大迁世界
2022/10/28
8220
JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件
用户9857551
2023/10/17
1.5K0
相关推荐
Page Visibility API 教程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验