如何实现HTML5全屏模式Full Screen API

fullscreenAPI接口属性1：fullscreenElement该属性返回当前处于全屏模式的DOM元素。属性2：fullscreenEnabled该属性返回当前document是否进入了可以请求全屏模式的状态。方法1：requestFullscreen()请求进入全屏模式。方法2：exitFullscreen()退出全屏模式。事件1：fullscreenchange进入/退出全屏模式切换时会触发。事件2：fullscreenerror进入/退出全屏模式失败时会触发。由于fullscreenAPI存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：跨浏览器返回正处于全屏的元素functionfullscreenElement(){varfullscreenEle=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement;//注意：要在用户授权全屏后才能获取全屏的元素，否则fullscreenEle为nullconsole.log("全屏元素："+fullscreenEle);returnfullscreenEle;}跨浏览器返回当前document是否进入了可以请求全屏模式的状态functionfullscreenEnable(){varisFullscreen=document.fullscreenEnabled||window.fullScreen||document.webkitIsFullScreen||document.msFullscreenEnabled;//注意：要在用户授权全屏后才能准确获取当前的状态if(isFullscreen){console.log('全屏模式');}else{console.log('非全屏模式');}}跨浏览器发动全屏functionlanchFullscreen(element){if(element.requestFullscreen){element.requestFullscreen();}elseif(element.mozRequestFullScreen){element.mozRequestFullScreen();}elseif(element.msRequestFullscreen){element.msRequestFullscreen();}elseif(element.webkitRequestFullscreen){element.webkitRequestFullScreen();}}跨浏览器退出全屏functionexitFullscreen(){if(document.exitFullscreen){document.exitFullscreen();}elseif(document.mozCancelFullScreen){document.mozCancelFullScreen();}elseif(document.msExitFullscreen){document.msExiFullscreen();}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();}}各浏览器fullscreenchange事件处理document.addEventListener('fullscreenchange',function(){/*code*/});document.addEventListener('webkitfullscreenchange',function(){/*code*/});document.addEventListener('mozfullscreenchange',function(){/*code*/});document.addEventListener('MSFullscreenChange',function(){/*code*/});各浏览器fullscreenerror事件处理document.addEventListener('fullscreenerror',function(){/*code*/});document.addEventListener('webkitfullscreenerror',function(){/*code*/});document.addEventListener('mozfullscreenerror',function(){/*code*/);document.addEventListener('MSFullscreenError',function(){/*code*/});跨浏览器全屏模式下样式代码:-webkit-full-screen{}:-moz-full-screen{}:-ms-fullscreen{}:fullscreen{}