How to Scroll an iFrame using javascript

Question

I have several iFrames that load an external webpage, although only 1 appears at a time, hence all have the id="iFrame" I want to add to buttons (not the scrollbar) so the user can scroll down or up by pressing them, and I am trying to do this using javascript but so far I've been unsuccessful, I've read some posts here and tried those answers but so far no luck. I have also tried:

var newFrame = document.getElementsByTagName('iframe');
if(typeof newFrame !== 'undefined'){
    newFrame.contentWindow.scrollBy(0,250);

and

var myframe = document.getElementById(window.frameElement[0].id);
myframe.window.scrollBy(0,50);

nothing has worked out so far, could anyone let me know what am I missing or doing wrong? thank you!

Answer 1

Try use the following (untested, but should work):

function scrollIFrame(name, x, y)
{
    var frame = document.getElementById(name);        
    frame.contentWindow.scrollTo(x, y);         
}

So, you would use:

scrollIFrame('iframe', 0, 250);

Answer 2

Try this:

var iFrames = document.getElementsByTagName('iframe');
for (var i = 0; i < iFrames.length; i++) {
    //+= for -= depending on direction
    //scrollLeft for horizontal, scrollTop for vertical
    //iFrames[i].contentWindow.scrollTop += 10;
    iFrames[i].contentWindow.scrollTop -= 10;
}

scrollBy and scrollTo should work just the same. The important thing here is that getElementsByTagName returns an array. If you run this newFrame.contentWindow.scrollBy(0,250); you are not scrolling the iframe, but trying to scroll the array. Instead, you would have to run this: newFrame[0].contentWindow.scrollBy(0,250);