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

StackOverflow https://stackoverflow.com/questions/819416

Question

J'ai besoin d'une solution pour ajuster automatiquement les largeur et hauteur d'un iframe qui s'adapte à peine à ses contenu. Le fait est que la largeur et la hauteur peuvent être modifiées après le chargement de iframe . Je suppose que j'ai besoin d'une action d'événement pour gérer le changement de dimensions du corps contenu dans l'iframe.

Était-ce utile?

La solution 

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

Autres conseils

plug-in jQuery pour le même navigateur Web.

Cross-Bowser, Cross Domain bibliothèque utilisant mutationObserver pour conserver la taille d'iFrame au contenu et postMessage pour la communication entre iFrame et la page hôte. Fonctionne avec ou sans jQuery.

Toutes les solutions données jusqu'à présent ne prennent en compte qu'un redimensionnement ponctuel. Vous indiquez que vous souhaitez pouvoir redimensionner l'iFrame une fois le contenu modifié. Pour ce faire, vous devez exécuter une fonction dans iFrame (une fois le contenu modifié, vous devez déclencher un événement pour indiquer que le contenu a changé).

Je suis resté coincé avec cela pendant un moment, car le code à l'intérieur de l'iFrame semblait limité au DOM de l'iFrame (et ne pouvait pas éditer l'iFrame), et le code exécuté en dehors 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 a été trouvée en découvrant (avec l'aide d'un collègue) que jQuery peut indiquer le type de DOM à utiliser. Dans ce cas, le DOM de la fenêtre parente.

En tant que tel, un code tel que celui-ci fait ce dont vous avez besoin (lorsqu'il est exécuté dans 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>

Si le contenu de l'iframe provient du même domaine, cela devrait fonctionner correctement. Cela nécessite jQuery cependant. 

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

Pour le redimensionner dynamiquement, vous pouvez le faire: 

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

Ajoutez ensuite ceci sur la page chargée par l'iframe: 

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

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

solution one-liner pour embed: commence par une taille minimale et augmente jusqu'à la taille du contenu. pas besoin de balises de script. 

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Voici une solution inter-navigateur si vous ne souhaitez 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;
}

J'utilise ce code pour ajuster automatiquement la hauteur de tous les iframes (avec css auto Height) lorsqu'ils se chargent sur la page. Testé et fonctionne avec IE, FF, Chrome, Safari et Opera. 

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Après avoir tout essayé sur la Terre, cela fonctionne vraiment pour moi.

index.html 

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

C’est une solution solide 

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

le html 

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

J'ai légèrement modifié la bonne solution de Garnaph ci-dessus. Il semblait que sa solution modifiait la taille de l’iframe en fonction de la taille juste avant l’événement. Pour ma situation (envoi d'email via un iframe), j'avais besoin de la hauteur d'iframe pour changer juste après l'envoi. Par exemple, affichez les erreurs de validation ou "merci". message après soumission.

Je viens d'éliminer la fonction click () imbriquée et de la placer dans mon iframe html: 

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

Travaillé pour moi, mais je ne suis pas sûr de la fonctionnalité du navigateur.

Voici plusieurs méthodes: 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

ET UNE AUTRE ALTERNATIVE 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

POUR CACHER DÉFILER AVEC 2 ALTERNATIVES COMME INDIQUÉ 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Pirater avec un deuxième code 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Pour masquer les barres de défilement de l'iFrame, le parent est créé "overflow: hidden". pour masquer les barres de défilement, l'iFrame est conçu pour aller jusqu'à 150% en largeur et en hauteur, ce qui force les barres de défilement à l'extérieur de la page et, dans la mesure où le corps ne comporte pas de barres de défilement, il est improbable que l'iframe dépasse les limites de la page. . Cela masque les barres de défilement de l’iFrame en pleine largeur!

source: définir hauteur automatique iframe

Tous ne peuvent pas utiliser les méthodes ci-dessus.

javascript: 

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html: 

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

Si vous pouvez contrôler à la fois le contenu IFRAME et la fenêtre parent, vous aurez besoin du iFrame Resizer . .

Cette bibliothèque permet le redimensionnement automatique de la hauteur et de la largeur des images iFrames identiques et interdomaines pour s’adapter au contenu qu'elles contiennent. Il fournit toute une gamme de fonctionnalités permettant de résoudre les problèmes les plus courants liés à l’utilisation d’iFrames, notamment:

  • Redimensionnement en hauteur et en largeur de l'iFrame en fonction de la taille du contenu.
  • Fonctionne avec plusieurs iFrames et imbriqués.
  • Authentification de domaine pour les iFrames interdomaines.
  • Fournit une gamme de méthodes de calcul de taille de page pour prendre en charge les dispositions CSS complexes.
  • Détecte les modifications du DOM pouvant entraîner le redimensionnement de la page à l'aide de MutationObserver.
  • Détecte les événements pouvant entraîner le redimensionnement de la page (événements de redimensionnement de fenêtre, d'animation et de transition CSS, de changement d'orientation et de souris).
  • Messagerie simplifiée entre iFrame et la page hôte via postMessage.
  • Corrige les liens de page dans iFrame et prend en charge les liens entre iFrame et la page parente.
  • Fournit des méthodes de dimensionnement et de défilement personnalisées.
  • Expose la position parent et la taille de la fenêtre d'affichage dans l'iFrame.
  • Fonctionne avec ViewerJS pour prendre en charge les documents PDF et ODF.
  • Prise en charge de secours vers IE8.

