JavaScript网页全屏API

2018-06-24 01:35:25来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是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/

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:git简单的使用步骤

下一篇:跟面向对象卯上了,看看ES6的“类”