H5让页面全屏显示

2017-12-28 elight JavaScript
<!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) {
					//检测 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>
出处：https://www.cnblogs.com/djdliu/p/5028592.html
分享到： QQ空间新浪微博腾讯微博微信更多
标签: h5
« php实现WebSocket | Thinkphp+ECharts生成柱状图»
H5让页面全屏显示

日历

存档

最新评论

链接

搜索
