ScrollSpy结合iframe出现功能异常问题求助

我之前也碰到过一模一样的坑！问题根源在于iframe加载完成后会改变页面的实际高度，而ScrollSpy初始化时是根据当时的页面布局计算锚点元素位置的，iframe渲染完成后页面高度发生变化，锚点的实际位置和ScrollSpy缓存的位置不匹配，自然就没法正确触发导航状态更新了。

给你两个实用的解决方案：

方案一：监听iframe加载完成后刷新ScrollSpy #

这是最稳妥的方法，等iframe完全加载、内容渲染完毕后，让ScrollSpy重新计算所有锚点的位置：

1. 先给你的iframe加个ID方便获取元素：

<div class="embed-responsive embed-responsive-16by9">
  <iframe id="target-iframe" class="embed-responsive-item" src="你的iframe地址"></iframe>
</div>

2. 添加JavaScript代码监听加载事件并执行刷新：

// 获取目标iframe元素
const iframe = document.getElementById('target-iframe');

// 监听iframe加载完成事件
iframe.addEventListener('load', function() {
  // 调用Bootstrap ScrollSpy的refresh方法，重新计算所有锚点位置
  $('[data-spy="scroll"]').each(function () {
    $(this).scrollspy('refresh');
  });
});

方案二：跨域iframe的兼容处理 #

如果你的iframe是加载跨域内容（比如外部网站），浏览器的同源策略会阻止你监听load事件，这时候可以用延迟刷新的方式兜底：

// 延迟1秒执行刷新（时间可以根据iframe内容加载速度调整）
setTimeout(function() {
  $('[data-spy="scroll"]').scrollspy('refresh');
}, 1000);

核心逻辑就是：ScrollSpy的refresh方法会重新扫描页面上的所有锚点目标，更新它们的位置信息，这样就能匹配上iframe加载后变化的页面高度，让ScrollSpy恢复正常工作啦！

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