Automatically resize iframes when resizing iframes (in the same domain)

Question

I load the iframe inside the page, the length of the iframe content will change from time to time. I implemented the following solution. However, the height is fixed, since dyniframesize only gets an iframe.onload call.

Is it possible to resize an iframe by changing the height of the iframe from time to time?

<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

As far as I know, this is not a very natural way to do this, but there are some options.

setInterval ()

setInterval() iframe . , .

iframe (, , ) - . iframe, , "add", , . -, : ().

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!');
}

- http://caniuse.com/mutationobserver

().

. , , , !

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);
}

/.

( ).

. ( IE 11!).

, IE. , , , 1 setInterval , , , .

Answer 2

, mutationaObserver eventListners, setInterval IE8-10 , . .

http://davidjbradshaw.imtqy.com/iframe-resizer/

Answer 3

iFrame View

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

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

Answer 4

iframe .

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)
}

:

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

Answer 5

iframe, iframe.

iframe , ( - body.onload , , - iframe).