加载指定了#element的iframe会将父视点移动到同一位置

Question

我使用这个javascript来加载一个滚动到我需要的区域的网页<iframe>.但是无论何时加载给定的iframe,视口都会立即跳转到该点,就像我#asContainer在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');
});

Answer 1

使用第一个答案我想出了这个:

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

正如你所看到的那样,它只是在节目加载和重新展开之前隐藏并显示iframe.

我的第一个想法是你不需要滚动.iframe元素在加载时不可见,浏览器不应滚动到锚点http://jsfiddle.net/UZZ4c/2/但是我没有测试这个理论所以我会把它留给你.

我确实建议你把一个加载器放在iframe的位置,而它是隐藏的.

#asContainer { display: none; }

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