js怎么实现全屏显示

在网页开发中，实现全屏显示是很多场景的刚需，比如视频播放页面、在线文档编辑、大屏数据展示等，使用JavaScript配合浏览器原生的Fullscreen API就可以完成全屏相关的所有操作，不过需要注意不同浏览器的兼容性处理。

全屏API的核心方法和属性

Fullscreen API提供了几个核心的方法用于操作全屏状态，不同浏览器在旧版本中可能存在前缀差异，常见的适配前缀有webkit、moz、ms，实际开发中需要先做兼容处理。

1. 进入全屏的方法

进入全屏需要调用指定元素的全屏请求方法，通常是requestFullscreen，不同浏览器前缀对应的方法名如下：

• 标准方法：Element.requestFullscreen()
• webkit内核浏览器：Element.webkitRequestFullscreen()
• moz内核浏览器：Element.mozRequestFullScreen()
• ms内核浏览器：Element.msRequestFullscreen()

2. 退出全屏的方法

退出全屏需要调用文档对象的退出全屏方法，标准方法是document.exitFullscreen()，同样存在前缀差异：

• 标准方法：document.exitFullscreen()
• webkit内核浏览器：document.webkitExitFullscreen()
• moz内核浏览器：document.mozCancelFullScreen()
• ms内核浏览器：document.msExitFullscreen()

3. 全屏状态相关属性

可以通过document.fullscreenElement判断当前是否处于全屏状态，该属性返回当前处于全屏状态的元素，如果为null则表示没有元素处于全屏状态。同样存在前缀差异：

• 标准属性：document.fullscreenElement
• webkit内核浏览器：document.webkitFullscreenElement
• moz内核浏览器：document.mozFullScreenElement
• ms内核浏览器：document.msFullscreenElement

兼容处理工具函数

为了统一不同浏览器的差异，我们可以先封装几个工具函数，后续直接使用这些函数操作全屏，不需要每次都判断前缀。

// 获取带有兼容前缀的全屏请求方法
function getRequestFullscreen() {
  const element = document.documentElement; // 默认操作整个页面，也可以传入指定元素
  if (element.requestFullscreen) {
    return element.requestFullscreen;
  } else if (element.webkitRequestFullscreen) {
    return element.webkitRequestFullscreen;
  } else if (element.mozRequestFullScreen) {
    return element.mozRequestFullScreen;
  } else if (element.msRequestFullscreen) {
    return element.msRequestFullscreen;
  }
  return null;
}

// 获取带有兼容前缀的退出全屏方法
function getExitFullscreen() {
  if (document.exitFullscreen) {
    return document.exitFullscreen;
  } else if (document.webkitExitFullscreen) {
    return document.webkitExitFullscreen;
  } else if (document.mozCancelFullScreen) {
    return document.mozCancelFullScreen;
  } else if (document.msExitFullscreen) {
    return document.msExitFullscreen;
  }
  return null;
}

// 判断是否处于全屏状态
function isFullscreen() {
  if (document.fullscreenElement !== undefined) {
    return !!document.fullscreenElement;
  } else if (document.webkitFullscreenElement !== undefined) {
    return !!document.webkitFullscreenElement;
  } else if (document.mozFullScreenElement !== undefined) {
    return !!document.mozFullScreenElement;
  } else if (document.msFullscreenElement !== undefined) {
    return !!document.msFullscreenElement;
  }
  return false;
}

实现进入和退出全屏的完整示例

下面的示例会创建一个按钮，点击按钮可以切换全屏状态，进入全屏时按钮文字变为退出全屏，退出全屏时按钮文字变为进入全屏。

HTML结构

<div class="fullscreen-container">
  <h3>全屏显示测试页面</h3>
  <p>点击下方按钮可以切换全屏状态</p>
  <button id="fullscreenBtn">进入全屏</button>
</div>

CSS样式

.fullscreen-container {
  padding: 20px;
  text-align: center;
}

#fullscreenBtn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
}

#fullscreenBtn:hover {
  background-color: #337ecc;
}

JavaScript逻辑

// 获取按钮元素
const fullscreenBtn = document.getElementById('fullscreenBtn');

// 进入全屏的函数
function enterFullscreen() {
  const requestMethod = getRequestFullscreen();
  if (requestMethod) {
    // 调用方法时需要绑定上下文，因为是从对象上获取的方法
    requestMethod.call(document.documentElement).then(() => {
      console.log('进入全屏成功');
    }).catch((err) => {
      console.error('进入全屏失败:', err);
    });
  } else {
    alert('当前浏览器不支持全屏功能');
  }
}

// 退出全屏的函数
function exitFullscreen() {
  const exitMethod = getExitFullscreen();
  if (exitMethod) {
    exitMethod.call(document).then(() => {
      console.log('退出全屏成功');
    }).catch((err) => {
      console.error('退出全屏失败:', err);
    });
  }
}

// 按钮点击事件处理
fullscreenBtn.addEventListener('click', () => {
  if (isFullscreen()) {
    // 当前是全屏状态，执行退出全屏
    exitFullscreen();
  } else {
    // 当前不是全屏状态，执行进入全屏
    enterFullscreen();
  }
});

// 监听全屏状态变化，更新按钮文字
document.addEventListener('fullscreenchange', () => {
  fullscreenBtn.textContent = isFullscreen() ? '退出全屏' : '进入全屏';
});
// 兼容webkit内核的全屏状态变化事件
document.addEventListener('webkitfullscreenchange', () => {
  fullscreenBtn.textContent = isFullscreen() ? '退出全屏' : '进入全屏';
});
// 兼容moz内核的全屏状态变化事件
document.addEventListener('mozfullscreenchange', () => {
  fullscreenBtn.textContent = isFullscreen() ? '退出全屏' : '进入全屏';
});
// 兼容ms内核的全屏状态变化事件
document.addEventListener('MSFullscreenChange', () => {
  fullscreenBtn.textContent = isFullscreen() ? '退出全屏' : '进入全屏';
});

全屏相关的注意事项

• 全屏请求必须由用户主动触发，比如点击按钮、触摸事件等，不能在页面加载完成后自动调用，否则浏览器会阻止这个操作。
• 进入全屏后，按ESC键或者F11键可以退出全屏，不同浏览器的快捷键可能存在差异。
• 全屏状态下，浏览器的部分默认行为会变化，比如滚动条会隐藏，页面的尺寸会变为屏幕的尺寸。
• 如果需要指定某个元素全屏，而不是整个页面，只需要把getRequestFullscreen函数里的document.documentElement替换成对应的元素即可，比如document.getElementById('target')。

注意：部分浏览器可能不允许iframe内的页面触发全屏，除非iframe添加了allowfullscreen属性，如果需要嵌入的页面支持全屏，需要给iframe添加该属性。

js全屏显示Fullscreen_APIrequestFullscreenexitFullscreen修改时间：2026-06-12 05:45:44