单击iframe时页面会跳转到顶部

Question

当我嵌入这个gdrive iframe时，一旦你点击iframe，我的页面就会跳转到顶部：

<iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded"></iframe>

JSFiddle：https://jsfiddle.net/0qpe53os/

问:为什么它会这样做，我如何防止它这样做？

我尝试preventDefault，但没有任何运气。非常感谢您的帮助。

Answer 1

我不确定这是否有用。顺便说一下，您可以使用onload属性向下滚动页面：onload=“screen.height(0，screen.height);"

<iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded"  onload="scroll(0,screen.height);"></iframe>

Answer 2

根据我的调查，它不是由iframe本身引起的。它是由嵌入的google docs执行的javascript引起的。当google docs的编辑区域获得焦点时，就会发生这种情况。如果您访问菜单区域，则不会发生任何操作，除非它导致将某些内容添加到编辑区域。我尝试限制iframe with sandbox属性，这种行为不再发生，但你当然不能使用google文档。

抱歉，没有建议的解决方案。

Answer 3

您可以使用javascript检查iframe是否是活动元素，如果是活动元素，则跳回该元素。

if(document.activeElement.tagName == 'IFRAME') { document.activeElement.scrollIntoView() }

有关工作示例，请参阅此Jsfiddle。