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

Question

首先,我知道有很多关于这种现象的问题,但到目前为止给出的解决方法都不会对我在这里的情况有所帮助.

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

问题: 我有一个内部iFrame,持有我无法控制的第三方广告.如果内部iFrame运行以下任何Javascript命令,则外部页面会向下滚动所有内容以将内部iFrame置于视图中:

1. 模糊并专注于其中的元素

2. window.location.href或document.location.hash到其中的一个锚点.

3. scrollIntoView在它内部的元素上

这是一个同事放在一起的演示(等待5秒钟开始)

解决方案不起作用:

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

Answer 1

也许还有其他一些方法可以解决这个问题，但一个非常简单的解决方案是将麻烦的 iframe 定位为fixed.

那么剩下的唯一挑战可能就是迫使它们表现得就像自然布局的一部分一样。但与原始问题相比，这个任务的复杂性似乎一般。

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