不为人知的requestFullscreen：解锁全屏API的隐藏力量

在现代Web开发中，requestFullscreen是最被低估的API之一。你以为它只是简单的全屏切换？实则暗藏玄机！本文将揭示那些连MDN都未曾明说的黑科技用法，带你重新认识这个浏览器原生能力。

基础认知的三大误区

// 大多数人这样使用（但存在致命缺陷）
document.getElementById('video').requestFullscreen();

误区真相：

并非所有元素都可全屏：<div>元素需设置contain: layout或明确尺寸
Safari的私有前缀陷阱：需同时处理webkitRequestFullscreen
权限限制：必须在用户交互事件中触发，异步调用会失败

被低估的实战神技

1. 精准控制全屏元素样式

/* 鲜为人知的全屏伪元素选择器 */
video:-webkit-full-screen { 
background: #000; /* 覆盖默认黑边 */
}

:fullscreen#controls {
opacity: 0.3;
transition: opacity 0.3s;
}

:fullscreen#controls:hover {
opacity: 1; /* 鼠标悬停显示控制栏 */
}

2. 多元素动态全屏切换

const fullscreenManager = {
currentElement: null,

  toggle(element) {
    if (this.currentElement === element && document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      this.currentElement = element;
      element.requestFullscreen().catch(e => {
        console.error('全屏失败:', e.name);
        // 优雅降级方案
        element.classList.add('simulated-fullscreen');
      });
    }
  }
};

// 画廊应用：点击不同图片切换全屏
document.querySelectorAll('.gallery-img').forEach(img => {
  img.addEventListener('click', () => fullscreenManager.toggle(img));
});

3. 全屏状态下的键盘劫持

document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
    // 全屏时重定义键盘事件
    document.addEventListener('keydown', handleFullscreenHotkeys);
  } else {
    document.removeEventListener('keydown', handleFullscreenHotkeys);
  }
});

function handleFullscreenHotkeys(e) {
if (e.key === 'Escape') return; // 保留默认退出

// 自定义快捷键：F切换滤镜/P画中画/S截图
if (e.key === 'f') toggleFilter();
if (e.ctrlKey && e.key === 'p') enterPictureInPicture();
if (e.shiftKey && e.key === 's') captureScreenshot();
  e.preventDefault(); // 阻止页面滚动
}

超越官方文档的三大黑科技

1. 伪装全屏检测（绕过安全限制）

// 检测是否在伪全屏模式（用户按F11）
const isFakeFullscreen = () => 
  window.outerHeight === screen.height && 
  !document.fullscreenElement;

// 应对策略
if (isFakeFullscreen()) {
  showAlert('请使用官方全屏按钮以获得完整体验');
}

2. 全屏状态持久化

// 页面刷新后恢复全屏状态
window.addEventListener('DOMContentLoaded', () => {
  const lastFullscreen = localStorage.getItem('fullscreenEl');
  if (lastFullscreen) {
    document.querySelector(lastFullscreen)?.requestFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  localStorage.setItem('fullscreenEl', 
    document.fullscreenElement?.id || ''
  );
});

3. 全屏中的全屏（嵌套沙盒）

<div id="main-screen">
  <iframe id="sub-screen" allowfullscreen></iframe>
</div>

<script>
  // 主容器全屏后，自动激活iframe内全屏
  mainScreen.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement === mainScreen) {
      const iframeDoc = subScreen.contentDocument;
      await iframeDoc.getElementById('video').requestFullscreen();
    }
  });
</script>

意想不到的应用场景

全屏表格编辑器

// Excel式体验
function enterSpreadsheetMode() {
  document.querySelector('.active-cell').scrollIntoView({block: 'center'});
  setTimeout(() => gridContainer.requestFullscreen(), 300);
}

全景图查看器

// 陀螺仪控制全景
document.addEventListener('fullscreenchange', initGyroControl);

全屏WebGL性能优化

// 全屏时切换高质量渲染
canvas.requestFullscreen({ navigationUI: 'hide' })
  .then(() => setRenderQuality('ultra'));

防录屏水印系统

:fullscreen::before {
content: "";
position: fixed;
z-index: 9999;
background: url('watermark.png') repeat;
opacity: 0.05;
pointer-events: none;
/* 更多防泄密技巧... */
}

开发者必知的陷阱清单

陷阱描述	解决方案
iOS Safari全屏视频强制横屏	添加playsinline属性 + 自定义旋转按钮
全屏状态丢失滚动位置	使用scroll-snap或保存scrollTop
全屏触发页面重排	提前设置width:100%;height:100%
全屏时无法打开DevTools	开发环境禁用全屏快捷键拦截
全屏元素内iframe权限限制	添加allow="fullscreen"属性

终极代码：全屏API完全解决方案

const Fullscreen = {
// 统一前缀处理
request: async (el = document.documentElement) => {
    const methods = [
      'requestFullscreen',
      'webkitRequestFullscreen',
      'mozRequestFullScreen',
      'msRequestFullscreen'
    ];
    for (const method of methods) {
      if (el[method]) {
        try {
          await el[method]({ navigationUI: 'hide' });
          returntrue;
        } catch (e) { console.warn(method, 'failed:', e) }
      }
    }
    returnfalse;
  },

// 状态检测
isActive: () => !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ),

// 退出全屏
exit: async () => {
    const exitMethods = [
      'exitFullscreen',
      'webkitExitFullscreen',
      'mozCancelFullScreen',
      'msExitFullscreen'
    ];
    for (const method of exitMethods) {
      if (document[method]) {
        try {
          awaitdocument[method]();
          returntrue;
        } catch (e) { console.warn(method, 'failed:', e) }
      }
    }
    returnfalse;
  },

// 事件监听统一封装
onChange: (callback) => {
    const events = [
      'fullscreenchange',
      'webkitfullscreenchange',
      'mozfullscreenchange',
      'MSFullscreenChange'
    ];
    events.forEach(evt =>document.addEventListener(evt, callback));
  }
};

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

实现网页全屏，记住这个超实用的 API

不为人知的requestFullscreen：解锁全屏API的隐藏力量

兼容性