iframe内嵌原页面后原有JS点击滚动逻辑失效，如何修改原页面适配

原代码失效的核心原因是：默认状态下$('html, body')获取的是iframe自身的文档根节点，如果你期望的滚动效果是针对父页面视口，或者iframe的滚动条实际挂载在父页面上，就会出现无响应的问题。你可以根据实际场景选择以下修改方案：

场景1：滚动目标为iframe内部内容 #

如果iframe为固定高度，滚动条属于iframe自身，可先兼容滚动容器匹配逻辑：

$('#abc').on('click', function() {
  const targetTop = $('#xyz').offset().top;
  // 兼容不同浏览器的滚动容器识别
  $('html, body, :scrollable').scrollTop(targetTop);
});

如果仍然无效，可检查iframe标签是否设置了overflow: auto，以及iframe内部的html、body是否设置了height: 100%且未禁用滚动属性。

场景2：滚动目标为父页面视口（最常见失效场景） #

如果iframe为高度自适应，滚动条挂载在父页面上，同源场景下可直接操作父页面DOM：

$('#abc').on('click', function() {
  // 1. 计算目标元素在iframe内部的顶部偏移
  const innerTargetTop = $('#xyz').offset().top;
  // 2. 计算iframe自身在父页面中的顶部偏移
  const iframeOffsetTop = window.parent.$('iframe[src*="你的iframe页面路径"]').offset().top;
  // 3. 合并偏移量操作父页面滚动
  window.parent.$('html, body').scrollTop(innerTargetTop + iframeOffsetTop);
});

如果父页面未引入jQuery，可使用原生JS实现：

$('#abc').on('click', function() {
  const innerTargetTop = document.getElementById('xyz').offsetTop;
  const iframe = window.parent.document.querySelector('iframe[src*="你的iframe页面路径"]');
  const iframeOffsetTop = iframe.offsetTop;
  const totalScrollTop = innerTargetTop + iframeOffsetTop;
  // 兼容不同浏览器的滚动根节点
  window.parent.document.documentElement.scrollTop = totalScrollTop;
  window.parent.document.body.scrollTop = totalScrollTop;
});

跨域场景兼容 #

如果父页面与iframe不同源，无法直接跨域访问DOM，需要通过postMessage实现父子页面通信：

iframe页面修改： #

$('#abc').on('click', function() {
  const targetOffset = $('#xyz').offset().top;
  // 向父页面发送滚动消息
  window.parent.postMessage({
    type: 'iframeScroll',
    offset: targetOffset
  }, '*'); // 生产环境建议替换为父页面实际域名，提升安全性
});

父页面新增监听逻辑： #

window.addEventListener('message', function(e) {
  // 生产环境建议先校验e.origin为iframe的合法域名，防止恶意消息攻击
  if (e.data.type === 'iframeScroll') {
    const iframe = document.querySelector('iframe[src*="你的iframe页面路径"]');
    const totalScrollTop = e.data.offset + iframe.offsetTop;
    document.documentElement.scrollTop = totalScrollTop;
    document.body.scrollTop = totalScrollTop;
  }
});

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