关于requestFullscreen，你知多少？

相信这个API大家并不陌生，是的，它的用于将指定的 HTML 元素（或整个文档）切换到全屏模式的，浏览器提供的API.先说说为啥写这个吧，前几天要实现这样的一个功能：vue项目，输入URL后，跳转到某个路由页面，进入页面的时候，就自动全屏。 好家伙，居然没全屏。盘了一下API，发现requestFullscreen在mounted中不生效，必须要通过用户手动点击一下才会触发。今天我们好好说一下这个API。

基本用法

1. 进入全屏

const element = document.getElementById("fullscreen-element");
// 标准方法（带浏览器前缀兼容）
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari, Chrome <70
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  }
}
// 调用
requestFullscreen(element);

2. 退出全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { // Safari, Chrome <70
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE11
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  }
}

// 调用
exitFullscreen();

3. 检查当前是否全屏

function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement || // Safari, Chrome <70
    document.msFullscreenElement || // IE11
    document.mozFullScreenElement // Firefox
  );
}

console.log(isFullscreen()); // true/false

全屏事件监听

可以监听全屏状态变化：

document.addEventListener("fullscreenchange", () => {
  console.log("全屏状态变化", isFullscreen());
});
// 兼容不同浏览器
document.addEventListener("webkitfullscreenchange", () => { /* Safari, Chrome */ });
document.addEventListener("mozfullscreenchange", () => { /* Firefox */ });
document.addEventListener("MSFullscreenChange", () => { /* IE11 */ });

全屏样式优化

在全屏模式下，可以使用 :fullscreen CSS 伪类调整样式：

#fullscreen-element:fullscreen {
  background: black;
  width: 100%;
  height: 100%;
}

注意事项

1. 用户交互触发：现代浏览器要求 requestFullscreen 必须由用户手势（如 click、keypress）触发，否则会被阻止：

   button.addEventListener("click", () => {
     requestFullscreen(element);
   });
   

2. 兼容性：
   • 现代浏览器（Chrome、Firefox、Edge）支持标准 API。
   • Safari 和旧版浏览器需要带前缀（webkit/moz/ms）。
3. iframe 限制：如果元素在 <iframe> 内，需要添加 allowfullscreen 属性：

   <iframe src="..." allowfullscreen></iframe>
   

   最后再说一下我是怎么实现了 ** 首次进入页面后，出现弹框，点击确认，进入全屏，后续退出或进入全屏，通过点击按钮实现。**