这个问题其实挺常见的，我之前做项目时也碰到过类似的场景。核心原因是你的导航栏用了position: fixed且z-index: 1，而浏览器默认不会在iframe进入全屏时自动调整其他元素的层级或可见性。下面给你几个实用的解决方案：

方案一：监听全局全屏切换事件，动态调整导航栏状态 #

通过监听全屏切换事件，我们可以判断当前是否是iframe进入了全屏，然后针对性地修改导航栏的样式：

JavaScript 代码 #

// 处理不同浏览器的全屏事件前缀（可选，兼容旧版浏览器）
const fullscreenEvent = document.fullscreenEnabled 
  ? 'fullscreenchange' 
  : document.webkitFullscreenEnabled 
    ? 'webkitfullscreenchange' 
    : document.mozFullscreenEnabled 
      ? 'mozfullscreenchange' 
      : 'MSFullscreenChange';

document.addEventListener(fullscreenEvent, function() {
  const navbar = document.querySelector('.navbar');
  const fullscreenElement = document.fullscreenElement || 
                            document.webkitFullscreenElement || 
                            document.mozFullscreenElement || 
                            document.msFullscreenElement;
  
  // 判断当前全屏元素是否是目标iframe
  if (fullscreenElement) {
    // 如果你的iframe有特定类名（比如"fullscreen-iframe"），用类名判断会更准确
    // if (fullscreenElement.classList.contains('fullscreen-iframe')) {
    if (fullscreenElement.tagName === 'IFRAME') {
      // 两种选择：要么完全隐藏导航栏，要么降低它的层级让iframe前置
      navbar.classList.add('hidden-in-fullscreen');
    }
  } else {
    // 退出全屏时恢复导航栏状态
    navbar.classList.remove('hidden-in-fullscreen');
  }
});

CSS 代码 #

/* 完全隐藏导航栏的样式 */
.hidden-in-fullscreen {
  display: none !important;
}

/* 或者选择降低层级，让iframe在上方（适合不想完全隐藏的场景） */
/* .hidden-in-fullscreen {
  z-index: -1 !important;
} */

注意：如果iframe是跨域的，父页面无法直接访问iframe的DOM元素，这时候给iframe加一个唯一的类名（比如fullscreen-iframe），通过类名判断会比tagName更可靠。

方案二：通过iframe内部消息通知父页面（适合跨域场景） #

如果你的iframe内容是跨域的，或者你需要更精准地控制触发时机，可以在iframe内部触发全屏时，给父页面发送消息，父页面收到消息后调整导航栏：

iframe 内部代码 #

// 假设iframe里有个全屏按钮
document.getElementById('fullscreen-btn').addEventListener('click', async function() {
  const iframe = window.frameElement;
  try {
    await iframe.requestFullscreen();
    // 通知父页面进入全屏
    window.parent.postMessage('iframeEnterFullscreen', '*');
  } catch (err) {
    console.error('全屏请求失败:', err);
  }
});

// 监听iframe退出全屏事件
document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
    window.parent.postMessage('iframeExitFullscreen', '*');
  }
});

父页面代码 #

window.addEventListener('message', function(event) {
  // 可以通过event.origin验证消息来源，提升安全性
  // if (event.origin !== 'https://your-iframe-domain.com') return;
  
  const navbar = document.querySelector('.navbar');
  if (event.data === 'iframeEnterFullscreen') {
    navbar.classList.add('hidden-in-fullscreen');
  } else if (event.data === 'iframeExitFullscreen') {
    navbar.classList.remove('hidden-in-fullscreen');
  }
});

安全提示：实际使用时，建议在postMessage中指定具体的目标域名，避免接收未知来源的消息，防止安全风险。

方案三：直接修改导航栏的z-index逻辑（极简方案） #

如果你的导航栏不需要一直保持z-index:1，可以给它设置动态层级：只有当没有元素全屏时，才保持较高层级；全屏时自动降低。这种方式不需要监听事件，利用CSS伪类就能实现：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* 当页面有元素进入全屏时，降低导航栏层级 */
:fullscreen ~ .navbar {
  z-index: -1;
}

/* 兼容不同浏览器的伪类前缀 */
:-webkit-full-screen ~ .navbar {
  z-index: -1;
}

:-moz-full-screen ~ .navbar {
  z-index: -1;
}

这个方案最简单，但缺点是只要页面中有任何元素进入全屏，导航栏都会降低层级，如果你有其他全屏元素不需要隐藏导航栏，这个方案就不太适用了。

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