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元素。默認是。如果使用除當前活動之外的其他元素進行調用，則如果它是一個后代，它將切換到該元素。
如果您的頁面位於內部，