Loading iframe with an #element specified moves th

问题:

I use this javascript to load a webpage that is scrolled to the area I need into an <iframe>. But whenever the given iframe loads, the viewport instantly jumps to that point, just like I used #asContainer at the end of the URL.

HTML:

<h3>Audiosurf</h3>
<div id="asContainerWrapper">
    <iframe id="asContainer" scrolling="no"></iframe>
</div>

JavaScript:

$(document).ready(function(){
    $('#asContainer').attr('src','//audio-surf.com/mypage.php?u=DJDavid98#favorites_container');
});

回答1:

Working with the first answer I came up with this:

http://jsfiddle.net/UZZ4c/1/

As you can see it is just hiding and showing the iframe while it's loading and rescrolling before the show.

My first thought is that you shouldn't need to scroll. The iframe elements are not visible upon the time they are loaded and the browser shouldn't scroll to the anchor http://jsfiddle.net/UZZ4c/2/ however I did not test this theory so I will leave that upto you.

I do suggest you put a loader in place of the iframe while it's hidden.

#asContainer { display: none; }

$(document).ready(function() {
    $('#asContainer').attr("src", "//audio-surf.com/mypage.php?u=DJDavid98#favorites_container").on('load', function() {
        $(this).show();
    });
});

回答2:

There is nothing you can do about this. The problem is in the way you link to the source site using an anchor to move the page. Demo with a normal website:

$(document).ready(function(){
    $('#asContainer').attr("src","http://www.lolwut.com");
});

http://jsfiddle.net/WGZUj/

Demo with the site you are trying to embed:

$(document).ready(function(){
    $('#asContainer').attr('src','//audio-surf.com/mypage.php?u=DJDavid98#favorites_container');
});

http://jsfiddle.net/UZZ4c/

One strategy to get around this in theory would be to detect when the iframe is loaded and then move back to the original position, but this is not possible to do.