Ajustement de la largeur et de la hauteur de l'iframe en fonction de son contenu

Question

J'ai besoin d'une solution pour auto-ajustement le site width y height d'un iframe pour s'adapter à peine à son contenu. L'intérêt est que la largeur et la hauteur peuvent être modifiées après l'ajout de l'option iframe a été chargé. Je suppose que j'ai besoin d'une action événementielle pour gérer le changement de dimensions du corps contenu dans l'iframe.

Answer 1

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Answer 2

Cross-browser plug-in jQuery .

Arbalétrier, domaine croisé bibliothèque qui utilise mutationObserver pour que la taille de l'iFrame corresponde à celle du contenu, et postMessage pour communiquer entre iFrame et la page hôte. Fonctionne avec ou sans jQuery.

Answer 3

Toutes les solutions proposées jusqu'à présent ne prévoient qu'un redimensionnement unique. Vous mentionnez que vous voulez pouvoir redimensionner l'iFrame après que le contenu ait été modifié. Pour ce faire, vous devez exécuter une fonction à l'intérieur de l'iFrame (une fois le contenu modifié, vous devez déclencher un événement pour indiquer que le contenu a changé).

J'ai été bloqué avec cela pendant un certain temps, car le code à l'intérieur de l'iFrame semblait limité au DOM à l'intérieur de l'iFrame (et ne pouvait pas éditer l'iFrame), et le code exécuté à l'extérieur de l'iFrame était bloqué avec le DOM à l'extérieur de l'iFrame (et ne pouvait pas prendre un événement venant de l'intérieur de l'iFrame).

La solution est venue de la découverte (avec l'aide d'un collègue) que l'on peut indiquer à jQuery quel DOM utiliser. Dans ce cas, le DOM de la fenêtre parent.

En tant que tel, un code tel que celui-ci fait ce dont vous avez besoin (lorsqu'il est exécuté à l'intérieur de l'iFrame) :

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Answer 4

Si le contenu de la iframe provient du même domaine, cela devrait fonctionner parfaitement. Il faut cependant utiliser jQuery.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Pour le faire redimensionner dynamiquement, vous pouvez faire ceci :

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Ensuite, sur la page que l'iframe charge, ajoutez ceci :

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Answer 5

Voici une solution multi-navigateurs si vous ne voulez pas utiliser jQuery :

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}