screenfull.js跨浏览器使用JavaScript Fullscreen API

心已赠人 2022-05-16 10:18 32阅读 0赞

screenfull.js是用于跨浏览器使用JavaScript Fullscreen API的简单包装器，可让您将页面或任何元素全屏显示，并且平滑浏览器实现差异，本文只是对封装方法做一个简单的翻译。

github地址：[https://github.com/sindresorhus/screenfull.js][https_github.com_sindresorhus_screenfull.js] 。

## 支持 ##

浏览器支持情况：[https://caniuse.com/\#feat=fullscreen][https_caniuse.com_feat_fullscreen] 。

## 文档 ##

### 例子： ###

#### 全屏显示页面 ####

document.getElementById('button').addEventListener('click', () => { if (screenfull.enabled) { screenfull.request(); } else { // Ignore or do something else } });

#### 全屏某个元素 ####

const el = document.getElementById('target');
    
    document.getElementById('button').addEventListener('click', () => { if (screenfull.enabled) { screenfull.request(el); } });

#### 全屏使用jQuery的元素 ####

const target = $('#target')[0]; // Get DOM element from jQuery collection
    
    $('#button').on('click', () => { if (screenfull.enabled) { screenfull.request(target); } });

#### 使用jQuery在图像上切换全屏 ####

$('img').on('click', event => {
        if (screenfull.enabled) {
            screenfull.toggle(event.target);
        }
    });

#### 检测全屏变化 ####

if (screenfull.enabled) {
        screenfull.on('change', () => { console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); }); }

删除侦听器：

screenfull.off('change', callback);

#### 检测全屏错误 ####

if (screenfull.enabled) {
        screenfull.on('error', event => {
            console.error('Failed to enable fullscreen', event);
        });
    }

### 方法 ###

#### .request() ####

使元素全屏。

接受DOM元素。默认是`<html>`。如果使用除当前活动之外的其他元素进行调用，则如果它是一个后代，它将切换到该元素。

如果您的页面位于内部，`<iframe>`则需要添加`allowfullscreen`属性（+ `webkitallowfullscreen`和`mozallowfullscreen`）。

请注意，只有点击，触摸，按键等用户活动启动时，浏览器才会进入全屏模式。

#### .exit() ####

退出全屏。

#### .toggle() ####

如果当前全屏模式未激活则请求全屏，否则退出全屏。

#### .on(event, function) ####

事件： `change` `error`

添加侦听器，以便在浏览器进出全屏或出现错误时执行相应的事件。

#### .off(event, function) ####

删除以前注册的事件侦听器。

#### .onchange(function) ####

与`.on('change', function)` 效果相同。

#### .onerror(function) ####

与`.on('error', function)` 效果相同。

### 属性 ###

#### .isFullscreen ####

返回布尔值，表示当前是否处于全屏模式。

#### .element ####

返回当前全屏的元素，否则返回null。

#### .enabled ####

返回一个布尔值，是否允许您进入全屏。如果您的页面位于内部，`<iframe>`则需要添加`allowfullscreen`属性（+ `webkitallowfullscreen`和`mozallowfullscreen`）。

#### .raw ####

暴露在内部使用原始属性（如果需要前缀）：`requestFullscreen`, `exitFullscreen`, `fullscreenElement`, `fullscreenEnabled`, `fullscreenchange`, `fullscreenerror` 。

## 参考 ##

1.  [Using the Fullscreen API in web browsers][]
2.  [MDN - Fullscreen API][]
3.  [W3C Fullscreen spec][]
4.  [Building an amazing fullscreen mobile experience][]

[https_github.com_sindresorhus_screenfull.js]: https://github.com/sindresorhus/screenfull.js
[https_caniuse.com_feat_fullscreen]: https://caniuse.com/#feat=fullscreen
[Using the Fullscreen API in web browsers]: https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/
[MDN - Fullscreen API]: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
[W3C Fullscreen spec]: https://fullscreen.spec.whatwg.org/
[Building an amazing fullscreen mobile experience]: http://www.html5rocks.com/en/mobile/fullscreen/