js点击按钮分别实现全屏以及退出全屏的方法

梦翔天宇

于 2020-08-04 21:01:10 发布

阅读量2.7k

点赞数 4

文章标签： js

本文链接：https://blog.csdn.net/weixin_45182619/article/details/107798994

版权

今天在做一个小项目的时候发现，某些网页需要全屏，但是我们打开的网页并非是全屏的，这就需要我们用一个按钮去实现这个全屏事件。
然后我上网查了一下，发现关于js全屏的方法有很多，但是有很多可能是由于浏览器兼容性的原因，没有办法体现出相对应的效果。经过多方的信息采集以及验证之后，终于是成功实现了网页全屏的方法。话不多说，直接上代码。

<script>
//定义一个变量进行判断，默认false 非全屏状态
		var exitFullscreen = false
		// 全屏事件
		function handleFullScreen() {
   
			var element = document.documentElement;
			if(this.fullscreen) {
   
				if(document.exitFullscreen) {
   
					document.exitFullscreen();
				} else if(document.webkitCancelFullScreen) {
   
					document.webkitCancelFullScreen();
				} else if(document.mozCancelFullScreen) {
   
					document.mozCancelFullScreen(