原文链接：http://www.javaarch.net/jiagoushi/661.htm
javascript Page Visibility API
Page Visibility API是判断页面是否在当前窗口展示，如果显示在当前窗口，则可以选择做或者不做一些事情。
比如我们使用一个AJAX 调用从后台每隔2s查询一些数据
<!DOCTYPE html>
<html>
<body>
<div id="newswell"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var newsDiv;
function getData() {
$.ajax({url:"news.json"}).done(function(data) {
newsDiv.innerHTML += "<p><b>Posted at " + new Date() + "
" + data.message;
//call it again in 2 seconds
window.setTimeout(getData, 2000);
}).fail(function(xhr,status,e) {
console.dir(e);
});
}
$(document).ready(function() {
newsDiv = document.querySelector("#newswell");
getData();
});
</script>
</body>
</html>
如果这个页面不是显示在用户当前可视窗口，比如chrome，不在当前显示的tab页，那么我们可能不需要2s调用，因为那样只会浪费网络请求，查询了数据也没用，用户没有看到。那么我们就可以使用Page Visibility API来判断当前页是否是可视的tab上，如果是我们再去查，不是我们就不查了。Chrome，firefox最新版都支持了，IE也是支持的。
于是我们改为：
<!DOCTYPE html>
<html>
<body>
<div id="newswell"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var newsDiv;
var active = true;
function isVisible() {
if("webkitHidden" in document) return !document.webkitHidden;
if("mozHidden" in document) return !document.mozHidden;
if("hidden" in document) return !document.hidden;
//worse case, just return true
return true;
}
function getData() {
$.ajax({url:"news.json"}).done(function(data) {
newsDiv.innerHTML += "<p><b>Posted at " + new Date() + "
" + data.message;
//call it again in 2 seconds
if(isVisible()) window.setTimeout(getData, 2000);
else active = false;
}).fail(function(xhr,status,e) {
console.dir(e);
});
}
$(document).ready(function() {
newsDiv = document.querySelector("#newswell");
$(document).bind("visibilitychange webkitvisibilitychange mozvisibilitychange",function(e) {
console.log("VS CHANGE");
console.log(isVisible());
if(isVisible() && !active) {
active = true;
getData();
}
});
getData();
});
</script>
</body>
</html>
demo可以查看http://raymondcamden.com/demos/2013/may/28/crap.html，规范请查看http://www.w3.org/TR/page-visibility/
相关推荐
`visibility.js`是一个封装了Page Visibility API的JavaScript库，旨在帮助开发者更方便地检测和管理网页的可见性状态。 首先，让我们来深入了解一下Page Visibility API。这是一个浏览器原生提供的API，用于判断...
如果浏览器不支持Page Visibility API，则此方法将始终返回false 。watcher.visible() 如果浏览器窗口当前可见，则返回true 。 如果浏览器不支持Page Visibility API，则此方法将始终返回true 。watcher.on('change...
该加载项旨在阻止API公开的事件和属性。 执照 附加代码：MIT。 在下， 的rahmatmasiv在徽标中使用的“”图标。 技术细节 该插件将注入内容脚本以替换公开的属性，并在适用时停止传播事件。 页面可见性API 该插件...
page-visibility.js 包装器这个小包装器隐藏了供应商前缀，并为浏览器中的可见性API提供了有用的高级API。 几乎所有浏览器都原生Page Visibility API。 对于旧的浏览器，使用焦点/模糊技巧（请注意，当浏览器失去...
当用户最小化浏览器窗口、切换标签页或进行其他操作导致页面不再可见时，Page Visibility API就能派上用场。通过监听visibilitychange事件，可以得知页面状态的变化，并执行相应的逻辑处理。 代码中通过检查...
Page Visibility API的核心是`document.hidden`属性，它返回一个布尔值，表示当前页面是否可见。如果页面在前台（用户可以直接看到），`document.hidden`为`false`；反之，如果页面在后台或者被最小化，`document....
另外，可以使用HTML5的`Page Visibility API`来判断页面是否处于活动状态，从而决定是否显示确认对话框。这种方式更加灵活，但需要考虑浏览器的兼容性。 综上所述，"不提示关闭窗口"的JavaScript实现主要是通过...
var page = new Visibility({onHidden: hiddenCallback,onVisible: visibleCallback});function hiddenCallback () {console.log('hidden callback');}function visibleCallback () {console.log('visible
"dont:不要让我看，页面可见性API阻止程序" 这个标题表明我们正在讨论一个专门设计用来防止或控制Page Visibility API的行为的程序。Page Visibility API是Web开发中的一个重要工具，用于检测浏览器窗口或标签页是否...
对于Web环境，由于浏览器的安全限制，直接监听用户的锁屏行为并不容易，但可以通过定时检测页面可见性状态（如使用Page Visibility API）来模拟这一过程。当页面进入非活动状态（如用户离开或锁屏）时，播放提示音。...
禁用页面可见性API 加载项以禁用页面可见性API。 这样可以防止例如视频会议系统跟踪您当前是否在另一个窗口中。 执照 该程序是免费软件：您可以根据自由软件基金会发布的GNU Affero通用公共许可证的条款（许可证的...
在现代Web开发中，理解并利用页面可见性（Page Visibility API）是优化用户体验和提高性能的关键所在。页面可见性API提供了一种标准方法，用于检测网页在用户浏览器中的可见状态，例如，当用户切换到其他标签页、...
随着技术的发展，新兴的API如requestAnimationFrame()用于流畅的动画，Page Visibility API监控页面可见性，Geolocation API获取设备位置，File API处理文件读取和上传，Web计时API提高性能，以及Web Workers用于...
总的来说，通过使用JavaScript和Page Visibility API，开发者可以创建更加智能和互动的Web应用，提高用户的参与度和体验。这种技术在许多现代Web应用中都有所应用，不仅可以用于改变标题，还可以用来暂停或恢复动画...
4. **HTML5的Page Visibility API**：另一种处理方式是利用Page Visibility API来检测页面是否可见。当页面变为隐藏状态（比如窗口被最小化或用户切换到其他标签页），你可以执行一些清理工作，而不需要阻止窗口关闭...
React页面可见性 声明式，嵌套式，有状态，同构的页面可见性 动机 您是否定期轮询后端？ 您正在播放动画吗？... 而是使用react-page-visibility一切都为您处理。 安装 $ npm install -- save react - page - visibil
2. **页面可见性API（Page Visibility API）** 页面可见性API用于检测用户是否当前正在查看某个网页，这对于优化资源加载、暂停非活动页面的动画等场景非常有用。下面展示了如何使用Page Visibility API： ```...
test('Check element visibility', async () => { const page = await browser.newPage(); await page.goto('https://www.example.com'); const isVisible = await page.evaluate(() => document.querySelector('...
element = wait.until(EC.visibility_of_element_located((By.ID, 'myElement'))) ``` **执行JavaScript**： Selenium还允许直接执行JavaScript，这对于操作无法通过DOM直接访问的元素很有用： ```python driver....
这个功能主要涉及到了浏览器的“页面可见性API”（Page Visibility API），这是一个强大的工具，允许开发者在用户切换到其他标签页、最小化窗口或者执行其他使页面不可见的操作时，能够接收到相应的事件通知。...