浏览器全屏模式的启动函数 requestFullscreen 仍然需要附带各浏览器的 JS 方言前缀, 相信下面这段代码需要你花大量的搜索才能凑齐:
- // 判断各种浏览器, 找到正确的方法
- function launchFullscreen(element) {
- if(element.requestFullscreen) {
- element.requestFullscreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if(element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen();
- } else if(element.msRequestFullscreen) {
- element.msRequestFullscreen();
- }
- }
- // 启动全屏!
- launchFullScreen(document.documentElement); // 整个网页
- launchFullScreen(document.getElementById("videoElement")); // 某个页面元素
对你想要全屏显示的页面元素调用全屏方法, 浏览器窗口就会变成全屏, 但会先请求用户允许全屏模式. 要注意, 用户很有可能会拒绝全屏模式. 如果用户运行全屏模式, 则浏览器的工具条等按钮菜单都会隐藏, 你的页面会覆盖整个屏幕.
退出全屏模式
这个 exitFullscreen 方法 (也需要加浏览器前缀) 会让浏览器退出全屏模式, 变成正常模式.
- // 判断浏览器种类
- function exitFullscreen() {
- if(document.exitFullscreen) {
- document.exitFullscreen();
- } else if(document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if(document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- }
- }
- // 退出全屏模式!
- exitFullscreen();
需要注意的是, exitFullscreen 只能由 document 对象调用, 而不是启动全屏时传入的对象.
全屏属性和事件
不幸的是, 全屏属性和事件的相关方法也需要添加浏览器前缀, 但我相信很快就不需要这样做了.
document.fullScreenElement
: 全屏显示的网页元素.
document.fullScreenEnabled
: 判断当前是否处于全屏状态.
fullscreenchange 事件会在启动全屏或退出全屏时触发:
- var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
- var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀.
全屏样式 CSS
各种浏览器都提供了一个非常有用的全屏模式时的 CSS 样式规则:
- :-webkit-full-screen {
- /* properties */
- }
- :-moz-full-screen {
- /* properties */
- }
- :-ms-fullscreen {
- /* properties */
- }
- :full-screen { /*pre-spec */
- /* properties */
- }
- :fullscreen { /* spec */
- /* properties */
- }
- /* deeper elements */
- :-webkit-full-screen video {
- width: 100%;
- height: 100%;
- }
- /* styling the backdrop*/
- ::backdrop {
- /* properties */
- }
- ::-ms-backdrop {
- /* properties */
- }
有些情况下, WebKit 样式会出现一些问题, 你最好把这些样式保持简洁.
启动全屏 退出全屏 全屏状态属性(控制台显示)
这些全屏 API 都超级的简单, 而且超级的有用. 我第一次是在 MDN's BananaBread demo 中看到这个 API 的, 那是一个枪击游戏, 正好需要全屏化, 它使用了事件监听来检测全屏状态. 记住这些好用的 API, 需要的时候可以顺手拈来.
来源: http://www.webhek.com/post/fullscreen.html