概述
意外的发现一个网页有一个按钮能使网页全屏，查了下代码发现是H5的全屏api，于是就查了下资料，记录下来供以后开发时参考，相信对其他人也有用。
参考资料：
利用js如何做到让页面全屏和不全屏功能
Element.requestFullScreen() MDN
全屏API
H5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
需要注意的是：只有包含在顶层文档内部的标准HTML元素、<svg>元素和<math>元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。
示例代码如下：
<!doctype html><html> ???<head> ?????<meta charset="UTF-8"/> ???????<title>全屏不全屏</title> ???</head> ???<body> ?????<button id="fullScreen">全屏模式</button> ?????<button id="noFullScreen">取消全屏</button> ????</body></html><script> ??????document.getElementById("fullScreen").onclick=function(){ ?????????if(document.documentElement.RequestFullScreen){ ???????????document.documentElement.RequestFullScreen(); ?????????} ?????????//兼容火狐 ?????????console.log(document.documentElement.mozRequestFullScreen) ?????????if(document.documentElement.mozRequestFullScreen){ ???????????document.documentElement.mozRequestFullScreen(); ?????????} ?????????//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen ?????????if(document.documentElement.webkitRequestFullScreen){ ???????????document.documentElement.webkitRequestFullScreen(); ?????????} ?????????//兼容IE,只能写msRequestFullscreen ?????????if(document.documentElement.msRequestFullscreen){ ???????????document.documentElement.msRequestFullscreen(); ?????????} ??????} ??????document.getElementById("noFullScreen").onclick=function(){ ?????????if(document.exitFullScreen){ ???????????document.exitFullscreen() ?????????} ?????????//兼容火狐 ?????????console.log(document.mozExitFullScreen) ?????????if(document.mozCancelFullScreen){ ???????????document.mozCancelFullScreen() ?????????} ?????????//兼容谷歌等 ?????????if(document.webkitExitFullscreen){ ???????????document.webkitExitFullscreen() ?????????} ?????????//兼容IE ?????????if(document.msExitFullscreen){ ???????????document.msExitFullscreen() ?????????} ??????}</script>全屏事件
如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
示例如下：
document.addEventListener('fullscreenchange', function(){ /*code*/ });document.addEventListener('webkitfullscreenchange', function(){ /*code*/});document.addEventListener('mozfullscreenchange', function(){ /*code*/});document.addEventListener('MSFullscreenChange', function(){ /*code*/});document.addEventListener('fullscreenerror', function(){ /*code*/ });document.addEventListener('webkitfullscreenerror', function(){ /*code*/});document.addEventListener('mozfullscreenerror', function(){ /*code*/);document.addEventListener('MSFullscreenError', function(){ /*code*/ });全屏样式
全屏之后还可以选择性的调整样式，就和hover一样，如下所示：
:-webkit-full-screen { }:-moz-full-screen { }:-ms-fullscreen { }:fullscreen { }js让页面全屏
原文地址：https://www.cnblogs.com/yangzhou33/p/9300329.html