javascript - Loading iframe with an #element specified moves the parent viewpoint to the same location - Stack Overflow

admin管理员组

文章数量:1391964

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:

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

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:

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

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Dec 4, 2014 at 14:58 asked Jan 22, 2013 at 18:19 anonanon 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7 +100

Working with the first answer I came up with this:

http://jsfiddle/UZZ4c/1/

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

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/UZZ4c/2/ however I did not test this theory so I will leave that upto you.

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./mypage.php?u=DJDavid98#favorites_container").on('load', function() {
        $(this).show();
    });
});

There is nothing you can do about this. The problem is in the way you link to the source site using an anchor to move the page. Demo with a normal website:

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

http://jsfiddle/WGZUj/

Demo with the site you are trying to embed:

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

http://jsfiddle/UZZ4c/

One strategy to get around this in theory would be to detect when the iframe is loaded and then move back to the original position, but this is not possible to do.

I came up with a less conventional approach that certainly has some drawbacks.

First, the drawbacks: on any page you apply this solution, it will prevent you from effectively using hashes in your urls to scroll down to elements, and scrollIntoView is also blocked/affected. If you know your page won't need to do those things, this may be a good option for you.

The approach is to use a CSS scroll-padding-top property on your parent document with a large enough value that the "padding" pushes your scroll position back to the very top of the page, preventing the hash from scrolling anywhere. Depending on how your page is set up, the style can be applied to the document's html tag like so:

<style>
    html {
        scroll-padding-top: 99999px;
    }
</style>

You could also set it to a smaller value, like 200px, if you know that the iframe will be rendered within that distance from the top of the page.

One advantage of this approach over the excellent accepted answer is that in this approach the iframe contents will be scrolled to whatever the hash pointed at, which may have been the purpose of using a hash in the iframe URL in the first place. The accepted answer's trick with hiding the iframe to prevent scrolling on the parent window has the side effect of skipping over the scrolling that would have happened inside the iframe.

本文标签：