如何阻止页面底部的iframe加载时滚动至父文档底部？

以下是几个经过验证的有效解决方案，针对你遇到的iframe抢占焦点导致页面滚动的问题：

方案1：初始隐藏iframe，加载完成后再显示 #

通过初始隐藏iframe，避免其内部元素加载时获取焦点触发滚动，加载完成后再显示并恢复页面初始位置：

<!-- HTML部分 -->
<iframe id="target-iframe" src="你的iframe地址" style="display: none;" width="800" height="500"></iframe>

// JS部分
const iframe = document.getElementById('target-iframe');
// 记录页面初始滚动位置
const initialScrollTop = window.scrollY || document.documentElement.scrollTop;

iframe.onload = function() {
  // 加载完成后显示iframe
  this.style.display = 'block';
  // 恢复到初始滚动位置
  window.scrollTo(0, initialScrollTop);
};

方案2：用Intersection Observer精准控制iframe加载时机 #

比loading="lazy"更灵活可控，只有当iframe进入视口一定比例时才加载src，彻底避免提前加载导致的焦点抢占：

<!-- HTML部分，先通过data-src存储地址，不直接设置src -->
<iframe id="target-iframe" data-src="你的iframe地址" width="800" height="500"></iframe>

// JS部分
const iframe = document.getElementById('target-iframe');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 当iframe进入视口时加载内容
      iframe.src = iframe.dataset.src;
      // 停止监听，避免重复触发
      observer.unobserve(iframe);
    }
  });
}, {
  // 自定义触发阈值，比如当iframe可见10%时开始加载
  threshold: 0.1
});

observer.observe(iframe);

方案3：强制锁定页面滚动位置直到iframe加载完成 #

通过监听滚动事件，强制页面保持初始滚动位置，直到iframe加载完成后解除锁定：

// JS部分
const iframe = document.getElementById('target-iframe');
const initialScrollTop = window.scrollY || document.documentElement.scrollTop;
let isScrollLocked = true;

// 锁定滚动的函数
function lockScroll() {
  if (isScrollLocked) {
    window.scrollTo(0, initialScrollTop);
  }
}

// 添加滚动监听
window.addEventListener('scroll', lockScroll);

iframe.onload = function() {
  // 加载完成后解锁滚动
  isScrollLocked = false;
  window.removeEventListener('scroll', lockScroll);
};

你可以根据自身场景选择合适的方案：如果需要完全避免iframe提前加载，优先选方案2；如果必须让iframe后台加载但不触发滚动，选方案1或3。

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