Frage 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 in ein Modal (http: /www.whatever.com/#specific_content).

Das Problem:

Wenn dieser Inhalt geladen wird, springt der iframe auf den # 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 ein bisschen komplizierter als nur das obige:

  1. Um 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, positioniere ich den Wrapper entweder 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: http://jsfiddle.net/w47GT/8/embedded/result/

Geige: http://jsfiddle.net/w47GT/8/

Der Code:

CSS:

html, body { height:100%; padding:0; margin: 0;overflow:hidden; }
.background {
    width : 100%;
    height:400%;
    background:#333 url('http://incurablystircrazy.files.wordpress.com/2012/04/runner-at-sunset.jpg');
}
.wrapper { position:absolute;width:100%;height:200%; }
iframe  { width:50%;height:50%;position:fixed;top:25%;left:50%;margin-left:-25%;border:2px solid red;background-color:#ddd; }
.link   { width:100%;height:25px;position:absolute;top:25px;background-color:green; }
.anchor { position:absolute;top:400px;width:100%;height:25px;background-color:red; }

HTML

<div class="wrapper">
    <div class="background"></div>

    <a class="link" href="#linked">Link to content</a>
    <a class="anchor" name="linked" href="http://www.smashingmagazine.com#footer" >Link to Load iFrame</a>
</div>
<iframe></iframe>

JS

$(function(){
    $('.link').on('click',function(){ $('.wrapper').css({top:'-400px'}); });
    $('.anchor').on('click',function(e){
        e.preventDefault();
        var href = $(this).prop('href');
        $('iframe')
        .attr({
            src: href,
            name: 'testing'
        });
    });
});

9
2018-04-08 15:54


Ursprung


Antworten:


Antwort kann hier gefunden werden: Wenn iframe mit einem angegebenen #element geladen wird, wird der übergeordnete Ansichtspunkt an denselben Speicherort verschoben

Die Lösung:

Verstecke den iFrame so lange, bis er vollständig geladen ist, wodurch der Anker umgangen wird, der die übergeordnete Seite betrifft.

Demo:  http://jsfiddle.net/w47GT/12/embedded/result/

Geige:  http://jsfiddle.net/w47GT/12/

JS

$(function(){
    // Move the content wrapper up to simulate scroll
    $('.link').on('click',function(){ $('.wrapper').css({top:'-400px'}); });

    // Load iFrame content (previously hidden via CSS)
    $('.anchor').on('click',function(e){
        e.preventDefault();
        var href = $(this).prop('href');
        $('iframe')
        .attr({
            src: href,
            name: 'testing'
        }).on('load',function(){
            $(this).show();
        });
    });
});

Danke an @ DJdavid98 für das Zeigen auf diese Antwort.


5
2018-04-11 17:34



Ich schieße hier ein wenig in die Dunkelheit, aber hast du schon mal so etwas versucht, das an das DOM der Außenseiten angehängt ist?

$(window).on("hashchange", function(e) {
  e.preventDefault();
});

-1
2018-04-08 17:14