共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。
问题形容
咱们先看上面这一张效果图:
效果图
需要
当来到或进入 tab 标签页时,动静更改 tab 的 title 内容显示
解决方案
其实很简略,只是一时间咱们可能想不到,不过 Web 的创造设计者们,早就想到了,并提供了相干的 api
监听 visibilitychange 事件搭配 document.hidden 属性值
visibilitychange
visibilitychange
是一个事件名- 此事件的触发取决于选项卡的内容可见或被暗藏时
- 能够应用
document
去监听这个事件的变动,从而做一些逻辑的操作
document.hidden
- 示意页面是(true)否(false)暗藏
- 能够了解为进入 tab 标签页和来到 tab 标签页
另有
document.visibilityState
为visible
或hidden(罕用)
,一个意思
晓得这两个 api,那相干的需要,就能解决啦
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="http://ashuai.work/static/img/avantar.png">
<title>😄欢送欢送😄</title>
</head>
<body>
<script>
/**
* 标签页题目切换
* */
// 监听 visibilitychange 事件
document.addEventListener("visibilitychange", function () {console.log('document.visibilityState', document.visibilityState);
// 若是来到此 tab 标签页
if (document.hidden) {document.title = "😭你快回来😭"}
// 若是进入此 tab 标签页
else {document.title = "😄欢送欢送😄"}
});
</script>
</body>
</html>
延长应用场景
实际上,在工作中,页面来到或暗藏触发相应的逻辑,还是有一些场景的。如下:
- 在当前页播放音乐,来到当前页暂停音乐
- 在线做面试题时,看看求职者有没有来到以后 tab 页,去百度答案啥的
- 来到以后 tab 页,给页面加上明码,进入时需输出明码(隐衷平安问题)
- 一些 blog 的 title 成果,比方笔者的这个 blog:http://ashuai.work:8890/
官网 api 地址:
- visibilitychange:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis…
- document.hidden:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden
- visibilityState:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/vis…
正文完
发表至: javascript
2023-04-02