iframe on the page bottom: avoid automatic scroll of the page

Question

I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.

What's the cause of this automatic scroll to bottom with iframe on the page?

Answer 1

This is just a random one, but possible doing something like this:

<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe> 

The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.

Or, one other option that might be a bit more reliable:

<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe> 

Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.

Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.

I hope that helps :)

Answer 2

Simple. Use about:blank in src like

<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>