Resizing an iFrame to fit contents by obtaining the scrollHeight (javascript)

Question

I am trying to resize the iframe to fit content. After seeing how others have done it I thought the simplest way was to get the scrollHeight of the iframe and resize the iframe accordingly. I use onload in the iframe tag to run this. I have composed dozens of variations on this theme with no success.

 function resizeIFrame(){

     var sHeight, frame;

      frame = document.getElementById("bigFrame");
      sHeight = frame.scrollHeight;
      frame.style.height = sHeight + 'px';
    }

When I alert out the sHeight variable I get the height of the frame and not the scrollHeight. This indicates that I may not be collecting the scrollHeight correctly.

I know this question may be similar to many previously but there are many ways to approach this problem and a wider variety of answers. I would like to know what is wrong with this approach to resizing iframes to fit content?

This is the html.

   <div id="contentContainer">
       <iframe id="bigFrame" 
                src="home/home.html" 
                name="mainFrame"     
                onload="resizeIFrame()" 
                onresize="resizeIFrame()" 
                scrolling="no" 
                seamless;  >
            </iframe>
   </div>

Maybe the answer to this question can help you get the right scrollHeight: http://stackoverflow.com/a/11864824/2112089 — Pascal, Dec 01 '15 at 15:17
Perhaps I should have asked how to obtain the correct scrollHeight. I read up on scrollHeight and I believe this is a correct way of obtaining it. — Forgive me I'm a drummer., Dec 01 '15 at 15:19
Oh, it's definitely a correct way of obtaining it, your code works on my machine. I was just pointing out that the iframe tag has some gotchas. Can you update your question with the html for the iframe ? — Pascal, Dec 01 '15 at 15:25
Ok, so two things come to mind: firstly, watch out for the same-origin policy (which states that your parent document can't manipulate the frame if they're not in the same domain) but you seem to be Ok here. Secondly, don't forget to add 'px' when you change your height (see my answer). — Pascal, Dec 01 '15 at 16:05

score 5 · Accepted Answer · answered Dec 02 '15 at 15:27

5

Ok I got this to work perfectly.
Adding - contentWindow.document.body.scrollHeight - enabled me to get the scrollHeight. I was trying to get the scrollHeight from a variable. This didn't work. What worked was to get the scrollHeight direct from the document.

I had to add some space at the bottom of each page. Thus the +80;. Unfortunately this only added 80 every time the function was invoked. Resetting the frame height to 0px before readjusting solved the problem.

So there you go. This function resizes an iframe to fit its content by getting the scrollHeight and setting the iframes height to match.

 function resizeIFrame(){

        var sHeight, frame;

           frame = document.getElementById("bigFrame");
           frame.style.height = '0px';
           sHeight = document.getElementById('bigFrame').
                  contentWindow.document.body.scrollHeight + 80;
           frame.style.height = sHeight + 'px';
     }

answered Dec 02 '15 at 15:27

Forgive me I'm a drummer.

163
1
2
12

4

Just to note for anyone trying this, as great as the solution is it won't work for cross-origin requests – paddyfields Oct 10 '19 at 09:24
1

To piggy-back on to @paddyfields' comment, if you do need a solution for cross-origin requests, a workaround can be done by shuttling size info from child to parent via postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – Marcela Apr 06 '21 at 14:44
This really helped me a lot - thank you for taking the time to write it! – nmu Sep 24 '21 at 16:17
I get a value that is about 150px too tall – jjxtra Apr 10 '23 at 15:58

score 0 · Answer 2 · answered Dec 01 '15 at 16:07

0

Try with

frame.style.height = sHeight + 'px';

answered Dec 01 '15 at 16:07

Pascal

259
1
11
27

Oh, the 'px' is definitely in there. I forgot it in the question. – Forgive me I'm a drummer. Dec 01 '15 at 16:09
I have also tried changing the height to 'auto' with both js and css – Forgive me I'm a drummer. Dec 01 '15 at 16:11

Resizing an iFrame to fit contents by obtaining the scrollHeight (javascript)

2 Answers2