js实现浏览器全屏

最新推荐文章于 2024-05-09 09:36:38 发布

Water-Sprite

最新推荐文章于 2024-05-09 09:36:38 发布

阅读量148

点赞数

分类专栏：代码事例文章标签： js javascript

本文链接：https://blog.csdn.net/ouwei9999/article/details/106236336

版权

代码事例专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 </head>
 <body>
  <li id="js_full_screen"><span class="iconfont-full-screen">全屏</span></li>
  <script>
	// 全屏
	var $fullScreenEle = $('#js_full_screen'),
		$fsChildEle = $fullScreenEle.children();
		//$navbarEle = $('.zh-navbar'),
		//$headerEle = $('.zh-header');
	$fullScreenEle.click(function() {
		if($fsChildEle.hasClass('iconfont-full-screen')) { // 全屏
			var docEle = document.documentElement;
			var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || 
			docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
			if (rfs) {
				rfs.call(docEle);
			} else if (typeof window.ActiveXObject !== "undefined") {
				var wscript = new ActiveXObject("WScript.Shell");
				if (wscript != null) {
					wscript.SendKeys("{F11}");
				}
			}
			$fsChildEle.removeClass('iconfont-full-screen').addClass('iconfont-exit-screen');
			//$navbarEle.hide();
			//$headerEle.css('top', 10);
		} else { // 退出全屏
			var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || 
			document.mozCancelFullScreen || document.exitFullScreen;
			if (cfs) {
				cfs.call(document);
			} else if (typeof window.ActiveXObject !== "undefined") {
				var wscript = new ActiveXObject("WScript.Shell");
				if (wscript != null) {
					wscript.SendKeys("{F11}");
				}
			}
		}
	});

	// 通过resize事件监听退出全屏
	$(window).resize(function() {
		var prevWinHgt = window.sessionStorage.getItem('winHgt');
		if(prevWinHgt) {
			if(window.innerHeight<prevWinHgt && $fsChildEle.hasClass('iconfont-exit-screen')) {
				$fsChildEle.removeClass('iconfont-exit-screen').addClass('iconfont-full-screen');
				//$navbarEle.show();
				//$headerEle.css('top', 60);
			}
		}
		window.sessionStorage.setItem('winHgt', window.innerHeight);
	});

	document.addEventListener("fullscreenchange", function(e) {
		console.log("fullscreenchange", e);
	});
	document.addEventListener("mozfullscreenchange", function(e) {
		console.log("mozfullscreenchange ", e);
	});
	document.addEventListener("webkitfullscreenchange", function(e) {
		console.log("webkitfullscreenchange", e);
	});
	document.addEventListener("msfullscreenchange", function(e) {
		console.log("msfullscreenchange", e);
	});
  </script>
 </body>
</html>

Water-Sprite

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现浏览器全屏

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" co
复制链接

扫一扫