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

夏侯野

2023-12-01

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元素。默认是<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 。