• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5中判断用户是否正在浏览页面的方法

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

    document.hidden

    这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

    document.visibilityState

    visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。).

    visibilitychange事件

    监听页面可见性变化非常容易:

    复制代码
    代码如下:

    // 各种浏览器兼容
    var hidden, state, visibilityChange;
    if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
    }</p> <p>// 添加监听器,在title里显示状态变化
    document.addEventListener(visibilityChange, function() {
    document.title = document[state];
    }, false);</p> <p>// 初始化
    document.title = document[state];

    上面的代码会在页面可见性发生变化时修改document.title的值!

    那么,什么时候需要使用visibilitychange事件呢?比如,如果你的页面上有嵌入视频正在播放,当用户切换到其它标签页时,你的标签页上的视频应自动暂停播放,当用户切换回来时继续接着播放。再比如,如果你的页面有自动刷新动作,当用户切换到其它标签页时,你就应该停止刷新,而当用户切换回来时继续之前的动作。

    上一篇:在HTML5 Canvas中放入图片和保存为图片的方法
    下一篇:HTML5 visibilityState属性详细介绍和使用实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML5中判断用户是否正在浏览页面的方法 HTML5,中,判断,用户,是否,