parallax background

Calculating the scrollbar height of an iFrame (Ext JS 4.x)

Digital Transformation Group LinkedIn
Writing an asynchronous task that takes a parameter (Ext JS 4.x)
April 30, 2012
Digital Transformation Group LinkedIn
Adding columns dynamically to a GridPanel (Ext JS 4.x)
May 2, 2012

First you need to get the DOM element of the iFrame,  so assuming you have an iframe like ths following:

var panel = Ext.create('Ext.form.Panel', {
 title: 'I am a Panel',
 layout: {
 align: 'center',
 type: 'vbox'
 },
 flex: 1,
        html: '<iframe id="reportframe" width="100%" src="http://localhost/foo.html"></iframe>',
});

You would get the iframe by doing this:

var iframe = document.getElementById('reportframe');

 

Getting the height though is more tricky business, because the actual height is not available until after the content is loaded into the iframe. Just listen for the onload event right, no. Even after the onload event the height is still not correct if you attempt to get it through the style element. As far as I can tell the height is available at some seemingly arbitrary point after onload.
This is how you calculate the height of the scrollbar at that arbitrary point after onload:

var scrollHeight =
 iframe.contentWindow.document.body.scrollHeight -
 iframe.style.height.replace("px", "");

 

The “scroll height” in this content is the actual height of what the scroll bar can be moved to accommodate. For example if the height was 100, that would mean 0 through 100 would be points at the scroll bar from 0 at the top to 100 at the bottom.

For example you could scroll halfway down the page by doing the following:

iframe.contentWindow.scrollTo(0,scrollHeight/2);

jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Comments are closed.