浏览器中的全屏功能

浏览器的全屏模式

1. video元素的全屏按钮
2. f11快捷键
3. Fullscreen API

Fullscreen API

Fullscreen API 是一组用来控制指定元素进入和退出全屏模式的方法和属性。这些方法和属性不是在一个接口上定义的，是定义在DOM元素和Document元素上。

Element.requestFullscreen

请求浏览器将指定的元素全屏显示。返回一个Promise对象，当全屏模式被激活时被resolved。如果进入全屏模式失败，Promise会被rejected。

由于浏览器对标准支持情况不一，需要做兼容处理

functionrequestFullscreen(element){constfullScreen=element.requestFullscreen||element.mozRequestFullScreen||element.msRequestFullscreen||element.webkitRequestFullscreen;if(fullScreen){fullScreen.call(element);}}

Document.exitFullscreen

请求浏览器退出全屏模式，返回一个Promise对象。

由于浏览器对标准支持情况不一，需要做兼容处理

functionexitFullscreen(){constexit=document.exitFullscreen||document.msExitFullscreen||document.mozCancelFullScreen||document.webkitExitFullscreen;if(exit){exit.call(document);}};

Document.fullscreenElement

当前处于全屏模式展示的DOM元素，如果为null，说明浏览器没有处于全屏模式

Document.fullscreenEnabled

标识浏览器是否可以进入全屏模式，任何原因导致不能进入全屏模式，该值都是false。

Element.onfullscreenchange

当DOM元素进入全屏模式，或者退出全屏模式时，会在相关元素上触发fullscreenchange事件。

Element.onfullscreenerror

当DOM元素进入或退出全屏模式遇到错误时，会在相关元素上触发fullscreenerror事件。

Document.onfullscreenchange

当DOM元素触发了fullscreenchange事件，该事件会冒泡到Document，触发该方法的执行

Document.onfullscreenerror

当DOM元素触发了fullscreenerror事件，该事件会冒泡到Document，触发该方法的执行

Fullscreen API的使用

下面是一个基本的全屏和退出全屏的例子

<divid="fullscreenelm"><div>需要全屏的元素div><buttonid="optbtn">全屏/退出button>div><script>(function(){varoptbtn=document.querySelector(optbtn);varfullscreenelm=document.querySelector(fullscreenelm);optbtn.addEventListener(click,function(){if(document.fullscreenElement){exitFullscreen();}else{requestFullscreen(fullscreenelm);}});})();script>

设置全屏元素的样式

使用 chrome 浏览器打开，全屏的背景色是黑色，这是因为被全屏的元素会被赋予一个 css 样式

:not(:root):fullscreen::backdrop{position:fixed;top:0px;right:0px;bottom:0px;left:0px;background:black;}

通过指定被全屏的元素样式修改浏览器的默认样式

fullscreenelm:fullscreen{background-color:fff;width:100%;height:100%;}

fullscreenerror事件的触发时机

1. 尝试不从用户发起的事件（点击事件或键盘事件）来触发全屏,requestFullscreen函数只能由用户发起的事件触发，否则会报错

varfullscreenelm=document.querySelector(fullscreenelm);fullscreenelm.onfullscreenchange=function(e){console.log(fullscreenelm fullscreenchange,e,document.fullscreenElement);// <未执行>};fullscreenelm.onfullscreenerror=function(e){console.log(fullscreenelm fullscreenerror,e,document.fullscreenElement);// fullscreenelm fullscreenerror Event {type: "fullscreenerror", …} null};requestFullscreen(fullscreenelm);// Failed to execute requestFullscreen on Element: API can only be initiated by a user gesture.

2.iframe元素禁止内部页面执行全屏操作

<iframesrc="./fullscreen_demo.html"frameborder="0"allow="fullscreen none">iframe>

输出和上个例子一样

混用f11和Fullscreen API

由于浏览器可以通过 f11 快捷键将整个文档全屏，就会存在两种方式混用的情况。

1.先 f11 全屏，再requestFullscreen全屏

整个文档先进入全屏模式，之后指定元素进入全屏模式

2.先requestFullscreen全屏，再 f11 退出全屏

整个文档先进入全屏模式，此时document.fullscreenElement为null，之后文档退出全屏模式

3.先 f11 全屏，再requestFullscreen全屏，再 f11 退出全屏

整个文档先进入全屏模式，此时document.fullscreenElement为null，之后指定元素进入全屏模式，此时document.fullscreenElement为指定元素。最后指定元素退出全屏模式，且浏览器处于非全屏模式，此时document.fullscreenElement为null。

4.先 f11 全屏，再requestFullscreen全屏，再requestFullscreen退出全屏，再 f11 退出全屏

整个文档先进入全屏模式，然后是指定元素进入全屏模式。再是指定元素退出全屏模式且文档重新进入全屏模式，最后是文档退出全屏模式。

可以看到，浏览器的 f11 可以强制退出全屏