文章目录
  1. 1. 支持
  2. 2. 文档
    1. 2.1. 例子:
      1. 2.1.1. 全屏显示页面
      2. 2.1.2. 全屏某个元素
      3. 2.1.3. 全屏使用jQuery的元素
      4. 2.1.4. 使用jQuery在图像上切换全屏
      5. 2.1.5. 检测全屏变化
      6. 2.1.6. 检测全屏错误
    2. 2.2. 方法
      1. 2.2.1. .request()
      2. 2.2.2. .exit()
      3. 2.2.3. .toggle()
      4. 2.2.4. .on(event, function)
      5. 2.2.5. .off(event, function)
      6. 2.2.6. .onchange(function)
      7. 2.2.7. .onerror(function)
    3. 2.3. 属性
      1. 2.3.1. .isFullscreen
      2. 2.3.2. .element
      3. 2.3.3. .enabled
      4. 2.3.4. .raw
  3. 3. 参考

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

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

支持

浏览器支持情况:https://caniuse.com/#feat=fullscreen

文档

例子:

全屏显示页面

1
2
3
4
5
6
7
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request();
} else {
// Ignore or do something else
}
});

全屏某个元素

1
2
3
4
5
6
7
const el = document.getElementById('target');

document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request(el);
}
});

全屏使用jQuery的元素

1
2
3
4
5
6
7
const target = $('#target')[0]; // Get DOM element from jQuery collection

$('#button').on('click', () => {
if (screenfull.enabled) {
screenfull.request(target);
}
});

使用jQuery在图像上切换全屏

1
2
3
4
5
$('img').on('click', event => {
if (screenfull.enabled) {
screenfull.toggle(event.target);
}
});

检测全屏变化

1
2
3
4
5
if (screenfull.enabled) {
screenfull.on('change', () => {
console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
});
}

删除侦听器:

1
screenfull.off('change', callback);

检测全屏错误

1
2
3
4
5
if (screenfull.enabled) {
screenfull.on('error', event => {
console.error('Failed to enable fullscreen', event);
});
}

方法

.request()

使元素全屏。

接受DOM元素。默认是<html>。如果使用除当前活动之外的其他元素进行调用,则如果它是一个后代,它将切换到该元素。

如果您的页面位于内部,<iframe>则需要添加allowfullscreen属性(+ webkitallowfullscreenmozallowfullscreen)。

请注意,只有点击,触摸,按键等用户活动启动时,浏览器才会进入全屏模式。

.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属性(+ webkitallowfullscreenmozallowfullscreen)。

.raw

暴露在内部使用原始属性(如果需要前缀):requestFullscreen, exitFullscreen, fullscreenElement, fullscreenEnabled, fullscreenchange, fullscreenerror

参考

  1. Using the Fullscreen API in web browsers
  2. MDN - Fullscreen API
  3. W3C Fullscreen spec
  4. Building an amazing fullscreen mobile experience
文章目录
  1. 1. 支持
  2. 2. 文档
    1. 2.1. 例子:
      1. 2.1.1. 全屏显示页面
      2. 2.1.2. 全屏某个元素
      3. 2.1.3. 全屏使用jQuery的元素
      4. 2.1.4. 使用jQuery在图像上切换全屏
      5. 2.1.5. 检测全屏变化
      6. 2.1.6. 检测全屏错误
    2. 2.2. 方法
      1. 2.2.1. .request()
      2. 2.2.2. .exit()
      3. 2.2.3. .toggle()
      4. 2.2.4. .on(event, function)
      5. 2.2.5. .off(event, function)
      6. 2.2.6. .onchange(function)
      7. 2.2.7. .onerror(function)
    3. 2.3. 属性
      1. 2.3.1. .isFullscreen
      2. 2.3.2. .element
      3. 2.3.3. .enabled
      4. 2.3.4. .raw
  3. 3. 参考