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

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

狼影

发布： 2025-11-24 20:58:02

原创

947人浏览过

全屏功能需封装跨浏览器兼容的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()

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

封装跨浏览器全屏函数

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

立即学习“Java免费学习笔记（深入）”；

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事件，注意带前缀：

畅图

AI可视化工具

147

查看详情

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是否存在。