Question

我使用此javascript将滚动到我需要的区域的网页加载到<iframe>。但是无论何时加载给定的iframe，视口都会立即跳转到该点，就像我在URL末尾使用#asContainer一样。

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时放置一个加载器代替iframe。

#asContainer { display: none; }

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

Answer 2

你无能为力。问题在于您使用锚点移动页面链接到源站点的方式。使用普通网站进行演示：

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

http://jsfiddle.net/WGZUj/

使用您尝试嵌入的网站进行演示：

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

http://jsfiddle.net/UZZ4c/

理论上解决这个问题的一个策略是检测何时加载iframe然后再回到原始位置，但这是不可能的。

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

2 个答案: