Prevent location.hash w iframe przewijanie okna nadrzędnego w Chrome

Question

scenariusz:

Buduję aplikację kiosku, aby uruchomić w Chrome. W nim ładuję element iframe z innej domeny do modalu za pośrednictwem łącza z kotwicą (http: /www.whatever.com/#specific_content).

Problem:

Kiedy który ładuje treści, iframe zeskakuje do #specific_content ale strona dominująca skacze również.

Jest to aplikacja kiosku z jedną stroną, więc pozycja strony nadrzędnej jest bardzo ważna. Rzeczywiste dane scenariusza są nieco bardziej złożone niż po prostu powyżej:

1. do hamowania przewijanie w app ma korpus {przelewowy: ukryte;}
2. celu umożliwienia pozycjonowania użyć pojemnik owijki ustaw rozmiar okna.
3. Aby zasymulować przewijanie, albo całkowicie zmieniam położenie opakowania, albo całkowicie umieszczam zawartość w opakowaniu.

Aby zademonstrować ten problem I utworzyły jsFiddle ale trzeba widzieć wyjście bez chromu jsFiddle aby zobaczyć pełny zakres problemu:

Step 1) Kliknij „Link do zawartości”, że będzie przesunąć opakowanie

Krok 2) Kliknij 'link do ładowania', która będzie załadować zawartość iFrame

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

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

Kod:

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' 
     }); 
    }); 
}); 

Answer 1

Odpowiedź można znaleźć tutaj: Loading iframe with an #element specified moves the parent viewpoint to the same location

Rozwiązanie:

Ukryj iFrame aż po jego pełnym obciążeniu, które omija kotwicę dokonywaniu stronę nadrzędną.

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

Fiddle: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(); 
     }); 
    }); 
}); 

dzięki @ DJdavid98 za wskazanie do tej odpowiedzi.

Answer 2

Jestem s trochę tu w ciemności, ale czy spróbowałeś czegoś takiego dołączonego do DOM DOMU na stronie zewnętrznej?

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