CODEWITHSUNDEEP
javascriptiframe
SaintCad
SaintCad

Reputation: 59

iframe inside a div. scrolling the div not working

I know that trying to scroll the iframe itself in not the way to go and instead i should be scrolling the div. Thing is it doesn't work. What is wrong with this code? Is it a google thing? I'm using the custom search so it shows up in the frame but I know google and frames don't like to play with each other.

HTML

<div id="googleframe"><iframe id="googleseo" src="http://www.google.com/custom?q=hey+there&btnG=Search"></iframe></div>

JS

var seoFrame = document.getElementById('googleseo');
seoFrame.src = googleSearch;
seoFrame.onload = function () {
    document.getElementById('googleframe').scrollTop = 300;
    }
}

Upvotes: 0

Views: 1605

Answers (2)

SaintCad
SaintCad

Reputation: 59

It was a CSS issue. The iframe wasn't long enough to scroll. It was the same height as my div so I made it longer and it works perfectly.

Upvotes: 1

Devin H.
Devin H.

Reputation: 1105

This is due to the scrollTop referencing the iframe, not the body within the frame. The iframe itself doesn't have a scrollbar, it's the document within it.

Fiddle of it working http://jsfiddle.net/ebzxzgmo/

var seoFrame = document.getElementById('googleseo');
var elem = (seoFrame.contentDocument||seoFrame.contentWindow.document).documentElement;
elem.getElementsByTagName('body')[0].scrollTop = 300;

Notice that it's requesting jsfiddle. Browsers block accessing the DOM of iframes from other domains.

Reference for scrolling cross domain: Scroll a cross-domain child iframe?

Upvotes: 0

Related Questions