javascript resize iframe height dynamically issue

Question

I'm having an issue resizing an iframe to fit the content located within the frame'd page. I used a suggestion I found here to resize the frame dynamically.

In my frame'd pages I have

<body onload='parent.resizeIframe(getDocHeight())'>

function getDocHeight() {
var D = document;
alert(D.URL);
return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);

}

And in the page containing the iframe I have this

function resizeIframe(newHeight) {
  var showsFrame = document.getElementById('frm');
  showsFrame.style.height = parseInt(newHeight) +'px';
}

The function is getting called correctly by each frame'd page, but for some reason the 'newHeight' parameter being passed is keeping the largest height value. For example if I have 2 frame'd pages one with a scroll height of 300px and the other with 500px. When I first click my link to load the 300px page it works fine, but if I click the link to the 500px page and then try and come back to the 300px page, the value of 'newHeight' remains at 500. Any ideas? TIA

score 1 · Answer 1 · answered May 12 '11 at 13:26

I found the issue I was having for anyone else that is experiencing the same thing. Because my frame'd pages didn't have much content the scrollHeight was reporting the length of the entire document and not cutting where my content stopped. Instead of trying to calculate scrollHeight, I simply looked for the offsetHeight which was the correct height I was looking for. Firebug is a nice tool to inspect the DOM of each page and see the values of each attribute without having to write debugging messages. I put this line in every frame'd page

<body onload='parent.resizeIframe(getDocHeight())'>

and in a separate js file I have this code to calculate the height.

function getDocHeight() {
var D = document;
return Math.max(
   Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
);

score 0 · Answer 2 · answered May 11 '11 at 04:45

0

Try it with JQuery

         function resizeIframe(newHeight) {
              $('#iframeId').attr('height',newHeight); 
                               or
              $("#frameId").height(newHeight);
          }

answered May 11 '11 at 04:45

Harun

4,763
4
33
57

Thanks for the reply, but the issue is that the parameter 'newHeight' is being passed incorrectly from the child (frame'd) page. It is not an issue with setting the height of the parent frame. The value coming to my parent page is (for some reason) getting stuck at the largest value of it's child pages. – prem1er May 11 '11 at 14:24

javascript resize iframe height dynamically issue

2 Answers2