zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    POJ 2240 Arbitrage spfa 判正环
    POJ 3259 Wormholes spfa 判负环
    POJ1680 Currency Exchange SPFA判正环
    HDU5649 DZY Loves Sorting 线段树
    HDU 5648 DZY Loves Math 暴力打表
    HDU5647 DZY Loves Connecting 树形DP
    CDOJ 1071 秋实大哥下棋 线段树
    HDU5046 Airport dancing links 重复覆盖+二分
    HDU 3335 Divisibility dancing links 重复覆盖
    FZU1686 神龙的难题 dancing links 重复覆盖
  • 原文地址:https://www.cnblogs.com/jofun/p/8493178.html
Copyright © 2011-2022 走看看