首页 > 其他分享 >HTML:页面可见性

HTML:页面可见性

时间:2023-01-16 17:12:11浏览次数:39  
标签:visibilityState 可见 HTML visibilitychange hidden document 页面

页面可见性:用来判断用户是否正在浏览某个指定标签页

HTML5提供了这样一个方法:visibilitychange页面事件来判断当前页面可见状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用

常用api如下:

  • document.hidden:这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为true或者false
  • document.visibilityState:visibilityState的值要么是visible,表明页面为浏览器当前激活tab,而且窗口不是最小化。要么是hidden,表示页面不是当前激活tab或者最小化了;或者prerender,表示页面在重新生成,对用户不可见
  • visibilitychange事件:监听页面可见性变化事件

示例:

<body>
    <h1>欢迎光临!</h1>
    <script>
        document.addEventListener('visibilitychange',function(){
          if(document.visibilityState =="hidden"){
            document.title = '去哪儿?快回来'
          }
          if(document.visibilityState =="visible"){
            document.title = '哦宝贝,想死你了'
          }
        })
    </script>
</body>

效果:

 

 

 使用场景:

  • 网站有图片轮播效果,只有用户在观看轮播的时候,才会自动展示下一张幻灯片
  • 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新
  • 页面想要检测是否正在渲染,以便可以准确计算网页浏览量
  • 当设备进入待机模式时,网站想要关闭设备声音

 

标签:visibilityState,可见,HTML,visibilitychange,hidden,document,页面
From: https://www.cnblogs.com/Luffy-RedRoc/p/17055862.html

相关文章

  • 由经典面试题(从输入url到页面展示的详细过程)梳理前端知识体系
    前言本文的目标是梳理一个相对完整的前端向知识体系,本文是前端向,以前端领域的知识为重点前端向知识的重点首先明确,计算机方面的知识是可以无穷无尽的挖的,而本文的重点是梳理......
  • HTML:SEO
    什么是SEO?seo中文译为针对搜索引擎优化,是指从自然搜索结果获得网站流量的技术和过程,是在了解搜索引擎自然排名机制的基础上,对网站内部外部的调整优化,改进网站在搜索引擎......
  • HTML之元素、属性、标题、段落【笔记小结】
    (HTML之元素、属性、标题、段落【笔记小结】)1元素1.1语法示例:开始标签元素内容结束标签<p>段落</p><a>链接</a><br>换行语法:#以开......
  • HTML5 以上超大文件上传和断点续传服务器的实现
    ​ IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag     ......
  • 元素定位之--frame嵌套页面元素定位
    案例:在Frame.html文件种定位搜狗搜索页面,进行搜索操作。fromseleniumimportwebdriverfromtimeimportsleepdriver=webdriver.Firefox()#设置网页文件路径,r代表路......
  • HTML:W3C标准组织
    W3C指的是万维网联盟(WorldWideWebConsortium),主要工作是对web进行标准化。早期不同浏览器厂商对于解析网页的标准是不同的,开发人员需要做大量的兼容,于是制定w3c标准,统一......
  • HTML:语义化
    什么是语义元素?很多html标签具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内......
  • HTML 简介
    1.网页1.1什么是网页:网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML格式的文件,它要......
  • HTML:文档声明<!DOCTYPE>、严格模式、怪异模式
    1、什么是<!DOCTYPE><!DOCTYPEhtml><!DOCTYPE>是一个文档声明,它不是HTML标签,而是一条信息,告知浏览器期望的文档类型,帮助浏览器确定其尝试解析和显示的HTML文档类型。......
  • 前端性能优化 前端预加载 提前下载资源文件 图片 提升页面打开速度
    项目使用vue3+tsconstprogressNum=ref(0); //下载进度//提前下载文件资源constrequestFun=(url:string,name:string)=>{ letxhr=newXMLHttpReques......