JavaScript require.js实现全屏和退出全屏效果

最新推荐文章于 2024-08-10 20:11:25 发布

boonya

最新推荐文章于 2024-08-10 20:11:25 发布

阅读量389

点赞数

分类专栏： JavaScript 文章标签： JavaScript 全屏退出全屏

本文链接：https://blog.csdn.net/boonya/article/details/102499476

版权

JavaScript 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

全屏和退出全屏

引入require.js，具体怎么操作就不说了，下面来看一个全屏的功能JS：

define([], function() {
    'use strict';
    var _exitFullScreen = false;
    var buttonEL;
    var continerEL;
    function init(option){
        continerEL = document.getElementById(option.continerId);
        buttonEL = document.getElementById(option.buttonId);
        buttonEL.onclick = _fullscreen;
    }
    function _fullscreen(element){
    	if(!_exitFullScreen){//当前非全屏状态,则进入全屏
    		//W3C 
    		if (continerEL.requestFullscreen) { 
        		continerEL.requestFullscreen(); 
    		}
    		//FireFox 
    		else if (continerEL.mozRequestFullScreen) { 
    			continerEL.mozRequestFullScreen();
    		}
    		//Chrome等 
    		else if (continerEL.webkitRequestFullScreen) { 
    			continerEL.webkitRequestFullScreen(); 
    		}
    		//IE11
    		else if (continerEL.msRequestFullscreen) {
    			continerEL.msRequestFullscreen();
    		}
    		element.target.innerHTML = '退出全屏';
    	}else{//当前为全屏状态,则退出全屏
    		if (document.exitFullscreen) { 
        		document.exitFullscreen(); 
    		} 
    		else if (document.mozCancelFullScreen) { 
    			document.mozCancelFullScreen(); 
    		} 
    		else if (document.webkitCancelFullScreen) { 
    			document.webkitCancelFullScreen(); 
    		} 
    		else if (document.msExitFullscreen) { 
    			document.msExitFullscreen();
    		}
    		element.target.innerHTML = '全屏';
    	}
    	_exitFullScreen = !_exitFullScreen;
    }

    return {
        init:init
    }
});

浏览器全屏API

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen

Document.exitFullscreen() 方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

备注: 如果一个元素A在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

语法

document.exitFullscreen();

示例

// 点击切换全屏模式
document.onclick = function (event) { 
  if (document.fullscreenElement) { 
    document.exitFullscreen() 
  } else { 
    document.documentElement.requestFullscreen() 
  } 
};

API规格

Specification	Status	Comment
Fullscreen API Document.exitFullscreen()	Living Standard	Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)-webkit 45 (unprefixed)	9.0 (9.0) as `mozCancelFullScreen`[1] 47.0 (47.0)[1] (behind `full-screen-api.unprefix.enabled`	?	?	?

Feature	Android Webkit	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)-webkit 45 (unprefixed)	(Yes)-webkit 45 (unprefixed)	9.0 (9.0) as `mozCancelFullScreen`[1] 47.0 (47.0)[1] (behind `full-screen-api.unprefix.enabled`	?	?	?