Seite springt nach oben, wenn iframe geklickt wird

Question

Meine Seite springt nach oben, wenn ich dieses GDrive iframe einbetten, wenn Sie auf dem iframe klicken:

<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/

Frage: Warum funktioniert es und wie kann ich das verhindern?

Ich versuchte, ohne Glück preventDefault. Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Sie könnten JavaScript verwenden, um zu überprüfen, ob der Iframe das aktive Element ist, und zurückspringen, wenn es aktiv ist.

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

diese Jsfiddle für ein Arbeits Beispiel.

Answer 2

Ich bin mir nicht sicher, ob das nützlich ist. Übrigens könnten Sie das onload-Attribut verwenden, um die Seite nach unten zu scrollen: onload = "scroll (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 3

Aus meiner Untersuchung, es ist nicht von der iframe selbst verursacht. Seine Ursache ist das Javascript, das von den eingebetteten Google-Dokumenten ausgeführt wird. Wenn der Bearbeitungsbereich der Google-Dokumente den Fokus erhält, geschieht dies. Wenn Sie auf den Menübereich zugreifen, geschieht nichts, außer es wird etwas dem Bearbeitungsbereich hinzugefügt. Ich habe versucht, den Iframe mit Sandbox-Attribut zu beschränken und dieses Verhalten passiert nicht mehr, aber natürlich können Sie nicht die Google-Dokumente verwenden.

Leider keine Lösungen zu empfehlen.