js监听用户进入和离开当前页面

Berwin 发布于2019-08-26 14:06 / 1941人阅读

摘要：事件用于用户是否离开当前页面页面的属性可能返回三种状态，和监听事件页面变为不可见时触发离开页面变为可见时触发回来页面的属性离开回来

VisibilityChange 事件；用于用户是否离开当前页面

// 页面的 visibilityState属性可能返回三种状态 prerender，visible 和 hidden 
// 监听 visibility change 事件 
document.addEventListener("visibilitychange", function() {
  // 页面变为不可见时触发 
  if (document.visibilityState == "hidden") {
    document.title = "离开";
  } 
  // 页面变为可见时触发 
  if (document.visibilityState == "visible") { 
    document.title = "回来";
  } 
});

// 页面的 hidden属性,false,true;
document.addEventListener("visibilitychange",function(){
    var isHidden = document.hidden;
    if(isHidden){
        document.title = "离开";
    } else {
        document.title = "回来";
    }
});

混合云私有云 js离开页面页面离开提示js js关闭当前页面 js 重定向当前页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110049.html

PageVisibilityAPI简单易学教程演示

　　一、简介　　要知道用户何时离开，有常用的方法是监听下面三个事件。　　pagehide　　beforeunload　　unload　　可上述三种方法有一个bug就是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。　　用户点击了一条系统通知，切换到另一个 App。　　用户进入任务切换窗口，切换到另一个 App。　　用户点击了 Home 按钮，切换...

3403771864 2022-10-23 13:23 评论0 收藏0
Vue.js基础教程

摘要：自定义名称縮放控制器可以使用中的动画设计更为华丽的效果。在和中必须使用，不然它们会同时生效，动画也会瞬间完成。先在标签内加入，接着类似自定义动画可以给命名。文章链接：Vue.js基础教程开发工具准备：根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode；安装git base和node.js；安装vue-cli，命令npm i -g @vue/...

XboxYan 2019-08-23 15:24 评论0 收藏0
js全屏模式轻松掌握[局部元素全屏展示]

摘要：推荐这么做，因为如果每个都要这样重复的判断浏览器前缀，那也太恶心了浏览器是否支持全屏模式属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。 showImg(https://segmentfault.com/img/remote/1460000017229080?w=700&h=467); 我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播放的那种。感觉很强，前几个星期有个...

amc 2019-08-23 13:50 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

zhoutk 2019-08-02 16:04 评论0 收藏0