HTML5 全屏化操作功能

最新推荐文章于 2023-11-16 16:43:10 发布

chenglie6973

最新推荐文章于 2023-11-16 16:43:10 发布

阅读量91

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/YaoZhiQi/blog/835405

版权

由于项目中用到了全屏化功能，查看了API后写了一个简单的全屏化model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div1{
				width: 1000px;height: 500px;
				border: solid 1px blue;
			}
			.test{		
				width:100%;		
				background: black;
				height:100%;
				min-height: 400px;
				border: solid 1px red;				
			}
			div{
				color: #fff;
			}
		</style>
		
	</head>
	<body>
		<div class="div1" >
			<div id="div2"  class="test">
				<div id="div" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">全屏</div>
				<div id="div3" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">取消全屏</div>
			</div>
		</div>
		
		
		<script>
			(function () {
			    var viewFullScreen = document.getElementById("div");    
			    if (viewFullScreen) {
			        viewFullScreen.addEventListener("click", function () {
			            var docElm = document.getElementById("div2");
			            if (docElm.requestFullscreen) {
			                docElm.requestFullscreen();
			            }
			            else if (docElm.msRequestFullscreen) {
			                docElm.msRequestFullscreen();
			            }
			            else if (docElm.mozRequestFullScreen) {
			                docElm.mozRequestFullScreen();
			            }
			            else if (docElm.webkitRequestFullScreen) {
			                docElm.webkitRequestFullScreen();
			            }else{
			            	alert("当前浏览器不支持全屏化操作！");
			            }
			        }, false);
			    }
			    var cancelFullScreen = document.getElementById("div3");
			    if (cancelFullScreen) {
			    	cancelFullScreen.onclick = function (event) { 
					  if (document.exitFullscreen) {
			                document.exitFullscreen();
			            }
			            else if (document.msExitFullscreen) {
			                document.msExitFullscreen();
			            }
			            else if (document.mozCancelFullScreen) {
			                document.mozCancelFullScreen();
			            }
			            else if (document.webkitCancelFullScreen) {
			                document.webkitCancelFullScreen();
			            } else{
			            	alert("当前浏览器不支持全屏化操作！");
			            } 
					};
			        /*cancelFullScreen.addEventListener("click", function () {
			            if (document.exitFullscreen) {
			                document.exitFullscreen();
			            }
			            else if (document.msExitFullscreen) {
			                document.msExitFullscreen();
			            }
			            else if (document.mozCancelFullScreen) {
			                document.mozCancelFullScreen();
			            }
			            else if (document.webkitCancelFullScreen) {
			                document.webkitCancelFullScreen();
			            } else{
			            	alert("当前浏览器不支持全屏化操作！");
			            }
			        }, false);*/
			    }
			    
			})();
		</script>
	</body>
</html>

如果你想兼容一些低版本的ie浏览器，你可以替换我做提示的区域

alert("当前浏览器不支持全屏化操作！");
让你想全屏的部分，width:100%;height:100%;
然后再让他的父类节点的高度和宽度等于当前可用浏览器的最大宽度和高度就行啦。
在这里没有做具体的实现。
本人，不是很建议去兼容低ie浏览器，因为做前端的都知道，现在大部分html5和css3,ES6都在积极的淘汰
低版本浏览器。微软也放弃了对低版本ie浏览器的维护。

转载于:https://my.oschina.net/YaoZhiQi/blog/835405

chenglie6973

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 全屏化操作功能

由于项目中用到了全屏化功能，查看了API后写了一个简单的全屏化model <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...
复制链接

扫一扫