0

There are several answers to the problem of dynamically resizing an iframe that doesn't itself change size once loaded. However I have an iframe that loads a form that changes size (specifically its height) based on user input (i.e. jQuery validation, PHP validation, divs that open based on input, etc which add height to the page).

Is there a way to change the size of the iframe even after it is loaded, based on its changing size? Adding scrolling to the iframe looks messy.

Community
  • 1
  • 1
Josh
  • 53
  • 1
  • 9
  • did you have tried the `min-height` property at CSS ? – KarelG Feb 07 '14 at 08:37
  • yes that could be an option. The problem is that the height could be different for different browsers and resolutions, so I would prefer something that is set dynamically. – Josh Feb 07 '14 at 08:45
  • It would also be 'nice' (but perhaps unrealistic) if there were a non-JS solution to this problem. – Josh Feb 07 '14 at 14:17

2 Answers2

0

What if you refresh the page after the values have be entered by the user?

Harshal Gajjar
  • 265
  • 1
  • 4
  • 12
0

You could make an interval that checks every 200 miliseconds what the size of the body is inside the frames '.contentDocument' property an d resize the frame to that.

It would look something like this:

var targetFrame = document.getElementById("InnerFrame");
var targetDocument = (targetFrame.contentWindow.document || targetFrame.contentDocument);

window.frameInterval = window.setInterval(function(){
    targetFrame.height = targetDocument.body.height;
},200);

I haven't tested this because jsfiddle doesn't allow iframes with an url. But it could get you started.

Marvin Brouwer
  • 306
  • 3
  • 13
  • I've tried this and it only loads a very small portion into the iframe. – Josh Feb 07 '14 at 14:16
  • That probably means the JavaScript isn't functioning correctly. I haven't tested this piece of code but it could get you started. I'll see what I can do for you after dinner. – Marvin Brouwer Feb 07 '14 at 14:44
  • Thanks for your help. I don't see any JS errors in the console. – Josh Feb 07 '14 at 15:26