iframe取消隐藏显示时自动滚动到顶部的实现方法

问题背景 #

• 页面初始加载时默认隐藏iframe，通过两个div按钮分别控制iframe的显示、隐藏，基础显隐功能运行正常
• 异常表现：用户在iframe内滚动浏览内容后点击隐藏，下次再唤起iframe时，页面会停留在上次滚动到的位置，不符合预期
• 预期效果：每次点击显示按钮时，iframe在呈现给用户前自动滚动到顶部位置

原有代码参考 #

原有JS逻辑 #

$('.unhide').on('click', function() {
  //something like this
  $('.iframeCon iframe').scrollTop(0);
  
  $('.iframeCon').show()
})

$('.hide').on('click', function() {
  $('.iframeCon').hide()
})

原有样式 #

.iframeCon {
  display: none;
  width: 100%;
  height: 90vh;
  margin-top: 7%;
  z-index: 2;
  background-color: gold;
}

iframe {
  width: 100%;
  height: 100%;
}

div:hover {
  cursor: pointer;
  text-decoration: underline;
}

原有页面结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hide">hide</div>
<div class="unhide">unhide</div>

<div class="iframeCon">
  <iframe src="https://wix.com"></iframe>
</div>

失效原因 #

原有写法中$('.iframeCon iframe').scrollTop(0)是给iframe标签本身设置滚动位置，但iframe内部是独立的文档上下文，实际产生滚动的是iframe内部的页面，该操作没有命中真正的滚动对象，因此无法生效。

实现方案 #

方案1：通用无限制方案（推荐，兼容跨域场景） #

不受浏览器同源策略限制，无论iframe加载的是同域还是跨域页面都可正常生效，逻辑是每次显示iframe前重置其src属性，触发iframe重载，页面加载完成后自然处于顶部位置。
修改后的JS逻辑如下，原有CSS和HTML无需调整：

// 缓存iframe原始地址，避免硬编码
const $iframe = $('.iframeCon iframe');
const originalSrc = $iframe.attr('src');

$('.unhide').on('click', function() {
  // 重置src触发iframe重载
  $iframe.attr('src', originalSrc);
  $('.iframeCon').show();
})

$('.hide').on('click', function() {
  $('.iframeCon').hide();
})

• 优点：无跨域限制，兼容性好，逻辑简单不易出问题
• 缺点：每次显示都会重新加载iframe资源，若iframe内容体积较大，可能出现短暂的加载等待

方案2：同域场景专用方案（无重载开销） #

如果iframe加载的页面和主页面属于同域名，不会触发浏览器跨域拦截，可以直接操作iframe内部的window对象，直接控制内部页面滚动到顶部，无需重载资源。
修改后的JS逻辑如下：

$('.unhide').on('click', function() {
  const iframeEle = $('.iframeCon iframe')[0];
  // 等待iframe加载完成后操作内部滚动
  iframeEle.onload = () => {
    // 控制iframe内部窗口滚动到顶部
    iframeEle.contentWindow.scrollTo(0, 0);
  }
  $('.iframeCon').show();
})

$('.hide').on('click', function() {
  $('.iframeCon').hide();
})

• 优点：不需要重载iframe资源，显示速度快，无额外资源开销
• 缺点：受同源策略限制，跨域iframe无法使用该方法

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