前端好用API之Fullscreen 前端好用API之Fullscreen

前情
在前端开发需求中，特别网页有视频需求时，需要做视频全屏功能，或者在某些可视化大屏项目也要做全屏。
Fullscreen介绍
让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用
调用方式：

/** * 指定元素进入全屏模式 * @param {element} element */ 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(); } }

相关属性：

document.fullscreenElement	被展示为全屏模式的element
document.fullscreenEnabled	表示全屏模式是否可用

【前端好用API之Fullscreen】相关事件：

element.onfullscreenchange	指定元素全屏事件发生时，事件发送到该元素，表明该元素进入或退出全屏模式
element.onfullscreenerror	指定元素变全屏模式时出现错误，该事件将被发送到指定的元素上

浏览器提供的一些css控制规则

/* element为当前全屏的元素 */ element:-webkit-full-screen { /* properties */ }element:-moz-fullscreen { /* properties */ }element:-ms-fullscreen { /* properties */ }element:fullscreen { /* properties */ }

使用示例

Fullscreen测试 - 锐客网*{ padding:0; margin: 0; } .fullscrenn_element{ width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background-color: green; color: #fff; } .fullscrenn_element:-webkit-full-screen{ background-color: red; }.fullscrenn_element:-moz-fullscreen{ background-color: red; }.fullscrenn_element:-ms-fullscreen{ background-color: red; }.fullscrenn_element:fullscreen{ background-color: red; } 全屏