screenfull.js
screenfull.js 介绍
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://sindresorhus.com/screenfull.js
GitHub:https://github.com/sindresorhus/screenfull.js
网站描述:浏览器全屏插件