DOM全屏Api requestFullscreen

设置全屏

/**
* [requestFullScreen 设置全屏]
*/
function requestFullScreen(id) {var de = document.getElementById(id);if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();}
}

退出全屏

/**
* [exitFullscreen 退出全屏]
*/
function exitFullscreen(id) {var de = document.getElementById(id);if (de.exitFullscreen) {de.exitFullscreen();} else if (de.mozCancelFullScreen) {de.mozCancelFullScreen();} else if (de.webkitCancelFullScreen) {de.webkitCancelFullScreen();}
}

属性

fullscreenElement

 var fullscreenElement = document.fullscreenElement    ||document.mozFullScreenElement ||document.webkitFullscreenElement;

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null

fullscreenEnabled

var fullscreenEnabled = document.fullscreenEnabled       ||document.mozFullScreenEnabled    ||document.webkitFullscreenEnabled ||document.msFullscreenEnabled;if (fullscreenEnabled) {setFullscreen();} else {console.log('浏览器当前不能全屏');}

fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

判断全屏

fullscreenchange // 浏览器进入或离开全屏时触发。

document.addEventListener('fullscreenchange', function(){});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(){});

全屏状态下的CSS

:-webkit-full-screen {/* properties */
}:-moz-full-screen {/* properties */
}:-ms-fullscreen {/* properties */
}:full-screen { /*pre-spec *//* properties */
}:fullscreen { /* spec *//* properties */
}/* deeper elements */
video:-webkit-full-screen {width: 100%;height: 100%;
}

全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

DOM全屏Api requestFullscreen相关推荐

HTML5 全屏 API
翻译人员: 铁锚原文日期: 2013年12月23日翻译日期: 2013年12月29日原文链接: Fullscreen API 在越来越真实的web应用程序中,JavaScript也变得越来越给力 ...
html5 全屏api,HTML5 全屏 API
翻译人员: 铁锚原文日期: 2013年12月23日翻译日期: 2013年12月29日原文链接: fullscreen api 在越来越真实的web应用程序中,javascript也变得越来越给力 ...
html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
ipad+html+全屏模式,javascript – iPad上的Chrome全屏API？
我正在创建一个小部件,一旦点击一个按钮,我想全屏显示.我已经实现了全屏API,它就像所有浏览器上的魅力一样.但是,我正在创建此小部件,仅作为iPad上的交互式信息亭使用.我可以自由使用最适合的浏览器, ...
html5 safari浏览器全屏显示隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作，也...
我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...
php让浏览器全屏,H5实现浏览器全屏API(全屏进入和全屏退出)
ITKEE社区V3.0.1版本更新,补丁包下载了解详情 , 获取ITKEE社区版本,快速授权了解详情 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrom ...