Fullscreen API 全屏显现网页

2019年8月30日 120次阅读 来源: potato1314

第一次看到运用 Fullscreen API 全屏显现网页，是 FaceBook 中的照片放大。作为一个比较新的 API，现在只要 Safari、Chrome 和 FireFox 三种浏览器支撑该特征。由于还没有宣布正式版的范例，所以必需运用浏览器特定的要领，也就是运用增加前缀（webit/moz）的要领。
这个 API 不仅能够使全部页面全屏显现，也能够使页面中的某个元素全屏显现。它的设想初志是为了全屏显现 HTML5 视频和游戏，以便更全面的替换 flash 功用。只管另有许多有待完美的处所，然则作为一个新的浏览器特征，在某些处所照样能够极大地加强用户体验。

1. 范例挪用体式格局

要对某个元素运用全屏殊效，范例的流程是：

  1. 挪用这个元素对象的 requestFullscreen() 要领；

  2. 浏览器将元素全屏显现，转变相干的属性值，然后触发 document 的 fullscreenchange 事宜；

  3. 退出全屏时有两种体式格局，一种是默许的按 ESC 键退出，一种是挪用 document 的 exitFullscreen() 要领；

  4. 浏览器将元素退出全屏显现，转变相干属性值，再次触发 fullscreenchange 要领。

浏览器在转变全屏状况时修正的相干属性，是指修正当前全屏状况有否、全屏显现的元素对象，这些属性都是只读的。

浏览器触发 fullscreenchange 事宜，默许不做任何处置惩罚，内部的处置惩罚函数须要编程职员自行推断当前全屏状况后，举行响应处置惩罚。
对应的，范例中还增加了一个 :fullscreen 伪类，对当前全屏的元素举行款式定义。

2. 封装API

Fullscreen 现在只要两个要领：进入全屏、退出全屏，三个属性（全部是只读的）：是不是支撑全屏、当前全屏状况、当前全屏元素，以及一个在全屏状况转变时触发的事宜（ Using full-screen mode 中提到另有一个 fullscreenerror，然则我没有测试出怎样才触发这个事宜 ）。与 W3 草案 比拟，FireFox 的完成更相符范例，而 webkit 内核浏览器中的要领则要自我许多。
一切的要领和属性中，只要 requestFullscreen() 是 element 对象的要领，其他全部是 document 对象一切的要领和属性。

2.1 进入全屏：element.requestFullscreen()

将 element 全屏显现。webkit内核浏览器和Firefox表现差异，前者只请求element是DOM元素即可，后者则请求DOM必需是文档流中的元素，比较严厉，不然不能全屏显现。
出于平安斟酌，全屏状况下默许是不许可用户输入的。webkit 内核浏览器会阻挠除方向键、控制键以外的键盘输入，FireFox 会在输入时发出请求用户退出全屏状况的提醒。前者能够经由过程在要领 webkitRequestFullScreen() 中传入参数 Element.LLOW_KEYBOARD_INPUT 许可用户输入，但 Safari 一旦传入该参数，全部 Fullscreen 功用都邑坏掉（这应该是 Safari 的一个bug）；后者直接就能够输入，除了有个烦人的提醒。

webkit 浏览器中能够经由过程只读属性 document.webkitFullScreenKeyboardInputAllowed 检察当前是不是许可全屏状况下的输入。

/**
 * 范例化 requestFullscreen 要领
 * @param {DOM} elem 要全屏显现的元素(webkit下只假如DOM即可，Firefox下必需是文档中的DOM元素)
 */
function requestFullscreen( elem ) {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    }
    else if (elem.webkitRequestFullScreen) {
        // 对 Chrome 迥殊处置惩罚，
        // 参数 Element.ALLOW_KEYBOARD_INPUT 使全屏状况中能够键盘输入。
        if ( window.navigator.userAgent.toUpperCase().indexOf( 'CHROME' ) >= 0 ) {
            elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
        }
        // Safari 浏览器中，假如要领内有参数，则 Fullscreen 功用不可用。
        else {
            elem.webkitRequestFullScreen();
        }
    }
    else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    }
}

2.2 退出全屏：document.exitFullscreen()

从全屏状况中退出。现在完成的要领都是 cancelFullScreen() ,而不是范例的 exitFullscreen()。

/**
 * 范例化 exitFullscreen 要领
 */
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
}

2.3 浏览器是不是支撑全屏：document.fullscreenEnabled

经由过程该属性的boolean值推断浏览器是支撑 Fullscreen 功用。
webkit 内核的浏览器现在还没有该属性，因而只能经由过程才能剖断来推断是不是支撑全屏显现功用。Firefox 已经有了对应的属性定义。

/* 范例化 fullscreenEnabled 属性 （只读） */
document.fullscreenEnabled = ( function() {
        var doc = document.documentElement;
        return ( 'requestFullscreen' in doc ) ||
               ( 'webkitRequestFullScreen' in doc ) ||
               // 对Firefox除了才能推断，还加上了属性推断
               ( 'mozRequestFullScreen' in doc && document.mozFullScreenEnabled ) ||
               false;
    } )();

