screenfull.js是用于跨浏览器使用JavaScript Fullscreen api的简单包装器，可让您将页面或任何元素全屏显示，并且平滑浏览器实现差异 。

安装：

在命令行中执行：  （注：因为这是生产依赖，所以执行--save）  

npm install --save screenfull

例子：

全屏显示页面

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);
    });
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1933