h5的api dom全屏展示

下面是完整的例子，暂不做分析

<!DOCTYPE html>
<html>
 <head>
  <title> FullScreen API 演示</title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Description" content="http://davidwalsh.name/more-html5-apis">
  <script>
	// 处理全屏(需要全屏显示DOM元素)
	function launchFullScreen(element) {
	  // 先检测最标准的方法
	  if(element.requestFullScreen) {
		element.requestFullScreen();
	  } else if(element.mozRequestFullScreen) {
		// 其次，检测Mozilla的方法
		element.mozRequestFullScreen();
	  } else if(element.webkitRequestFullScreen) {
		// if 检测 webkit的API
		element.webkitRequestFullScreen();
	  }
	};
	// 退出全屏,不用管具体是哪个元素，因为屏幕是唯一的。
	function cancelFullscreen() {
	  if(document.cancelFullScreen) {
		document.cancelFullScreen();
	  } else if(document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	  } else if(document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	  }
	};
	// 显示全屏信息
	function dumpFullscreen() {
		var d = document;
		var fullE = null;
		var fullEnable = "fullScreen is disable!";
		if(d.fullScreenElement){
			fullE = d.fullScreenElement;
		} else if(d.mozFullScreenElement){
			// 如果有问题，把mozFullscreenElement 改为 mozFullScreenElement,S大写
			fullE = d.mozFullScreenElement;
		} else if(d.webkitFullscreenElement){
			// 本人的为chrome， Fullscreen 之中，s为小写。
			fullE = d.webkitFullscreenElement;
		}
		// 如果有问题，请切换 fullScreen 中 s 的大小写。
		if(d.fullScreenEnabled){
			fullEnable = d.fullScreenEnabled;
		} else if(d.mozFullScreenEnabled){
			fullEnable = d.mozFullScreenEnabled;
		} else if(d.webkitFullscreenEnabled){
			// 注意 Fullscreen 的中间s大小写
			fullEnable = d.webkitFullscreenEnabled;
		}
		//
		if(window.console){
			console.dir(fullE);
		} else if(fullE){
			alert(fullE.tagName);
		} else {
			alert("全屏元素是:"+fullE);
		}
		//
		if(window.console){
			console.info("允许全屏:"+fullEnable);
		} else if(fullEnable){
			alert("允许全屏:"+fullEnable);
		} else {
			alert("允许全屏:"+fullEnable);
		}
	};
	// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
	window.addEventListener("DOMContentLoaded", function() {
		// 获取DOM元素
		var enterfull = document.getElementById("enterfull");
		var quitfull = document.getElementById("quitfull");
		var dumpfull = document.getElementById("dumpfull");
			
		// 事件监听
		enterfull.addEventListener("click", function() {
			// 
			launchFullScreen(document.documentElement);
		});
		quitfull.addEventListener("click", function() {
			// 
			cancelFullscreen();
		});
		dumpfull.addEventListener("click", function() {
			// 
			dumpFullscreen();
		});

	}, false);
	// 全屏事件Events
	document.addEventListener("fullscreenchange", function(e) {
	  console.dir(e);
	});
	document.addEventListener("mozfullscreenchange", function(e) {
	  console.dir(e);
	});
	document.addEventListener("webkitfullscreenchange", function(e) {
	  console.dir(e);
	});
  </script>
 </head>

 <body>
  
	<div>
		<button id="enterfull">进入全屏</button><br/>
		<button id="quitfull">退出全屏</button><br/>
		<button id="dumpfull"> 查看全屏的DOM元素</button><br/>
	</div>
 </body>
</html>

　　

posted @ 2015-12-08 11:35  djdliu  阅读(3236)  评论(0)  编辑  收藏  举报