页面不可见时触发事件

最新推荐文章于 2022-12-08 17:02:03 发布
转载 最新推荐文章于 2022-12-08 17:02:03 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/stubborn-donkey/p/10249411.html

应用场景：页面进入后台时暂停背景音乐，再次进入时重新播放

load()方法可以加在body onload事件中，也可以等页面加载完成后执行

var hidden, visibilityChange;

function load()
{
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    document.addEventListener(visibilityChange, function () {
        console.log("当前页面是否被隐藏：" + document[hidden]);
        if (document[hidden])
            $("#_wxbgm")[0].pause();
        else
            $("#_wxbgm")[0].play();
    }, false);
}

 

转载于:https://www.cnblogs.com/stubborn-donkey/p/10249411.html

denglankui0596
关注
Android——显示时间和暂停时间（Handler类操作线程）
08-02
NULL 博文链接：https://z18022893621.iteye.com/blog/1965120
Animatejs当元素可见时触发动画
08-10
在这个场景中，“Animatejs当元素可见时触发动画”指的是利用Animate.js库来实现一种智能的动画机制，即只有当网页元素进入视口（用户可以看到的部分）时，才开始执行相应的动画效果，提高用户体验并优化性能。...
网页内容不显示 按钮无法触发提交事件
robot的学习日志
02-14 2199
当网页Head部分有js引用时,如果最后一个js的引用方法如下（src属性少了一个双引号）： 这是网页里面的所以内容都无法显示。 如果在页面的body部分添加有js代码时，所有form表单都无法提交。
visibility:hidden的元素绑定click event会起作用吗
qq_21058391的博客
10-12 9173
有时候，你使用了flex布局，但是不得不隐藏某个元素 1）若display:none,则破坏了原有的布局。不可行 2）visibility:hidden则占据原来的位置，很方便， 但元素现在可以点击吗？答案是不可以的。设为visibility:hidden后，元素现在是不可以选择的 既然无法选择，即使绑定了click事件，也自然无法点击啦！
Javascript 判断页面不可见时不做处理 Page Visibility API
kevin_Luan的专栏
07-16 2710
原文链接：http://www.javaarch.net/jiagoushi/661.htm 如果页面不是显示在用户当前可视窗口，比如chrome，不在当前显示的tab页，那么我们可能不需要2s调用，因为那样只会浪费网络请求，查询了数据也没用，用户没有看到。那么我们就可以使用Page Visibility API来判断当前页是否是可视的tab上，如果是我们再去查，不是我们就不查了。Chrome，
vue中使用visibilitychange事件来获取页面当前可见性
不畏惧被人讨厌而是勇往直前，不随波逐流而是激流勇进，这才是对人而言的自由。
12-08 5185
通过document 原生API visibilitychange 来获取页面当前可见性的状态
Bootstrap Modal对话框如何在关闭时触发事件
11-26
Bootstrap模态对话框（Modal）是网页设计中常用的一个组件，它允许在不离开当前页面的情况下展示信息或交互。在Bootstrap中，模态对话框提供了一系列的事件，可以帮助开发者更精细地控制模态框的生命周期，包括在...
两个div叠加触发事件发生闪烁问题的解决方法
09-24
再试用`toggle`事件，期望通过切换`div2`的可见性来解决问题，但依然无效，因为`toggle`会在每次触发事件时切换元素状态，导致闪烁。 最后，我们发现一个更有效的解决方案，那就是利用CSS的`:hover`伪类。这种方法...
判断滚动条滑到底部触发事件(实例讲解)
08-28
在网页开发中，有时我们需要实现一个功能，当用户滚动页面到最底部时，触发特定的事件，比如加载更多数据、显示隐藏元素等。这个过程通常称为"无限滚动"或"滚动加载"。本文将详细解释如何通过JavaScript和jQuery来...
js判断iframe内的网页是否滚动到底部触发事件
10-23
以下知识点详细解释了如何使用JavaScript来检测iframe的滚动状态，并在到达底部时触发相应的事件。 首先，涉及到的属性包括clientHeight、offsetHeight和scrollTop： 1. clientHeight：这个属性返回的是元素的高度...
不可见VIew转图片
你全家都是博客
05-26 1512
项目中经常会用到分享的功能，有分享链接也有分享图片，其中分享图片有的需要移动端对屏幕内容进行截取分享，说白了就是将view 转成bitmap 再到图片分享，还有一种情况是将不可见的view 转成bitmap ，这种view是没有直接显示在界面上的，需要我们使用inflate 进行创建的view。 第一种 可见view 先看通过 DrawingCache 方法来截取普通的view，获取它的视图（...
对隐藏的内容添加点击事件
肖肖肖丽珠的博客
09-17 385
{ display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } {...
ReportStudio进阶教程(一) - 条件样式：根据属性显示不同的样式
什么是江湖?
09-18 2555
这里先记录一个小技巧，关于条件样式的
Report studio 操作技巧
iteye_13422的博客
03-25 324
cognos Report studio 操作技巧: 1.不分页显示: 选择列表,将分页行数值设置大点.
Page Visibility API（监听当前页面是否可见【最小化？关闭？正常展示？】）
directWang的博客
01-13 558
这个API 的意义在于通过监听网页的可见性，可以监听当前页面是否可见（最小化？关闭？正常展示？），从而可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，对服务器的轮询、网页动画、正在播放的音频或视频都是可以暂停的。
Android 控件的可见,不可见,隐藏的设置【已解决】
qq_40651609的博客
04-02 5909
可见（visible) XML文件：android:visibility=“visible” Java代码：view.setVisibility(View.VISIBLE); 不可见（invisible） XML文件：android:visibility=“invisible” Java代码：view.setVisibility(View.INVISIBLE); 隐藏（GONE） XML文件：an...
页面刷新时触发的 window 事件
最新发布
09-26
<think> 首先，用户查询是：“我想查找页面刷新时触发的 window 事件 请问页面刷新时触发的 window 事件有哪些”。意思是他们想知道在页面刷新时触发的 window 事件。 从系统级指令，我需要： - 所有行内数学表达式使用 `$...$` 格式（但这个问题不涉及数学，所以可能不需要）。 - 独立公式使用 `$$...$$`（同样，可能不需要）。 - LaTeX 语法正确（适用于任何数学部分）。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，如 [^1]。 用户提供了几个引用： - 引用 [1]: 讨论了 `window.onbeforeunload` 事件，用于页面关闭时触发。它区分了刷新和关闭的不同情况。 - 引用 [2]: 提到了 `window.onpopstate`, `window.history.pushState`, `window.history.replaceState`, `window.onpageshow`, `visibilitychange`。 - 引用 [3]: 类似引用 [1]，使用 `onbeforeunload` 来检测关闭并刷新原页面。 - 引用 [4]: 也提到了使用 `event.clientX` 等来检测关闭事件。 用户说：“上述引用仅供参考，并不是用户真正的需求，请尽可能多的参考用户上一次的问题和你的回答。” 但我没有看到上一次的问题或回答。这可能是一个新对话的开始。 用户需求是“页面刷新时触发的 window 事件有哪些”，所以我需要专注于刷新事件，而不是关闭事件。 关键事件： - `beforeunload`: 在页面卸载前触发，包括刷新和关闭。 - `unload`: 在页面卸载时触发，但现代浏览器限制其使用。 - `pageshow`: 当页面显示时触发，包括初始加载和从缓存中恢复（如后退/前进导航）。 - `load`: 当页面加载完成时触发，包括刷新。 - 另外，`DOMContentLoaded` 在初始 HTML 文档被加载和解析完成后触发，不包括样式表、图像等。 对于刷新： - 当用户刷新页面时，`beforeunload` 会触发，因为它发生在页面卸载前。 - `unload` 也会触发，但通常不推荐使用。 - 当页面重新加载后，`load` 事件会再次触发。 - `pageshow` 事件也会触发，特别是如果页面是从缓存中恢复。 从引用 [2] 中提到了 `window.onpageshow` 和 `visibilitychange`，但 `visibilitychange` 是当页面可见性改变时触发，比如当标签页切换时，不是专门针对刷新的。 用户指定的“刷新时触发”，所以我应该列出在刷新过程中触发的事件。 主要事件： 1. **beforeunload**: 在页面卸载前触发，包括刷新和关闭。可以用于提示用户保存数据。 2. **unload**: 在页面卸载时触发。但现代浏览器中，操作有限。 3. **DOMContentLoaded**: 在页面解析完成后触发，包括刷新。 4. **load**: 在页面所有资源加载完成后触发，包括刷新。 5. **pageshow**: 当页面加载或从缓存中恢复时触发。它有一个 `persisted` 属性，如果从缓存加载则为 true。 在刷新时： - 用户点击刷新或按 F5/Ctrl+R 时： - `beforeunload` 触发（卸载前）。 - 然后页面卸载。 - 然后页面重新加载。 - `DOMContentLoaded` 触发（解析完成）。 - `load` 触发（所有资源加载）。 - 如果使用了后退/前进缓存 (bfcache)，`pageshow` 和 `pagehide` 可能触发，但对于硬刷新（如 Ctrl+F5），缓存可能被绕过。 用户引用的内容主要关注 `onbeforeunload` 并使用事件属性来区分刷新和关闭。例如： - 在引用 [1] 中，它检查 `event.clientX > document.body.clientWidth && event.clientY < 0` 或 `event.altKey` 来检测关闭。 - 类似地，在引用 [4]。 但用户说那些不是真正需求；他们想知道刷新时的事件。 所以，我应该直接回答核心问题。 列出刷新时触发的 window 事件： - `beforeunload` - `unload` (谨慎使用) - `DOMContentLoaded` (刷新后) - `load` (刷新后) - `pageshow` (如果从缓存加载) 另外，`visibilitychange` 不是直接针对刷新；它在标签页隐藏或显示时触发。 在回答中，我需要使用中文。 结构回答： 1. 简要介绍页面刷新时的事件。 2. 列出主要事件，并解释每个事件在刷新过程中的角色。 3. 参考提供的引用，自然地添加引用标识。 4. 生成相关问题。 参考引用： - 引用 [1] 提到了 `onbeforeunload`，区分刷新和关闭 [^1]。 - 引用 [2] 提到了 `onpageshow` [^2]。 - 引用 [3] 也用了 `onbeforeunload` [^3]。 - 引用 [4] 类似 [^4]。 在回答中，当提到这些事件时，添加引用。 例如： - 当页面刷新时，`beforeunload` 事件会在页面卸载前触发 [^1][^3][^4]。 - `pageshow` 事件在页面显示时触发，包括刷新后 [^2]。 生成相关问题： - 例如： 1. 如何区分页面刷新和关闭？ 2. 页面加载时还有哪些事件？ 3. 如何阻止用户在刷新时丢失数据？ 确保回答真实可靠。 最终回答大纲： - 开头：总结刷新时的事件。 - 详细列出事件： - beforeunload - unload - DOMContentLoaded - load - pageshow - 解释每个事件。 - 添加引用。 - 结束。 - 相关问题。 </think> 根据您的查询，页面刷新（如按 F5 或 Ctrl+R 键）时触发的 window 事件主要包括几个关键事件。这些事件发生在页面卸载前（刷新启动时）和页面重新加载后（刷新完成时）。以下我将以清晰结构逐步解释每个事件的作用、触发时机和注意事项。参考了您提供的站内引用内容，我会自然地添加引用标识。 ### 页面刷新时触发的 window 事件列表 当用户刷新页面时，浏览器会触发一系列事件，部分事件在卸载前（刷新启动阶段）触发，部分在重新加载后（刷新完成阶段）触发。以下是主要事件： 1. **`beforeunload`**: - **触发时机**: 在页面卸载前触发，包括刷新、关闭或导航到其他页面。可用于提示用户保存数据或执行清理操作。 - **特点**: 可以通过事件属性（如 `event.clientX` 或 `event.altKey`）区分刷新和关闭行为（例如，刷新时 `event.clientX` 通常不满足关闭条件）[^1][^3][^4]。 - **示例代码**: ```javascript window.addEventListener('beforeunload', function(event) { // 区分刷新和关闭的逻辑（仅供参考） if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) { // 关闭时触发（如点击[X]按钮或Alt+F4） } else { // 刷新时触发（如F5键） console.log('页面刷新中，数据可能丢失'); } event.preventDefault(); // 阻止默认关闭提示 }); ``` 2. **`unload`**: - **触发时机**: 在页面卸载时触发，紧随 `beforeunload` 之后。适用于资源释放，但现代浏览器（如Chrome）限制其使用，因为它可能阻塞刷新过程。 - **特点**: 不推荐用于关键操作，因为浏览器可能忽略其回调中的异步代码。刷新时它会触发，但效果有限[^1][^2]。 - **示例代码**: ```javascript window.addEventListener('unload', function() { // 简单清理操作（如发送日志） }); ``` 3. **`DOMContentLoaded`**: - **触发时机**: 在页面HTML文档解析完成后触发（重新加载后），不等待样式或图像加载。刷新时每次都会触发。 - **特点**: 适用于初始化DOM操作（如绑定事件），速度快于 `load` 事件[^2]。 - **示例代码**: ```javascript document.addEventListener('DOMContentLoaded', function() { console.log('DOM解析完成，页面已刷新'); }); ``` 4. **`load`**: - **触发时机**: 在页面所有资源（图像、脚本等）加载完成后触发（重新加载后）。初始化刷新时不会触发，但刷新完成后会触发。 - **特点**: 用于执行依赖完整资源的代码（如渲染图表），但可能受缓存影响[^2]。 - **示例代码**: ```javascript window.addEventListener('load', function() { console.log('页面完全加载，刷新完成'); }); ``` 5. **`pageshow`**: - **触发时机**: 在页面显示时触发，包括刷新后或从浏览器缓存（如后退/前进导航）恢复时。 - **特点**: 通过 `event.persisted` 属性检查是否从缓存加载（刷新时通常为 `false`）。更适合处理缓存相关场景[^2]。 - **示例代码**: ```javascript window.addEventListener('pageshow', function(event) { if (event.persisted) { console.log('从缓存恢复'); } else { console.log('普通刷新完成'); } }); ``` ### 重要注意事项 - **刷新 vs. 关闭的区分**: 如引用所述，`beforeunload` 事件中可使用 `event.clientX` 或 `event.altKey` 来尝试区分刷新和关闭行为（刷新时 `event.clientX` 通常不超边界）[^1][^4]。但这在不同浏览器中可能不一致，建议测试兼容性。 - **事件顺序**: 刷新时的典型事件顺序为 `beforeunload` → `unload` → (页面重载) → `DOMContentLoaded` → `load` → `pageshow`。 - **性能影响**: 避免在 `beforeunload` 或 `unload` 中执行耗时操作，否则会延迟刷新过程。 - **参考局限性**: 您提供的引用主要关注关闭事件（如 `onbeforeunload` 的区分逻辑）。但对于刷新，核心事件是 `beforeunload`（启动时）和 `load`/`pageshow`（完成后）。`visibilitychange`（页面可见性变化）事件不直接针对刷新，仅在标签切换时触发[^2]。 - **最佳实践**: 对于数据保存，优先使用 `beforeunload`；对于刷新后初始化，优先使用 `DOMContentLoaded` 或 `pageshow`。 ### 相关问题 基于您的查询，我生成了以下相关问题，帮助深入理解： 1. 如何准确区分页面刷新和页面关闭事件？ 2. 页面加载（首次访问或刷新）时，`DOMContentLoaded` 和 `load` 事件有什么区别？ 3. 浏览器缓存（如 bfcache）如何影响刷新事件的处理？ 如果您需要代码示例优化或更多事件细节，请随时补充说明！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值