FullScreen 全屏切换

发表于 | 分类于

全屏Api可以让浏览器全屏显示，让指定Element节点占满用户的整个屏幕。
目前各大浏览器的最新版本都支持这个API（包括IE11），但是使用的时候需要加上浏览器前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var FullScreen = {
	_$: function(id){
		if(!id || typeof id !== "string"){
			return false;
		}
		return document.getElementById(id);
	},
	_requestFullScreen: function(element) {
		var fullscreenEnabled =
			element.fullscreenEnabled 
			|| element.mozFullScreenEnabled
			|| element.webkitFullscreenEnabled
			|| element.msFullscreenEnabled;

		//未全屏
		if (!fullscreenEnabled) {
			var requestMethod = 
			  	element.requestFullScreen 
				|| element.webkitRequestFullScreen 
				|| element.mozRequestFullScreen 
				|| element.msRequestFullScreen;
			if (requestMethod) {  
	        	requestMethod.call(element);
	    	} else if (typeof window.ActiveXObject !== "undefined") {  
	    		var wscript = new ActiveXObject("WScript.Shell");
	    		if (wscript !== null) {
	            	wscript.SendKeys("{F11}");
	        	}
	    	}
		}
	    return this;
	},
	init: function(ele){
		if(this._$(ele)){
			this._requestFullScreen(this._$(ele));
		}
		return this;
	}
}
document.getElementById("btn").onclick=function(){ 
	FullScreen.init("content");
}

全屏模式下，Chrome浏览器与FireFox浏览器下有些许区别。

当放大一个节点时，Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态。而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分为黑色背景。

为了让Chrome与Firefox保持一致，可以使用CSS伪类来进行修正。

1
2
3
4
:-webkit-full-screen {
	width:100%;
	height:100%;
}

实验室传送门