加载指定了#element的iframe会将父视点移动到同一位置 [英] Loading iframe with an #element specified moves the parent viewpoint to the same location

问题描述

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

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：

JavaScript:

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

推荐答案

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

Working with the first answer I came up with this:

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

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

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

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

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.

我建议您在隐藏iframe时放置一个加载器代替iframe。

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

这篇关于加载指定了#element的iframe会将父视点移动到同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！