Redimensionner automatiquement la hauteur de l'iframe lorsque la hauteur de l'iframe de la modification de contenu (même domaine)

À ma connaissance, il n'y a pas une façon très naturelle de le faire, mais il y a quelques options.

setInterval()

Vous pouvez utiliser setInterval() à repeatadly vérifier le contenu de l'iframe de la hauteur et de l'ajuster si nécessaire. C'est simple, mais inefficace.

Des Écouteurs D'Événement

Tout changement de contenu dans le contenu de l'iframe (et donc de hauteur) est généralement déclenchée par un événement. Même si vous ajoutez du contenu à partir de l'extérieur de l'iframe, qui "ajouter" est probablement déclenchée par un clic sur un bouton, par exemple. Voici quelque chose qui pourrait fonctionner pour vous: démo en Direct ici (clic).

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 Observateur

Cette solution fonctionne dans tous les up-to-date navigateurs - http://caniuse.com/mutationobserver

Démonstration en direct ici (cliquez).

C'est vraiment simple et doit attraper les changements pertinents. Si pas, vous pouvez le combiner avec l'écouteur d'événement solution ci-dessus pour être sûr que les choses sont mis à jour!

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

Mention Honorable: débordement/underflow événements.

Lire à ce sujet ici (il y en A BEAUCOUP).

et voir mon démo ici (ne fonctionne pas sous IE 11!).

Ce était un cool solution, mais elle n'est plus de travail dans IE. Il pourrait être possible de le modifier, mais je préfère utiliser l'une des solutions ci-dessus, même si j'avais à revenir à 1 seconde setInterval pour les anciens navigateurs, juste parce que c'est beaucoup plus simple que cette solution.

OriginalL'auteur m59

iFrame Vue

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

Vue Principale

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

OriginalL'auteur Owen

En fait, vous devez le faire à partir d'une iframe en accédant à la fenêtre parent et l'évolution de l'iframe hauteur.

Car le document dans un iframe connaît généralement mieux si le corps a changé, c'est la taille (il est possible de le lier à quelque chose comme le corps.onload au lieu d'utiliser des intervalles de vérifier si quelque chose a changé dans l'iframe).

OriginalL'auteur haldagan