使用Page Visibility监听网页是否处于激活（可见）状态

最新推荐文章于 2024-05-06 15:03:20 发布
最新推荐文章于 2024-05-06 15:03:20 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： html/css 文章标签： 网页激活
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014291497/article/details/53495192
版权
本文介绍了如何利用Page Visibility API来监测网页是否处于激活（可见）状态，以实现如离开页面时自动暂停视频等功能。通过这个API，可以更准确地判断用户是否可见网页，区别于传统的focus和blur事件，后者只关注窗口焦点变化。
摘要由CSDN通过智能技术生成

在饿了么点外卖的时候你会发现，如果你离开此页的话他的网页title会改变：
这里写图片描述

在这里虽然显得没那么重要，但是如果当前你在播放视频，离开此页的话我们可以实现自动暂停功能，还是挺方便的。

实现这个功能主要用到了Page Visibility API 这个功能。参考地址：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

比如我们写一个简单的示例，当我们切换到其他页面的时候改变该页面的title。

<script>
(function() {
    var
最低0.47元/天 解锁文章
justforuse
关注
专栏目录
前端性能优化原理篇——Page Lifecycle
foolbird
04-23 1018
前端性能优化原理篇——Page Lifecycle 文章目录前端性能优化原理篇——Page Lifecycle导读生命周期概述好奇解决的问题生命周期状态与事件状态事件跨浏览器兼容建议与实践对每个状态下的建议避免使用老旧的生命周期API数据采集上报启发与实践FAQs参考 导读 原文链接 性能，一直都是前端孜孜不倦探讨的话题。说到生命周期想必大家都不陌生，这都是 React 、Vue 等框架设计的核心理念，它大致都提供了数据初始化、DOM 加载、资源释放等时机钩子供大家合理使用，例如 React shouldC
js监听浏览器窗口被激活
LLG
03-29 2689
背景： A系统需要依赖于B系统的填报功能，在B系统填报完成后调用close方法关闭B系统；此时浏览器自主激活A系统窗口，激活A系统浏览窗口时需要更新数据状态，因此需要刷新A系统数据列表。 方案：使用js的addEventListener和removeEventListener方法配合实现该操作。代码如下： // 原生浏览器窗户是否被激活方法 export function monitorWindowStatus(self) { // 不同浏览器 hidden 名称 let hidde
Ifvisible.js 检查当前网页是否处于激活状态
cuoban的学习空间
04-29 1597
Ifvisible.js 是一个跨浏览器、轻量级的方式，用户检查用户在浏览页面或正在与它进行交互。它可以处理活动状态，如在页面上空闲或活跃。您还可以使用 ifvisible.js 智能设置您的间隔，如果用户是空闲或没有看到页面的间隔时间会自动停止。 在示例网页中，空闲持续时间设置为 30 秒，这样您就可以轻松地看到效果，如果在 30 秒的时间内，该网页没有任何来自用户的操作，那么网页将添加一个白...
js监听页面可见性
zyq_1020的博客
07-15 513
js监听页面可见性 document.addEventListener("visibilitychange",function(){ console.log(document.visibilityState) if(document.visibilityState=="visible"){ console.log("浏览切换到当前页面") $(".iframe").attr("src",sessionStorage.getItem("path"));
监听视窗的激活状态
肖肖肖丽珠的博客
01-14 401
监听视窗的激活状态：一些网站，提醒你不能离开当前窗口 //窗口激活状态监听 letvEvent='visibilitychange'; if(document.webkitHidden!=undefined){ vEvent='webkitvisibilitychange'; } functionvisibilityChanged(){ if(document.hidden||document.webkitHidden){ doc...
js监听页面的显示和隐藏
最新发布
weixin_43617604的博客
05-06 787
下方微信公众号 和微信小程序推荐。
document API之visibilitychange事件：判断页面可见性
破茧
06-05 4198
文章目录前言以下是我项目中使用到的代码以下是查阅中觉得比较好的该API的属性和事件：应用实例场景：带有声音的视频：兼容性处理visibilitychange监听事件 前言 开发过程中，遇到了小程序内嵌的网页小游戏在小程序点击右上角那个圆点退出时，游戏的音乐没有关闭，并且逻辑也没有停止。因为是内嵌的网页，因此，这个已经跳脱了小程序的生命周期，只能从网页层面入手，上网查了一些资料，发现了这个Visibilitychange事件 visibilitychange事件是浏览器新添加的一个事件， 当浏览器的某个标签页
HTML5中判断用户是否正在浏览页面的方法
09-28
HTML5引入了一项重要的特性，即页面可见性接口（Page Visibility API），这使得开发者能够检测用户是否当前正在查看他们的网页。这一功能对于优化用户体验、节省资源以及实现更智能的交互至关重要。页面可见性接口...
Web开发者的最爱5个超实用的HTML5API.pdf
09-27
当用户最小化浏览器窗口、切换标签页或进行其他操作导致页面不再可见时，Page Visibility API就能派上用场。通过监听visibilitychange事件，可以得知页面状态的变化，并执行相应的逻辑处理。 代码中通过检查...
页面激活判断
dgqvhtlwq472235338的博客
01-12 128
第一种：js版 //页面激活判断 var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : ...
JS监听页面是否被隐藏和显示
weixin_45119097的博客
11-01 3227
JS监听页面是否被隐藏和显示
vue滚动监听动态更新激活吸顶导航
草稿记录站
12-27 408
前言 实现效果：导航栏目随着滚动到页面头部并固定在顶部，随后顶部tab有页面的滚动项目对应激活更新 一、安装依赖及引入 npm install vue-waypoint --save-dev main.js添加 import VueWaypoint from 'vue-waypoint' // Waypoint plugin Vue.use(VueWaypoint) 二、组件代码 <template> <div> <div class="nav">
js监听页面的可见的变化
huai42717的博客
12-03 2096
当切换页面时，有些程序还是在进行就有可能导致页面样式乱，就监听页面可见时的变化。html js 当我们切换页面时让程序停止，切换回来时在让程序运行。
js判断当前页面是否是显示状态
qiankui的博客
08-24 2504
项目需求是，当前页面处于可见状态时，定时像服务端发送数据，切换浏览器标签页、浏览器最小化时则停止定时器，使用document.visibilityState可以实现
窗口监听,关闭窗口，激活窗口
pangiggs的博客
06-06 167
public class TestWindows { public static void main(String[] args) { new WindowFrame(); } } class WindowFrame extends Frame{ public WindowFrame() { setVisible(true); setBackground(Color.BLUE); setBounds(100,100,200,200);
js如何判断当前页面是否处于激活状态
qiankui的博客
08-24 1291
js检测浏览器是否处于激活状态
浏览器监控事件-关闭、离开、可见性(visibilitychange,onbeforeunload,onunload)
宁静致远
07-15 4416
上次做项目需要监控浏览器是否处于激活状态，以及是否刷新和关闭，根据不同的状态进行不同的操作，这里整理一下这几个相差事件。 事件说明： window.onload：加载事件在页面内容加载完成之后立即执行相应的函数 window.onbeforeunload：即将离开页面（刷新或关闭）时触发 window.onunload：用户离开页面时触发 visibilitychange：事件判断页面可...
XAML中如何设置根据某个绑定特定数据判断visibility是否可见
06-10
您可以使用`DataTrigger`来根据某个绑定特定数据判断`Visibility`是否可见。下面是一个示例： ```xml <Grid> <Grid.Resources> <BooleanToVisibilityConverter x:Key="boolToVis"/> </Grid.Resources> <Grid.Style> <Style TargetType="Grid"> <Setter Property="Visibility" Value="Collapsed"/> <Style.Triggers> <DataTrigger Binding="{Binding IsVisible}" Value="True"> <Setter Property="Visibility" Value="{Binding Visible, Converter={StaticResource boolToVis}}"/> </DataTrigger> </Style.Triggers> </Style> </Grid.Style> </Grid> ``` 在这个示例中，`IsVisible`是您要绑定的特定数据，如果它的值为`True`，则该`Grid`的`Visibility`属性将设置为您所绑定的`Visible`属性，该属性通过`BooleanToVisibilityConverter`转换为`Visibility`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值