[译]HTML5 全屏Full-Screen API,支持Chrome、FF、IE11

什么是Full-Screen API

这个API允许单个的元素全屏显示,和F11全屏不同,这个API用来展示某个容器里面的图片、视频等。

支持的浏览器

所有的最新浏览器,包括IE11呢。移动端的支持有限,不过没关系,反正移动端的浏览器都是近乎全屏了。

因为这个API还没有规范,所以很可能以后会有改变,同时,使用起来也少不了各种浏览器厂商的前缀了。


Javascript 部分的API

下面的例子中,想要全屏显示的是ID为myimage的图片。先来看一下几个相应的方法。

1. document.fullscreenEnabled

如果当前浏览器允许进入全屏模式,这个属性返回true,可用来检测浏览器是否支持全屏API

if (document.fullscreenEnabled) { ... }

早期的时候,screen中的s是大写的,现在都小写了,除了Firefox;加上前缀,跨浏览器的代码是:

// full-screen 可用?
if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {
...
}

Opera 12是唯一不需要加前缀的浏览器,不过Opera 15+ 需要加webkit,为啥呢?因为两年前就换内核了啊,不过这个不怎么重要,反正很少人用Opera

2. element.requestFullscreen()

这个方法是单个元素全屏显示

例如:

document.getElementById("myimage").requestFullscreen();

同样,Firefox的screen的s是大写的:

var i = document.getElementById("myimage");
 
// go full-screen
if (i.requestFullscreen) {
    i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
    i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
    i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
    i.msRequestFullscreen();
}

3. document.fullscreenElement

这个属性返回当前全屏显示的元素,没有则返回null

if (document.fullscreenElement) { ... }

同样,Firefox的screen的s是大写的:

// are we full-screen?
if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
) {
...
}

4. document.exitFullscreen

这个方法退出全屏状态

document.exitFullscreen();

同样的,‘screen’是小写的,不过它之前写作 cancelFullScreen,在Firefox仍然还是这样写。

// exit full-screen
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}

5. document.fullscreenchange event

进/出全屏状态的时候触发事件,不附带任何信息,不过可通过上面介绍的document.fullscreenElement来监测当前是否是全屏状态。

document.addEventListener("fullscreenchange", function() { ... });

下面是各浏览器的写法,注意IE的写法有点特殊

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

6. document.fullscreenerror event

全屏有时会不成功,比如, iframes 如果没有 allowfullscreen 属性 或者窗口化的插件的内容想执行全屏却被阻止(windowed plug-in content may be blocked)的时候,fullscreenerror 事件就可能被触发:

document.addEventListener("fullscreenerror", function() { ... });

同样的,加上个浏览器厂商的前缀,注意IE的写法是驼峰式的(camel-casing):

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

Full-Screen CSS部分的API

全屏状态下的元素也能够被赋予样式

1. :fullscreen 伪类

控制处于全屏状态的元素

:fullscreen {
    ...
}

之前被叫做 :full-screen, 然后在Webkit 和 Firefox中还是这样。跨多浏览器代码:

:-webkit-full-screen {
}
 
:-moz-full-screen {
}
 
:-ms-fullscreen {
}
 
:fullscreen {
}

2. ::backdrop伪元素

当不同比例的元素,比如图像,全屏的时候,多余的背景色可以用这个伪元素来定义。

:fullscreen::backdrop {
    background-color: #006; /* dark blue */
}

backdrop就是全屏元素后面的空白背景,在全屏元素之下、在页面剩下元素之上,IE11支持, Firefox 和 Opera 12不支持。Chrome、Safari 和 Opera 15+ 引入了这个 backdrop element 但是不允许定义样式。目前仅仅能够作用于 IE11,所以实际代码如下

:-ms-fullscreen::-ms-backdrop {
    background-color: #006; /* dark blue */
}

各浏览器全屏样式区别

在 IE11, Firefox, 和 Opera 12 全屏元素是 100% 的 width 和 height ,图片因此就拉伸变形了。在IE11 为全屏元素设置width 和 height 的结果是元素跑到了屏幕 的左上角,背景为黑色(可以用::backdrop改为其它色)。Opera 12 和 IE11 类似,不过 backdrop背景是透明的,Firefox 忽略尺寸设置。在Chrome, Safari, 和 Opera 15+ 全屏元素是居中的、背景backdrop元素黑色。

如果要保持浏览器的一致性,同样可以为 Webkit/Blink 内核的浏览器像 Firefox/IE11 这样拉伸图片:

:-webkit-full-screen {
    position: fixed;
    width: 100%;
    top: 0;
    background: none;
}

或者,为IE11 赋予和 Webkit/Blink 一样的居中方式:

:-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

这个方法在 Firefox无效,它忽略上面提到的width和height,解决的方法很简单:可以变相地让它的父元素全屏,然后调节它的尺寸。


想要开始使用了?

Full-Screen API 相对简单,不过浏览器差异使得代码很丑陋,并且不保证将来不变(原文作者一年前还写了一篇文章,变化挺大), 把精力放到其它事情上,等到这个 API 稳定之后再来看。

在HTML5 游戏和视频为主的网站,全屏几乎是必须的,如果不想自己维护代码,可以使用一个现成的库,例如 screenfull.js

原文地址:How to Use the HTML5 Full-Screen API (Again)

标签: javascript, 全屏, fullscreen

已有 2 条评论

  1. kevin kevin

    你好,我用这个代码在ipad pro -ios10.3的safari浏览器上,不能实现全屏,请问safari上有专门的api吗?

    1. Bob Bob

      safari移动端不支持
      http://caniuse.com/#feat=fullscreen

添加新评论