javascript - 如何防止 iFrame 操作导致外部页面滚动到它

Question

首先，我知道有很多关于这种现象的问题，但目前给出的解决方法都无法解决我遇到的情况。

环境:我的代码位于我无法控制的页面内的外部 iFrame 中。它的大小适合我的所有内容，因此我的 iFrame 内不会发生滚动。相反，外部页面可以上下滚动以查看其内容。

问题:我有一个内部 iFrame，其中包含我无法控制的第三方广告。如果内部 iFrame 运行以下任何 Javascript 命令，外部页面将向下滚动所有内容以显示内部 iFrame:

1. 模糊并聚焦其中的一个元素

2. window.location.href 或 document.location.hash 到其中的 anchor 。

3. scrollIntoView 在其中的一个元素上

Here is a demo a colleague put together (等待 5 秒以启动)

不起作用的解决方案:

1. 如果我控制外部页面，我可以监听 onScroll 事件并防止页面滚动(如果它不是来自鼠标滚轮或上/下键事件)。但是，出于安全原因，我的外部 iFrame 无法访问主页或阻止主页向上或向下滚动。
2. 我可以覆盖上面提到的所有这些 Javascript 方法，因此它们不起作用 - 然而，我内部 iFrame 中的广告实际上创建了它们自己的内部 iFrame，这些 iFrame 具有该功能并导致同样的问题。
3. 没有向上传播的事件，我可以看到我的 iFrame 可以阻止到达主页。浏览器似乎直接监听最里面的 iFrame。

Answer 1

也许还有一些其他方法可以解决这个问题，但一个非常简单的解决方案是通过将它们定位为固定.

那么剩下的唯一挑战可能就是强制它们的行为就好像它们是自然布局的一部分一样。但与原始问题相比，此任务的复杂性似乎一般。

此外，在您的特定情况下，上述方法开箱即用。由于外部 iframe 不可滚动且其高度与其内容高度匹配:您只需为每个 iframe 插入一个与其对应大小相匹配的占位符...