当前位置：首页 > 行业动态 > 正文

html5全屏api

HTML5全屏API允许元素全屏显示，核心方法为 requestFullscreen()和 exitFullscreen()，触发 fullscreenchange事件，需处理浏览器前缀

HTML5全屏API基础

核心方法

方法名 说明 参数 返回值 兼容性处理
requestFullscreen() 请求进入全屏模式 可选配置对象（如{navigationUI: "hide"}） Promise对象 需检测方法是否存在，兼容旧版浏览器前缀
exitFullscreen() 退出全屏模式 无 无 需绑定在document或全屏元素上
toggleFullscreen() 切换全屏状态 无 无 较少使用，需谨慎处理状态

关键属性

属性名 类型 说明 兼容性
document.fullscreenElement DOM元素 当前全屏元素 现代浏览器支持
document.fullscreenEnabled 布尔值 是否支持全屏功能 现代浏览器支持
element.fullscreenWidth/Height 数值 全屏时元素尺寸 部分浏览器支持

核心事件

事件名 触发时机 绑定目标 回调参数
fullscreenchange 全屏状态变化时 document 包含全屏状态的Event对象
fullscreenerror 全屏请求失败时 目标元素 包含错误信息的Event对象

实现步骤与代码示例

基本调用方式

const btn = document.getElementById('fullscreen-btn');
const targetElement = document.getElementById('target');
btn.addEventListener('click', () => {
  if (targetElement.requestFullscreen) {
    targetElement.requestFullscreen().then(() => {
      console.log('进入全屏成功');
    }).catch(err => {
      console.error('全屏失败:', err);
    });
  } else if (targetElement.webkitRequestFullscreen) { // Safari/Chrome旧版
    targetElement.webkitRequestFullscreen();
  } else if (targetElement.mozRequestFullscreen) { // Firefox旧版
    targetElement.mozRequestFullscreen();
  } else {
    alert('浏览器不支持全屏API');
  }
});

状态检测与退出

document.addEventListener('fullscreenchange', () => {
  const isFullscreen = document.fullscreenElement !== null;
  console.log(`当前全屏状态: ${isFullscreen}`);
  if (!isFullscreen) {
    // 执行退出全屏后的清理操作
    document.getElementById('controls').style.display = 'block';
  }
});
// 手动退出全屏（需在全屏状态下调用）
document.getElementById('exit-btn').addEventListener('click', () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
});

兼容性处理方案

function launchFullscreen(element) {
  const requestMethod = element[`request${getPrefixedMethod('Fullscreen')}`];
  if (requestMethod) {
    return requestMethod.call(element);
  } else {
    console.warn('全屏API未实现');
    return Promise.reject(new Error('Fullscreen not supported'));
  }
}
function getPrefixedMethod(method) {
  const prefixes = ['', 'Webkit', 'Moz', 'O', 'ms'];
  for (const prefix of prefixes) {
    if (method[prefix] !== undefined) return prefix;
  }
  return null;
}

常见问题与解答

问题1：如何判断当前是否处于全屏状态？

解答：可以通过检查document.fullscreenElement属性是否为null来判断，当该属性存在非空值时，表示当前处于全屏状态，且该属性指向全屏的元素，同时可以结合fullscreenchange事件进行实时监控。

html5全屏api 第1张

if (document.fullscreenElement) {
  console.log('正在全屏中');
} else {
  console.log('非全屏状态');
}

问题2：为什么全屏请求被浏览器阻止？

解答：常见原因包括：

  1. 非用户触发：必须由用户交互（如点击/触摸事件）触发全屏请求，禁止通过onload或定时器自动触发。
  2. 跨域限制：尝试全屏的元素如果来自不同源（协议/域名/端口），会被浏览器阻止。
  3. 沙箱限制：在iframe中使用sandbox属性禁用了allow-scripts等权限时无法使用。
  4. HTTPS要求：部分浏览器要求页面必须通过HTTPS协议才能使用全
web全屏API
0

相关文章