iframe内容引发父容器异常跳转的HTML技术问题求助

问题背景 #

现有嵌套iframe布局中，加载的外部页面会导致父容器出现无预期的跳转行为，且必须保留以下核心样式：

• ._outer_ 的 padding-top: 60px
• ._inner_frame_ 的 width/height: 170% 及 transform: scale(0.6) translate(-33.5%, -33.5%)

解决方案（均不修改要求保留的核心代码） #

方案1：限制iframe对顶层窗口的控制

修改iframe的sandbox属性，仅允许用户主动触发的顶层导航，禁止脚本自动修改窗口滚动状态：

<iframe tabindex="-1" role="presentation" src="https://www.labuttiga.it/en" sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation" referrerpolicy="origin" scrolling="no" class="_inner_frame_"></iframe>

原理：默认sandbox会禁止所有顶层导航，添加allow-top-navigation-by-user-activation后，仅用户点击等主动操作能触发顶层跳转，阻断脚本自动滚动父页面的行为。

方案2：强制iframe内部页面重置滚动

给iframe添加onload事件，加载完成后强制内部页面滚动到顶部，避免内部滚动传递到父容器：

<iframe tabindex="-1" role="presentation" src="https://www.labuttiga.it/en" sandbox="allow-scripts allow-same-origin" referrerpolicy="origin" scrolling="no" class="_inner_frame_" onload="this.contentWindow.scrollTo(0, 0);"></iframe>

原理：部分外部页面加载后会自动滚动到某个锚点或聚焦元素，通过scrollTo(0,0)强制重置内部滚动状态。

方案3：给父容器添加布局隔离

在._outer_的CSS中添加contain属性，彻底隔离内部元素对父容器及页面的布局影响：

._outer_ {
  background-color: blue;
  width: 800px;
  height: 650px;
  overflow: hidden;
  position: absolute;
  top: 90px;
  left: 90px;
  margin: 0;
  padding: 0;
  padding-top: 60px;
  contain: layout paint size; /* 新增 */
}

原理：contain: layout paint size会让浏览器将该容器视为独立布局单元，内部元素的滚动、布局变化不会影响外部。

方案4：彻底禁用父容器滚动

将._outer_的overflow: hidden替换为overflow: clip，完全禁止任何形式的滚动行为：

._outer_ {
  background-color: blue;
  width: 800px;
  height: 650px;
  overflow: clip; /* 替换原overflow: hidden */
  position: absolute;
  top: 90px;
  left: 90px;
  margin: 0;
  padding: 0;
  padding-top: 60px;
}

原理：overflow: clip比hidden更严格，不仅隐藏溢出内容，还禁止通过JS或键盘触发滚动，彻底阻断滚动跳转的可能。

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