Auto resize iframe height when the height of the i

Question

I am loading an iframe inside a page, which the length of the content of the iframe will be changed from time to time. I have implemented the following solution. However the height is fixed as the dyniframesize only get call when iframe.onload.

It is possible to have the iframe to be resized accordingly from time to time the height of the iframe changed?

<iframe src ="popup.html" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"></iframe> 

function dyniframesize(down) { 
var pTar = null; 
if (document.getElementById){ 
pTar = document.getElementById(down); 
} 
else{ 
eval('pTar = ' + down + ';'); 
} 
if (pTar && !window.opera){ 
//begin resizing iframe 
pTar.style.display="block" 
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
//ns6 syntax 
pTar.height = pTar.contentDocument.body.offsetHeight +20; 
pTar.width = pTar.contentDocument.body.scrollWidth+20; 
} 
else if (pTar.Document && pTar.Document.body.scrollHeight){ 
//ie5+ syntax 
pTar.height = pTar.Document.body.scrollHeight; 
pTar.width = pTar.Document.body.scrollWidth; 
} 
} 
} 
</script> 

Answer 1

iFrame View

<script type="text/javascript">
    var height = $("body").outerHeight();
    parent.SetIFrameHeight(height);
</script>

Main View

<script type="text/javascript">
    SetIFrameHeight = function(height) {
        $("#iFrameWrapper").height(height);
    }
</script>

Answer 2

Actually you should do it from iframe by accessing parent window and changing iframe's height.

Because document in iframe usually knows better if the it's body changed it's size (you can actually bind it to something like body.onload instead of using intervals to check if something has changed in iframe).

Answer 3

To my knowledge, there isn't a very natural way of doing this, but there are some options.

setInterval()

You could use setInterval() to repeatadly check the iframe's content height and adjust it if needed. This is simple, but inefficient.

Event Listeners

Any change of content in the iframe's content (and therefore height) is usually triggered by some event. Even if you're adding content from outside of the iframe, that "add" is probably triggered by a button click, for example. Here's something that might work for you: Live demo here (click).

var myIframe = document.getElementById('myIframe');

window.addEventListener('click', resizeIframe);
window.addEventListener('scroll', resizeIframe);
window.addEventListener('resize', resizeIframe);

myIframe.contentWindow.addEventListener('click', resizeIframe);

function resizeIframe() {
  console.log('resize!');
}

Mutation Observer

This solution works in all up-to-date browsers - http://caniuse.com/mutationobserver

Live demo here (click).

It's really simple and should catch the relevant changes. If not, you could combine it with the event listener solution above to be sure things are updated!

var $myIframe = $('#myIframe');
var myIframe = $myIframe[0];

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

myIframe.addEventListener('load', function() {
  setIframeHeight();

  var target = myIframe.contentDocument.body;

  var observer = new MutationObserver(function(mutations) {
    setIframeHeight();
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  };
  observer.observe(target, config);
});

myIframe.src = 'iframe.html';

function setIframeHeight() {
  $myIframe.height('auto');
  var newHeight = $('html', myIframe.contentDocument).height();
  $myIframe.height(newHeight);
}

Honorable mention to: overflow/underflow events.

Read about it here (there's A LOT to it).

and see my demo here (doesn't work in IE 11!).

This was a cool solution, but it's no longer working in IE. It might be possible to tweak it, but I'd rather use one of the above solutions, even if I had to fallback to a 1 second setInterval for older browsers, just because it's a lot simpler than this solution.

Answer 4

You can use custom events to signal between the iframe and the parent.

In the iframe:

if (window.parent !== window) {
  window.oldIframeHeight = 0;
  window.setInterval(function() {
      var currentHeight = document.body.offsetHeight;
      if (currentHeight !== window.oldIframeHeight) {
          window.parent.postMessage(currentHeight.toString(), "*");
          window.oldIframeHeight = currentHeight;
      }
  }, 100)
}

Then, in the parent:

window.addEventListener("message", function (e) {
    var h = parseInt(e.data, 10);
    if (!isNaN(h)) {
        $('#iframe').height(h)
    }
}, false);

Answer 5

I wrote a small Library that uses mutationaObserver and eventListners, with fall backs to setInterval for IE8-10 and works for both same domain and cross domain. It can size both height and width.

http://davidjbradshaw.github.io/iframe-resizer/