Prevent location.hash in an iframe from scrolling the parent window in Chrome

Question

The scenario:

I'm building a kiosk app to run in Chrome. In it i'm loading an iframe from another domain into a modal via a link with an anchor (http:/www.whatever.com/#specific_content).

The problem:

When that content loads, the iframe jumps down to the #specific_content but the parent page also jumps.

It's a single page kiosk app so the position of the parent page is very important. The actual details of the scenario are a bit more complicated than just the above:

1. To inhibit scrolling in the app I have body {overflow:hidden;}
2. To allow for positioning I use a wrapper container set to the size of the viewport.
3. To simulate the scrolling I am either repositioning the wrapper absolutely, or positioning content within the wrapper absolutely.

To demonstrate the problem I have set up a jsFiddle but you need to see the output without the jsFiddle chrome to see the full scope of the problem:

Step 1) Click 'Link to content', that will reposition the wrapper

Step 2) Click 'Link to load', that will load the iFrame content

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

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

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

Answer 1

Answer can be found here: Loading iframe with an #element specified moves the parent viewpoint to the same location

The Solution:

Hide the iFrame until after it's fully loaded which bypasses the anchor effecting the parent page.

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

thanks to @DJdavid98 for pointing to this answer.