如何在浏览器全屏模式下实现多个iframe的正常显示？

核心思路 #

问题根源在于你之前可能直接对单个iframe触发全屏操作。要实现5个iframe同时在全屏模式下展示，核心是用一个容器包裹所有iframe，将这个容器作为全屏触发的目标元素，再通过CSS布局让容器内的iframe合理分配全屏空间。

完整代码实现 #

HTML

<button id="fullscreenBtn">进入全屏</button>
<!-- 包裹所有iframe的容器 -->
<div id="fullscreenContainer">
  <iframe src="你的资源地址1" frameborder="0"></iframe>
  <iframe src="你的资源地址2" frameborder="0"></iframe>
  <iframe src="你的资源地址3" frameborder="0"></iframe>
  <iframe src="你的资源地址4" frameborder="0"></iframe>
  <iframe src="你的资源地址5" frameborder="0"></iframe>
</div>

CSS

/* 默认状态下隐藏容器 */
#fullscreenContainer {
  display: none;
  width: 100vw;
  height: 100vh;
  /* 用Grid布局实现2列3行的排列，可按需调整 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
}

/* 全屏状态下显示容器并应用Grid布局 */
:fullscreen #fullscreenContainer {
  display: grid;
}

/* 退出全屏时重新隐藏容器 */
#fullscreenContainer:not(:fullscreen) {
  display: none;
}

/* 让iframe占满所在网格单元 */
#fullscreenContainer iframe {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

/* 全屏按钮基础样式（可选） */
#fullscreenBtn {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript

const fullscreenBtn = document.getElementById('fullscreenBtn');
const container = document.getElementById('fullscreenContainer');

// 切换全屏状态函数
async function toggleFullscreen() {
  if (!document.fullscreenElement) {
    // 进入全屏：以容器为目标
    try {
      await container.requestFullscreen();
    } catch (err) {
      console.error('进入全屏失败:', err);
    }
  } else {
    // 退出全屏
    await document.exitFullscreen();
  }
}

// 绑定按钮点击事件
fullscreenBtn.addEventListener('click', toggleFullscreen);

// 监听全屏状态变化，处理容器显示逻辑
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    container.style.display = 'none';
  }
});

关键说明 #

• 全屏目标选择：必须以包裹所有iframe的容器作为全屏对象，而非单个iframe，这样所有iframe才能在全屏环境下同时展示。
• 布局灵活调整：示例用CSS Grid实现2列3行的排列，你可以根据需求修改grid-template-columns和grid-template-rows参数，比如改成3列2行、均分的5块布局等。
• 样式适配细节：设置iframe宽高为100%以占满布局单元，通过gap和padding控制间距与内边距，提升视觉体验。

内容的提问来源于stack exchange，提问作者Pyli