Au cas où quelqu'un arriverait ici: J'ai eu un problème avec les solutions quand j'ai enlevé les divs de l'iframe - l'iframe n'a pas été plus court.

Il existe un plugin Jquery qui fait le travail:

http: // www. jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

J'ai trouvé une autre solution après quelques expériences. À l’origine, j’ai essayé le code marqué «meilleure réponse» à cette question et cela n’a pas fonctionné. J'imagine que mon iframe dans mon programme à l'époque était généré dynamiquement. Voici le code que j'ai utilisé (cela a fonctionné pour moi):

Javascript à l'intérieur de l'iframe en cours de chargement: 

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
  

Il est nécessaire d’ajouter 4 pixels ou plus à la hauteur pour supprimer les barres de défilement (un étrange bug / effet des iframes). La largeur est encore plus étrange, vous pouvez ajouter 18px à la largeur du corps en toute sécurité. Assurez-vous également que le css du corps de l'iframe est appliqué (ci-dessous). 

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Voici le code HTML de l'iframe: 

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Voici tout le code dans mon iframe: 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

J'ai fait des tests en chrome et un peu en firefox (sous windows xp). Il me reste encore beaucoup de tests à faire, alors dites-moi comment cela fonctionne pour vous.

J'ai trouvé ce resizer mieux fonctionner: 

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Notez que l'objet de style est supprimé.

Dans jQuery, c’est la meilleure option pour moi, cela m’aide vraiment !! J'attends que ça vous aide!

iframe 

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery 

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

Il est possible de créer un "fantôme". Un IFrame qui agit comme s'il n'était pas là.

Voir http: //codecopy.wordpress. com / 2013/02/22 / ghost-iframe-crossdomain-iframe-resize /

En principe, vous utilisez le système d’événements parent.postMessage (..) décrit dans https://developer.mozilla.org/en-US/docs/DOM /window.postMessage

Cela fonctionne sur tous les navigateurs modernes!

Voici comment je le ferais (testé dans FF / Chrome): 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Je sais que le message est ancien, mais je crois que c'est encore une autre façon de le faire. Je viens d'implémenter sur mon code. Fonctionne parfaitement au chargement et au redimensionnement de la page: 

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

Javascript à placer dans l'en-tête: 

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Voici le code HTML iframe: 

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Feuille de style Css

> 

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Pour l'attribut de directive angularjs: 

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Notez le pourcentage, je l'ai inséré pour que vous puissiez contrer la mise à l'échelle habituellement effectuée pour iframe, texte, annonces, etc., il suffit de mettre 0 si aucune mise à l'échelle n'est implémentée

Si le contenu n'est qu'un fichier HTML très simple, le moyen le plus simple consiste à supprimer l'iframe avec javascript

html: 

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

javascript: 

function removeIframe(obj)(
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

C’est comme cela que je l’ai fait en charge ou lorsque les choses changent. 

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Contexte

Je devais le faire moi-même dans un contexte d'extension web. Cette extension Web injecte une partie de l'interface utilisateur dans chaque page et cette interface utilisateur réside dans un iframe . Le contenu de iframe est dynamique, il a donc fallu réajuster la largeur et la hauteur de iframe lui-même.

J'utilise React , mais le concept s'applique à toutes les bibliothèques.

Ma solution (cela suppose que vous contrôliez à la fois la page et l'iframe)

À l'intérieur de iframe , j'ai modifié les styles body pour obtenir de très grandes dimensions. Cela permettra aux éléments à l'intérieur de disposer en utilisant tout l'espace nécessaire. Rendre width et height 100% ne fonctionnait pas pour moi (je suppose parce que l'iframe a une valeur par défaut width = 300px et = 150px ) 

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Ensuite, j'ai injecté toute l'interface utilisateur d'iframe dans un div et lui ai donné quelques styles 

#ui-root {
  display: 'inline-block';     
}

Après avoir rendu mon application dans ce # ui-root (dans React , je le fais dans ComponentDidMount ). Je calcule les dimensions de cette div aimez et synchronisez-les avec la page parent en utilisant window.postMessage : 

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Dans le cadre parent, je fais quelque chose comme ceci: 

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Clairement, il existe de nombreux scénarios, cependant, j'avais le même domaine pour document et iframe et j'ai été en mesure de l'ajouter à la fin de mon contenu iframe: 

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Ceci "trouve" le conteneur parent, puis définit la longueur en ajoutant un facteur de fudge de 50 pixels pour supprimer la barre de défilement.

Il n’ya rien pour «observer» la hauteur du document qui change, c’était inutile pour mon cas d’utilisation. Dans ma réponse, j'apporte un moyen de référencer le conteneur parent sans utiliser d'identifiants cuits dans le contenu parent / iframe.

Simplicité: 

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

Ceci utilise uniquement le CSS en ligne: 

<iframe src="http://example.com" style="resize: both;"               
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"
        onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';">
</iframe>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top