Getting scrollheight of the page in an iframe

**nayen** · Dec 31, 2012 10:41

Hi,

I have an iframe on a page on the same domain. I need to get the scrollheight of the page which is displayed in the iframe to determine whether the vertical scrollbar is displayed or not. For example, if (iframe document height > iframe window height) it means that scrollbar is displayed. Iframe window height is a constant value defined by CSS (320px) but how can I get the document height of the page displayed in the iframe?

I tried the following:

Code:

document.getElementById('myiframe').contentWindow.document.getElementsByTagName('body')[0].scrollHeight

but it gives the height of the iframe. I also tried some jQuery without any success.

Code:

$('#myiframe').contents().find('body')[0].scrollHeight

The reason why I need to figure out whether the scrollbar is displayed or not is because I am controlling the width of the iframe based on that.

**imouto** · Jan 1, 2013 00:04

hi nayen,

I did a little playing around with local files and I think the issue has more to do with waiting for the entire page to finish loading. Try this JavaScript on your page:

Code:

function getIframeDocHeight() {
    'use strict';

    var iframeDocHeight = document.getElementById('myiframe').contentWindow.document.getElementsByTagName('body')[0].scrollHeight;
    return console.log(iframeDocHeight);
}

window.onload = getIframeDocHeight;

You can also use this value instead for iframeDocHeight:

Code:

var iframeDocHeight = document.getElementById('myiframe').contentDocument.body.scrollHeight;

Hope this helps.

**nayen** · Jan 1, 2013 02:28

Originally Posted by imouto

hi nayen,

I did a little playing around with local files and I think the issue has more to do with waiting for the entire page to finish loading. Try this JavaScript on your page:

Code:

function getIframeDocHeight() {
    'use strict';

    var iframeDocHeight = document.getElementById('myiframe').contentWindow.document.getElementsByTagName('body')[0].scrollHeight;
    return console.log(iframeDocHeight);
}

window.onload = getIframeDocHeight;

You can also use this value instead for iframeDocHeight:

Code:

var iframeDocHeight = document.getElementById('myiframe').contentDocument.body.scrollHeight;

Hope this helps.

Hi imouto,

Thanks for your help. I tried displaying that scrollheight value using alert() without any success. Which variable should I use? Additionally, what is "use strict" used for and what does "console.log" do?

**Pullo** · Jan 1, 2013 16:41

Originally Posted by nayen

what does "console.log" do?

console.log() logs user output to the console.
This is indispensable when debugging JavaScript.

To see it in action, save the following code in a HTML file, then open it in Chrome.

HTML Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Console.log example</title>
  </head>

  <body>
    <script>console.log("Hello, Nayen!");</script>
  </body>
</html>

Once in Chrome, press F12 to open the dev tools, then click the console tab.
There you should see the output of console.log (if not, just reload the page).

Many people use alert() for this purpose but console.log() is easier to work with, as using an alert pop-ups up a modal dialog box that blocks the user interface.

Also, when trying to debug a JavaScript problem on a web page, the console is the first place you should look, as all errors are logged there.

BTW, Chrome is not the only browser to have this functionality. Check out this great tutorial to find out more: http://net.tutsplus.com/tutorials/to...kup-and-style/

**imouto** · Jan 1, 2013 22:04

Originally Posted by nayen

Hi imouto,
Which variable should I use? Additionally, what is "use strict" used for and what does "console.log" do?

From my local test files it didn't seem to matter which value you gave the iframeDocHeight variable. I was getting the same numbers regardless of which value I used. I should point out I was getting different values depending on which browser I was testing in. Opera had a different value from Firefox.

'use strict' invokes strict mode for your entire script or individual functions. "ECMAScript 5's strict mode is a way to opt in to a restricted variant of JavaScript."[1]

As Pullo mentioned, Chrome is not the only browser with developer tools for debugging your JS. You should definitely check out Opera's Dragonfly tool and Firefox's Firebug Add-on. Essential tools for any web developer! You might want to also bookmark JSHint (http://jshint.com/) for checking your JS code quality.

1. Source: https://developer.mozilla.org/en-US/...pe/Strict_mode

**balakrishnan051** · Jan 8, 2013 03:13

You can do something like this to check the scrollbar is exist or not, How to check if the scrollbars are currently visible?

User Tag List

Thread: Getting scrollheight of the page in an iframe

Thread Tools

Display

Getting scrollheight of the page in an iframe

Bookmarks

Bookmarks

Posting Permissions