前端好用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();
	}
}

相关API：

document.exitFullscreen()	让当前文档退出全屏模式，跟requestFullscreen一样要做好兼容前辍处理

相关属性：

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

相关事件：

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

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

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

element:-moz-fullscreen {
/* properties */
}

element:-ms-fullscreen {
/* properties */
}

element:fullscreen {
/* properties */
}

使用示例

  
  
  
  


  
全屏