Firefox中iframe内片段标识符不生效问题排查

用Firefox访问页面时，点击页面内的锚点链接完全没反应，但在Chrome中执行相同操作，页面会正常跳转到对应锚点位置。相关核心代码如下：

<a href="#f1r2">The times are not correct!</a>

<dl class="faq">
    <dt id="f1r2"><strong>The times are not correct!</strong></dt>
    <dd>It is possible the time displayed is from a ...</dd>
</dl>

补充简化示例 #

包含两个页面，嵌入iframe的页面代码：

<!-- firefox-in-iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Firefox in iframe</title>
</head>
<body>
    <h1>Test TOC in Firefox</h1>
    <iframe id="demo" src="firefox-in-iframe-w3.html" frameborder="1" style="width:100%; height:100%"></iframe>
</body>
</html>

内部iframe页面添加的高度对齐代码：

parent.document.getElementById('demo').addEventListener('load', (e) => {
  e.target.style.height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
});

原因分析 #

这不是Firefox的问题，根源在于iframe的动态高度设置逻辑：

• 当iframe加载完成后，JS将iframe高度设为内部文档的body高度，导致iframe的滚动条被隐藏。
• Firefox中，锚点跳转依赖iframe的视口滚动空间，没有滚动条就无法触发跳转行为。
• Chrome的锚点跳转逻辑会自动适配，即使iframe无滚动条也能定位到目标元素。

解决方案 #

提供两种可行修复方式：

• 方案一：移除动态设置iframe高度的JS代码，让iframe保留滚动条，Firefox即可正常处理锚点跳转。
• 方案二：手动通过JS处理锚点点击事件，强制定位目标元素：
  在iframe内部页面添加以下代码：

  document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = link.getAttribute('href').slice(1);
      const target = document.getElementById(targetId);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
  

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