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

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何时加载，然后移回原始位置，但这是不可能的。