2.4 ：document.fullscreenElement

当前全屏显现的DOM元素。

/**
 * 范例化 fullscreenElement 属性 （只读）
 * 以同名要领替换
 */
function fullscreenElement() {
    return document.fullscreenElement ||
           document.webkitCurrentFullScreenElement ||
           document.mozFullScreenElement ||
           null;
}

2.5 当前全屏状况：document.fullscreen

该属性并未在2012/6/3的 w3草案 中涌现，但在Using full-screen mode 一文中引见了该属性。其值为 boolean 范例，推断当前文档的全屏状况。

假如终究去掉这个推断全屏状况的属性，我们依然能够经由过程 document.fullscreenElement 的值是不是为 null 来推断全屏与否

/**
 * 范例化 fullscreen 属性 （只读）
 * 以同名要领替换
 */
function fullscreen() {
    return document.fullscreen ||
           document.webkitIsFullScreen ||
           document.mozFullScreen ||
           false;
}

2.6 全屏状况转变事宜：fullscreenchange

该事宜要绑定在 document 上，该事宜仅在全屏状况转变时触发，默许没有任何行动。

/* 绑定 document 的 fullscreenchange 事宜 */
document.addEventListener(
    'fullscreenchange', // webkitfullscreenchange/mozfullscreenchange
    function( evt ){
        //todo 全屏状况转变时的时候处置惩罚。
        //默许不会有任何处置惩罚，须要本身推断当前屏幕全屏与否，做出响应处置惩罚。
    },
    false
);

/* 假如运用 jQuery ： */
$( document ).bind(
    'fullscreenchange webkitfullscreenchange mozfullscreenchange',
    function(){
        //todo code
    }
);

3. 全屏款式设置

范例中，经由过程 :fullscreen 伪类对全屏的元素举行款式定义。

默许状况下，浏览器只会简朴地将元素设置为全屏显现。假如该元素全屏后，高度比屏幕还高，超越的部份将会被隐蔽。为了将超越部份能够转动显现，最顶层全屏显现的元素要迥殊设置：

position : fixed;
top      : 0;
left     : 0;
width    : 100%;
height   : 100%;
overflow : auto;

平常状况下，要全屏显现的元素是不能像上面如许设置的。那末我们能够变通下，设置一个 <div/>，围困要全屏的元素，然后将这个 <div/> 设置为全屏，上面的款式定义就能够定义在这个 <div/> 上，响应的，:fullscreen 将会作用在这个 <div/> 上。如许，太长的元素就能够在这个围困层内转动显现。

4. 迥殊注重

  • 现在 FireFox 10、Safari 5.1+、Chrome 15+ 支撑全屏

  • 能够使恣意元素全屏显现，不只是全部页面

  • 全屏只能从事宜触发（用户操纵），而不能用代码直接触发

  • 全屏状况下，webkit 内核浏览器默许会阻挠除方向键、控制键以外的键盘输入，FireFox 会在输入时发出退出全屏状况提醒。处置惩罚要领在 封装API 部份有申明。

下面是现实中碰到的须要注重的处所：

  • 全屏状况切换须要时候。实行 requestFullscreen() 后，并不会马上进入全屏状况，对应的全屏属性不会马上变动，而是有一个实行时候。因而，只能在 fullscreenchange 事宜触发后才代表进入了全屏状况。然则在 fullscreenchange 事宜中挪用 $(window).width() 并不总能取得全屏的尺寸，这个征象很新鲜。假如须要屏幕尺寸，能够经由过程 window.screen.width 来取得。

  • 触及修正DOM文档须注重代码位置。当用 <div/> 围困要全屏显现的元素时，这段 javascript 代码不应该在要全屏显现的元素内部，不然这段代码会被实行两遍，而且第二遍不会在断点中被看管到，缘由将在后文细致描述。

  • ESC 键差异体系功用差异。现在发明点击 ESC 退出全屏时，mac体系不会再分外触发键盘事宜，然则win7体系下动身 fullscreenchange 事宜后还会立马触发键盘事宜，因而假如另有不愿望被触发的键盘事宜，能够设置一个看管变量，在很短时候后再修正看管变量，以错过这个立马实行的时候。

5. 未触及功用

  • iframe 元素的 allowfullscreen 属性

  • ::backdrop 伪类

  • 细致其他细节能够参考 W3 草案

6. 结语

Fullscreen API 毕竟现在只是草案，还没有构成正式的范例，何况各个浏览器的完成状况也不完全雷同，以至细节上的完成差异更能够激发料想不到的题目。但作为渐进加强体式格局运用的新功用，能够极大的加强用户体验。仍要依据范例的完美，精益求精我们的代码。
细致代码能够参考：https://github.com/calefy/calefy.github.com/blob/master/js/Fullscreen.js

参考

  1. W3 草案 2012/6/3版

  2. Using full-screen mode

  3. Enhance Your Website with the FullScreen API

  4. Using the Fullscreen API in web browsers

  5. 代码参考 jQuery Fullscreen 插件

本文参考

    原文作者：potato1314
    原文地址: https://segmentfault.com/a/1190000005770540
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