JavaScript全屏控制_跨浏览器兼容性解决方案-js教程-PHP中文网

全屏功能需封装跨浏览器兼容的javascript逻辑。标准api为requestfullscreen，webkit内核用webkitrequestfullscreen，firefox用mozrequestfullscreen，ie/edge旧版用msrequestfullscreen；退出方法对应exitfullscreen、webkitexitfullscreen、mozcancelfullscreen、msexitfullscreen；监听fullscreenchange事件时需注册带前缀版本；通过document.fullscreenelement判断状态；注意全屏须由用户手势触发，移动端支持有限，iframe需设置allow="fullscreen"属性。

javascript全屏控制_跨浏览器兼容性解决方案

在现代网页开发中，全屏功能常用于视频播放、游戏或数据展示场景。JavaScript提供了进入和退出全屏的API，但不同浏览器对全屏控制的实现方式存在差异。为确保跨浏览器兼容性，需要封装统一的处理逻辑。

全屏API的浏览器差异

原生全屏API（Fullscreen API）已被大多数现代浏览器支持，但部分旧版本浏览器仍需使用前缀或替代方法：

标准API：element.requestFullscreen()
Webkit内核（Chrome/Safari）：element.webkitRequestFullscreen()
Firefox：element.mozRequestFullScreen()
IE/Edge旧版：element.msRequestFullscreen()

退出全屏同样存在对应的方法差异，需一一适配。

封装跨浏览器全屏函数

通过检测元素支持的方法，调用对应的全屏请求：

function enterFullscreen(element) {
  element = element || document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

退出全屏操作作用于document：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

监听全屏状态变化

全屏状态改变时会触发fullscreenchange事件，注意带前缀：

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
}

判断当前是否全屏，可检查document.fullscreenElement是否存在。