原文链接: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/
相关推荐
var page = new Visibility({onHidden: hiddenCallback,onVisible: visibleCallback});function hiddenCallback () {console.log('hidden callback');}function visibleCallback () {console.log('visible
如果浏览器不支持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。 对于旧的浏览器,使用焦点/模糊技巧(请注意,当浏览器失去...
禁用页面可见性API 加载项以禁用页面可见性API。 这样可以防止例如视频会议系统跟踪您当前是否在另一个窗口中。 执照 该程序是免费软件:您可以根据自由软件基金会发布的GNU Affero通用公共许可证的条款(许可证的...
React页面可见性 声明式,嵌套式,有状态,同构的页面可见性 动机 您是否定期轮询后端? 您正在播放动画吗?... 而是使用react-page-visibility一切都为您处理。 安装 $ npm install -- save react - page - visibil
通过一些原型黑客来阻止Page Visibility API。 可作为Chrome扩展程序使用。
在某些情况下,当用户与我们的最终产品或应用程序进行交互时,我们发现自己会执行许多密集的,占用...页面可见性(Page Visibility) API 所有现代的网页浏览器都加入了页面可见性API,它允许我们检测浏览器的标签页何时
25.2 Page Visibility API ..............................686 25.3 Geolocation API...................................687 25.4 File API................................................689 25.4.1 ...
<!...--STATUS OK--><html><head>;..._position:;min-height:100%}#head{padding-bottom:100px;text-align:center;*z-index:1}#ftCon{height:100px;position:absolute;bottom:44px;text-align:center;...