SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting scrollheight of the page in an iframe

    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.

  2. #2
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imouto View Post
    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?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nayen View Post
    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/

  5. #5
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nayen View Post
    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

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •