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 为 null
- console.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(){ /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 { }
来源: http://www.qdfuns.com/article/18169/7dc382266812da111e0b5ebddd72255a.html