javascript Page Visibility API

原文链接: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/


posted @ 2013-05-31 13:25  zhwj184  阅读(209)  评论(0编辑  收藏  举报