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

目录

全屏和退出全屏

浏览器全屏API

语法

示例

API规格

浏览器兼容性

参阅

---

 

全屏和退出全屏

引入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	?	?	?

[1] 可通过Document.exitFullscreen()方法让全屏元素栈的栈顶元素退出全屏状态，并让新的栈顶的元素进入全屏状态。此特征在Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)中被实现.

参阅

• Using full-screen mode
• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen
• allowfullscreen

最后修改：

2019年3月23日, by MDN contributors