美文网首页
HTML5 visibilityChange-webkitvis

HTML5 visibilityChange-webkitvis

作者: MrOldK | 来源:发表于2018-04-17 11:49 被阅读93次

visibilitychange事件在当前网页在可见和不可见之间变换的时候调用,注意,是网页整体可见和不可见,不是网页刷新或者关闭或者其他操作跳转而不可见,是没有对网页本身操作。比如用户正在刷微博,刷到一半切去看视频了,这个时候微博就能通过visibilitychange发现用户没有看自己了,可以根据实际需要暂停请求或者一些别的操作,等用户切回来的时候继续加载。
通过document的hidden属性可以判断标签是否可见。true时代表标签不可见。
这个事件适合在标签不可见的时候减少网络请求、服务器压力等,也可以做一些好玩的事情,比如改变网页标题的文字。

document.addEventListener("visibilitychange webkitvisibilitychange", function(){
      var tag = document.hidden || document.webkitHidden;
      if (tag) {
       alert('走了')
      }else{
       alert('来了')
      }
    });

有的同学可能会和pagehide事件混淆,pagehide事件的定义是用户离开网页时触发,离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。这个事件是用户在当前网页进行操作时触发的。例如当你点击关闭网页时,会弹出 是否要关闭这个网页 的confirm弹框,或者点击页面内一个链接,网页会弹出是否跳转的confirm弹框,也就是你的事件操作会让这个页面消失,就会触发pagehide 事件。而visibilitychange事件是用户转移到另一个窗口并且当前页面还会存在的情况下触发的。

相关文章

  • HTML5 visibilityChange-webkitvis

    visibilitychange事件在当前网页在可见和不可见之间变换的时候调用,注意,是网页整体可见和不可见,不是...

  • HTML5语法,标签, 属性

    @(HTML5)[HTML5 语法, HTML5标签, HTML5属性] [TOC] 一 、HTML5语法,标签,...

  • HTML5常用的标签

    目录: HTML5新结构标签 HTML5新其他标签 HTML5新input类型 HTML5新属性 HTML5高级应...

  • 初识HTML5

    html5 ≈ html5新增标签以及规范 html5 ≈ html5新增标签 + css3 + JavaScri...

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • HTML5视频与音频

    @(HTML5)[HTML5视频与音频] [TOC] 十二、HTML5视频与音频 简单介绍HTML5 对视频和音频...

网友评论

      本文标题:HTML5 visibilityChange-webkitvis

      本文链接:https://www.haomeiwen.com/subject/vyuukftx.html