Verhindern Sie, dass location.hash in einem iframe das übergeordnete Fenster in Chrome scrollt

Das Szenario:

Ich erstelle eine Kiosk-App, die in Chrome ausgeführt wird. Darin lade ich einen Iframe von einer anderen Domäne über einen Link mit einem Anker (http: /www.whatever.com/#specific_content) in ein Modal.

Das Problem:

Wenn dieser Inhalt geladen wird, springt der iframe auf #specific_content, aber die übergeordnete Seite springt ebenfalls.

Es ist eine Kiosk-App mit einer einzelnen Seite, daher ist die Position der übergeordneten Seite sehr wichtig. Die tatsächlichen Details des Szenarios sind etwas komplizierter als nur die obigen:

1. Um das Scrollen in der App zu verhindern, habe ich body {overflow: hidden;}
2. Um die Positionierung zu ermöglichen, verwende ich einen Wrapper-Container, der auf die Größe des Ansichtsfensters eingestellt ist.
3. Um das Scrollen zu simulieren, stelle ich entweder den Wrapper absolut neu oder positioniere den Inhalt absolut innerhalb des Wrappers.

Um das Problem zu demonstrieren, habe ich eine jsFiddle eingerichtet, aber Sie müssen die Ausgabe ohne den jsFiddle-Chrom sehen, um den vollen Umfang des Problems zu sehen:

Schritt 1) ​​Klicken Sie auf "Link zum Inhalt", um den Wrapper neu zu positionieren

Schritt 2) Klicken Sie auf "Link to load", um den iFrame-Inhalt zu laden

Demo: Ссылка

Geige: Ссылка

Der Code:

CSS:

HTML

JS