当前位置：首页 > JavaScript

js实现火狐全屏

2026-03-16 05:32:26JavaScript

火狐浏览器全屏API实现

火狐浏览器支持使用标准的Fullscreen API实现全屏功能。以下为JavaScript代码示例：

// 触发全屏
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox专用前缀
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox专用前缀
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// 检测全屏状态
function isFullscreen() {
  return document.fullscreenElement || 
         document.mozFullScreenElement ||
         document.webkitFullscreenElement || 
         document.msFullscreenElement;
}

// 全屏切换事件监听
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox专用事件
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
  console.log('全屏状态变化:', isFullscreen());
}

实际应用示例

为按钮添加全屏切换功能：

document.getElementById('fullscreen-btn').addEventListener('click', function() {
  if (!isFullscreen()) {
    requestFullscreen(document.documentElement); // 整个页面全屏
    // 或指定元素 requestFullscreen(document.getElementById('target'))
  } else {
    exitFullscreen();
  }
});

注意事项

火狐浏览器需要用户手势触发全屏请求，不能通过异步回调或定时器自动触发。直接执行requestFullscreen()会因安全限制失败。

全屏样式可通过CSS伪类控制：

js实现火狐全屏

:-moz-full-screen { background: white; } /* Firefox专用 */
:-webkit-full-screen { background: white; }
:-ms-fullscreen { background: white; }
:fullscreen { background: white; }