JS实现判断用户离开当前页面功能

前言

正如你所见,这个网站上使用了JS用来判断当前用户是否离开本页面。

当你离开本页面时,标题栏会显示

快回来快回来~-王政乔|中国

当你返回本页面时,标题又自动恢复成原来的样子。

这是怎么实现的呢?

接下来教你如何使用

教程

第一步:在母版页或所有页面中指定位置添加代码

这是教程的第一步。

如果你的网站具有统一的风格(这是一般情况),如统一的Head、不同的Body和统一的Bottom,那你可以在Head中添加下方的代码,将其中内容修改即可。

反之,那就需要你每个页面自己动手咯。

由于现在大部分H5支持Javascript,因此下方代码直接复制粘贴即可。

<script>
    var titleLocked = false;
    var showTitle;
    if (!titleLocked){
        showTitle = document.title;
    }
    document.addEventListener('visibilitychange',function(){
        var isHidden = document.hidden;
        if(isHidden){
            document.title = '快回来快回来~-王政乔|中国';
        } else {
             document.title = showTitle;
        }
    }
);
</script>

第二步:测试

保存好代码,就可以直接进行测试了。如果成功了,麻烦点下赞,评论区留个言哈~。

代码解析

代码主要用了visibilitychange这一事件,JS通过添加这一事件的监听器从而实现这一效果。唯一需要值得注意的地方是为了显示原来的标题,需要提前将该标题以变量方式保存~

Advertisements

容我提两嘴

可惜中文支持不好,留下你的姓名邮箱之后走吧,网站和Email都不会显示,广告党们不用想了,必须审核才能通过显示的。

Advertisements