JavaScript网页全屏API

在大多数的浏览器中都有实现网页全屏显示的功能，并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键。如今，W3C已经制定了关于网页全屏显示的API，利用这个API 可以实现网页的全屏显示，并且还能将某个特定的元素设置为全屏显示，在各浏览器的兼容性：google chrome 15 +, safri5.1+,firfox10+,IE11都已经开始支持全屏API。

进入全屏和退出全屏的方法：

进入全屏：element.requestFullscreen()

退出全屏：document.exitFullscreen()

当然这是W3C标准中的使用方法，在各浏览器使用中有所不同。

在webkit浏览器中：

进入全屏：element.webkitRequestFullScreen()
退出全屏：document.webkitCancelFullScreen()

在Gecko (Firefox)浏览器中：

进入全屏：element.mozRequestFullScreen()
退出全屏：document.mozCancelFullScreen()

虽然W3C制定了全屏API的标准，但在各浏览器中都没有很好的支持这个标准，因此在使用中还要进行必要的兼容性处理过程。

 

兼容性封装：

//进入全屏
function rfs() {
    var de = document.documentElement;

    if(de.requestFullscreen) {
        de.requestFullscreen();
    }

    if(de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    }

    if(de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
};

//退出全屏
function efs() {
    var d = document;

    if(d.exitFullscreen) {
        d.exitFullscreen();
    }

    if(d.mozCancelFullScreen) {
        d.mozCancelFullScreen();
    }

    if(d.webkitCancelFullScreen) {
        d.webkitCancelFullScreen();
    }
};

 

本人是在无意中发现的这个API，还没有真正的在项目中使用过，无法给出使用建议。因此在这里引用博客文章——html5实现全屏的api方法中的使用心得：

1）在safari和chrome下，全屏后的元素全自动全屏居中，且背景色变为黑色。我尝试过通过给body设背景色来改变下背景色的颜色，失败。在firefox下，全屏后的背景色为全屏那个元素的背景色，且元素并不居中。如果给body调全屏，在webkit内核的浏览器下和按11进入的全屏效果差得很远，主要是背景色问题，而firefox下则效果接近于f11全屏——当然还是有区别，比如进入全屏的动画过程就不相同。

2）退出全屏是通过给document来调来cancelFullScreen方法，但如果想让页面所有元素全部进入全屏的话，不能给document调requestFullScreen，只能给body调。

3）onFullScreenChange事件的回调，在safari里不能写alert，如果写alert，点击后会自动退出全屏。

4）按f11进入的全屏，onFullScreenChange事件不会响应。

5）进入全屏一定要点击某个节点，不能直接调进入全屏api。mouseover、mousemove等接近onload的事件也不行。click、mousedown、mouseup事件可以。策略应该同window.open应该是一样的。

6）ios暂不支持全屏api。

 

文章最后提供一个演示demo: http://robnyman.github.io/fullscreen/