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

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

HTML：

 
Audiosurf
 
   

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

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