Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js 动态修改浏览器标签的 title

js 动态修改浏览器标签的 title

作者头像
卓越笔记
发布于 2023-02-18 05:50:27
发布于 2023-02-18 05:50:27
5.4K00
代码可运行
举报
文章被收录于专栏:卓越笔记卓越笔记
运行总次数:0
代码可运行

根据 浏览器标签是否隐藏 来更新浏览器标签的标题(PC 上的浏览器效果明显)。

django 前后端不分离项目的话,js 放在 base.html 模板里,其他模板继承 base.html,就可以全部页面都有标签 title 变化的效果了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>

    var cur_title = document.title;
    var titles = ["(。•ˇ‸ˇ•。)咦,你什么时候回来", "(((┏(; ̄▽ ̄)┛嗨,我一直在", "∑(っ°Д°;)っ哎呦,藏起来了",
        "(。ŏ_ŏ)哼,你居然走了", "(✪ω✪)哈哈,等你来撩"];
    var titles_back = ["你回来啦(^_−)☆", "欢迎回来(づ ̄ 3 ̄)づ"];
    document.addEventListener('visibilitychange', function () {
        var isHidden = document.hidden;
        var title_random = titles[Math.floor((Math.random() * titles.length))];
        var title_random_back = titles_back[Math.floor((Math.random() * titles_back.length))];
        if (isHidden) {
            document.title = title_random;
            setTimeout(function () {
                document.title = cur_title;
            }, 3000);
        } else {
            document.title = title_random_back;
            setTimeout(function () {
                document.title = cur_title;
            }, 1500);
        }
    });


</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-12-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/52
joshua317
2021/08/31
1.7K0
WordPress设置网站动态标题
前言 我们经常逛别人的网站,有些网站当我们离开该页面浏览其他页面的时候,我们在离开的页面上面会看到比如本站的“你别走吖 Σ(っ °Д °😉っ”这样的字样,当我们点回来的时候页面上面会看到“(/≧▽≦/)你又回来了!”的字样。那么我们如何实现呢?其实很简单,只需一句javascript语句即可实现。请看下面的教程。 样式图: 使用教程: 1.  把下面的代码放入主题目录下footer.php文件里的上面即可。 代码如下: //动态标题 var OriginTitile = document.title
小狐狸说事
2022/11/22
2.1K0
WordPress设置网站动态标题
浏览器标签tab窗口切换时事件状态侦听
项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket
joshua317
2021/08/31
2.5K0
Hexo博客 | 博客中能用到的代码(一)
这篇文章介绍了如何使用font awesome图标字体库,使用动态图标,添加网页运行时间,全站变黑白,鼠标点击特效,网页标题的动态效果,网页樱花特效,鼠标触动音乐特效,之前还介绍过打字机效果,可以看看这篇文章
Justlovesmile
2021/12/13
8920
Hexo博客 | 博客中能用到的代码(一)
博客美化
本文最后更新于2022年02月10日,已超过123天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
田小檬
2022/08/30
7280
JS代码实现浏览器网页标题的动态切换,略微提高网站粘性
前几天在微饭天空看到一个让我眼前一亮的分享,自己拿过来用了几天之后,感觉挺有意思,现在我略微改进一下并分享出来,方便更多人自定义成自己喜欢的内容。 一、原版分享 功能描述:当网页标签失去焦点切换到指定
张戈
2018/03/23
3.4K0
JS代码实现浏览器网页标题的动态切换,略微提高网站粘性
魔改笔记一:简单特效添加
当您想要为您的 Hexo-theme-butterfly 博客添加JavaScript效果时,您可以通过编辑配置文件 _config.butterfly.yml 来实现。以下是添加 JavaScript 的基本步骤:
柳神
2024/05/30
1010
魔改笔记一:简单特效添加
给网站增加有趣的动态网页标签标题
当离开我们博客的页面是,显示“╭(°A°`)╮ 页面崩溃啦 ~”,当回来后,显示“(ฅ>ω<*ฅ) 噫又好啦 ~”
目的地-Destination
2023/03/23
1.3K0
给网站增加有趣的动态网页标签标题
浏览器visibilitychange事件
1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange
全栈程序员站长
2022/09/07
8340
子比美化-网站动态标题
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
6030
js判断用户进入和离开当前页面
VisibilityChange 事件;用于判断用户是否离开当前页面 // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidden let pageVisibility = document.visibilityState; // 监听 visibility change 事件 document.addEventListener('visibilitychange', function() { // 页面变为不可见时触发 if (do
河湾欢儿
2018/09/13
6.4K0
b2主题中添加网页标题崩溃欺骗搞怪特效标题崩溃特效
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
7280
给WordPress设置网站动态标题
我们经常访问别人的网站。当我们离开这个页面浏览其他页面时,我们会在离开的页面上看到,比如这个网站的不要去Σ(っ °Д °;)っ当我们点击这样的单词时,页面上会看到(/≧▽≦你又回来了!字样。那我们怎样才能实现呢?其实很简单,只要一句 javascript 句子可以实现。请参阅以下教程。使用教程(以子比主题为演示)(详见本站动态标题)背景主题设置—>自定义代码—>自定义 javascript 代码可以通过添加以下代码来实现。
Hello-1
2022/08/30
1.6K0
Handsome主题美化
Github: https://github.com/mokeyjay/Pixiv-daily-top50-widget 主题设置 - 开发者设置 - 全局右侧广告位添加以下代码
Gujiu
2022/12/02
9630
js动态标题代码
把下面代码放到网站头部或底部就可以啦,嘻嘻简单吧 <script>var OriginTitile=document.title; var st; document.addEventListener('visibilitychange',function(){ if(document.hidden){ document.title="(つェ⊂)我藏好了哦"; clearTimeout(st); console.log('hide'); }els
Qicloud
2022/01/25
12.3K0
typecho设置标题栏自动变化
将代码复制粘贴到 自定义输出body 尾部的HTML代码 或者 post.php 里
今天风真的好大好大啊
2022/04/02
8300
【叔小生】JavaScript进阶篇
如何插入JS JS基础语法 语法、函数、方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。
达达前端
2019/08/01
1.2K0
【叔小生】JavaScript进阶篇
个人博客主题自定义常用工具
雪花效果 <script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.6/js/snow3.js"></script> 雪花特效 <script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-it
卡伊德
2022/09/13
4080
分享几段有趣的代码(一)
到处闲逛时经常能发现一些有趣的代码段,于是干脆来个大杂烩吧~ 狡猾的标题栏 这个效果很多博客都使用了,看gif图: 很有趣是不是?实现的代码也很简单,在网页的任意地方加入即可:
夏时
2018/06/26
3.9K0
判断用户是否切换浏览器tab或切换任务Page Visibility
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
javascript.shop
2019/09/04
3.7K0
判断用户是否切换浏览器tab或切换任务Page Visibility
相关推荐
document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验