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

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

github地址：https://github.com/sindresorhus/screenfull.js 。

支持

浏览器支持情况：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元素。默认是。如果使用除当前活动之外的其他元素进行调用，则如果它是一个后代，它将切换到该元素。

如果您的页面位于内部，