HTML5 <fullscreen全屏API>

/** * @Title: HTML5 fullscreen全屏API * @author Andseny * @date 2016年12月12日 * @version   1.0 * 使用说明： * fullscreen API 接口 * 属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。 * 属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。 * 方法1：requestFullscreen() 请求进入全屏模式。 * 方法2：exitFullscreen() 退出全屏模式。 * 事件1：fullscreenchange 进入/退出全屏模式切换时会触发。 * 事件2：fullscreenerror 进入/退出全屏模式失败时会触发。 * 由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码： *//*跨浏览器返回正处于全屏的元素*/function fullscreenElement(){var fullscreenEle = document.fullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement;//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为nullconsole.log("全屏元素："+fullscreenEle);return fullscreenEle;}/*跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态*/function fullscreenEnable(){var isFullscreen = document.fullscreenEnabled ||window.fullScreen ||document.webkitIsFullScreen ||document.msFullscreenEnabled;//注意：要在用户授权全屏后才能准确获取当前的状态if(isFullscreen){console.log('全屏模式');}else{console.log('非全屏模式');}}/*跨浏览器发动全屏*/function lanchFullscreen(element){if(element.requestFullscreen){element.requestFullscreen();}else if(element.mozRequestFullScreen){element.mozRequestFullScreen();}else if(element.msRequestFullscreen){element.msRequestFullscreen();}else if(element.webkitRequestFullscreen){element.webkitRequestFullScreen();}}/*跨浏览器退出全屏*/function exitFullscreen(){if(document.exitFullscreen){document.exitFullscreen();}else if(document.mozCancelFullScreen){document.mozCancelFullScreen();}else if(document.msExitFullscreen){document.msExiFullscreen();}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen();}}/*各浏览器fullscreenchange 事件处理*/document.addEventListener('fullscreenchange', function(){//屏幕改变模式时，执行的代码//退出全屏执行的代码if(fullscreenElement()==""||fullscreenElement()==null){//退出全屏或者全屏状态下点击ESC键时执行}});document.addEventListener('webkitfullscreenchange', function(){//屏幕改变模式时，执行的代码});document.addEventListener('mozfullscreenchange', function(){//屏幕改变模式时，执行的代码});document.addEventListener('MSFullscreenChange', function(){//屏幕改变模式时，执行的代码});/*各浏览器fullscreenerror 事件处理*/document.addEventListener('fullscreenerror', function(){/*全屏失败代码*/ });document.addEventListener('webkitfullscreenerror', function(){/*全屏失败代码*/ });document.addEventListener('mozfullscreenerror', function(){/*全屏失败代码*/ });document.addEventListener('MSFullscreenError', function(){/*全屏失败代码*/ });/*跨浏览器全屏模式下样式代码*/<style type="text/css">:-webkit-full-screen { }:-moz-full-screen { }:-ms-fullscreen { }:fullscreen { }</style>