浏览器全屏在某些环境下体验很好，特别是小屏幕手机，地址栏占用的空间很多。
js 全屏函数
1
2
3
4
5
6
7
8
9
10
11
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
某个元素全屏调用函数：
1launchFullscreen(document.getElementById("goFS"));
全页面全屏：
1launchFullscreen(document.documentElement);
考虑到浏览器兼容，整页面全屏可以用下面的函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
}
else {
cancelFullScreen.call(doc);
}
}
应注意的是，FullScreen 函数只能由用户动作触发，不能自动调用。否则会出现下面错误提示：
1Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
参考
本文网址: https://pylist.com/topic/183.html 转摘请注明来源