Javascript开启浏览器全屏模式

通常在某些情况下，我们需要让浏览器开启全屏模式，以便获得更好的视觉体验，先看下全屏模式简单的几个API。

浏览器默认绑定

非全屏模式下， document的F11按键绑定开启全屏模式
全屏模式下， document的esc和F11 按键绑定关闭全屏模式

屏幕全屏模式改变事件

当成功进入全屏模式后， document会收到一个fullscreenchange 事件。 当退出全屏状态后， document又会收到fullscreenchange 事件。

JavaScript

 

var screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange'

判断当前是否处于全屏状态

非标准：

JavaScript

 

var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

标准：

JavaScript

 

var isFullScreen = document.fullscreenElement || document.mozFullScreenElement ||document.webkitFullscreenElement

开启全屏模式

JavaScript

 

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();

　　}

}

注意: requestFullscreen是规范的书写模式（ s是小写）， 但在Gecko内核中仍使用带前缀的大写模式mozRequestFullScreen。

关闭全屏模式

JavaScript

 

function exitFullscreen() {

　　if (document.exitFullscreen) {

　　　　document.exitFullscreen();

　　} else if (document.mozCancelFullScreen) {

　　　　document.mozCancelFullScreen();

　　} else if (document.webkitExitFullscreen) {

　　　　document.webkitExitFullscreen();

　　}

}

全屏模式只能由手势触发

了解API后，假如我们监听window.onload事件执行launchFullScreen方法，Chrome浏览器会提示“开启全屏模式API只能由用户手势触发”。

 

"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."

 

原因是浏览器采用安全的机制， 将这种强制全屏模式意为“恶意行为”， 一切非用户主观意愿带来的变化都是不允许的。

因此如果你的应用有全屏需求，有两种方案。
1.页面初始化给用户一个“F11开启全屏” 的提示， 并且在延迟几秒之后消失。
2.页面设置一个全屏按钮，单击全屏按钮进入全屏模式，并且隐藏按钮（视觉效果最佳）。

对于第二种方案，需要监听键盘事件：

JavaScript

 

document.addEventListener("keydown", function(e) {

　　var currKey = 0

　　//在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。

　　var e = e || event;

　　//IE中，只有keyCode属性，而FireFox中有which和charCode属性，Opera中有keyCode和which属性

　　var currKey = e.keyCode || e.which || e.charCode;

　　if (currKey == 112) {

　　　　launchFullScreen();

　　}

}, false);

具备了兼容各种浏览器按键模式的监听，但不知道 keycode肿么办，112是哪个键？

字母和数字键的键码值(keyCode)

数字键盘上的键的键码值(keyCode)

功能键键码值(keyCode)

控制键键码值(keyCode)

避免使用非标准化的方法

非标准化的方法指的是进入草案前浏览器实现的一些方法，避免使用。
window.fullScreen(Firefox)
HTMLMediaElement.webkitDisplayingFullscreen
HTMLMediaElement.webkitEnterFullscreen
HTMLMediaElement.webkitExitFullscreen
HTMLMediaElement.webkitSupportsFullscreen

转载于:https://www.cnblogs.com/jefferyE/p/7049380.html