Ajuster la largeur et la hauteur de l'iframe pour s'adapter au contenu qu'il contient

J'ai besoin d'une solution pour ajuster automatiquement le widthet heightd'un iframepour s'adapter à peine à son contenu. Le fait est que la largeur et la hauteur peuvent être modifiées après le iframechargement du. Je suppose que j'ai besoin d'une action d'événement pour faire face au changement de dimensions du corps contenu dans l'iframe.

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

Plug-in jQuery inter-navigateurs .

Cross-bowser, bibliothèque inter-domaines qui utilise mutationObserverpour maintenir la taille de l'iFrame au contenu et postMessagepour communiquer entre l'iFrame et la page hôte. Fonctionne avec ou sans jQuery.

Toutes les solutions proposées jusqu'à présent ne représentent qu'un redimensionnement unique. Vous mentionnez que vous souhaitez pouvoir redimensionner l'iFrame après la modification du contenu. 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 dire que le contenu a changé).

J'étais coincé 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 modifier l'iFrame), et le code exécuté en dehors de l'iFrame était coincé avec le DOM à l'extérieur de l'iFrame (et ne pouvait pas '' t prendre un événement venant de l'intérieur de l'iFrame).

La solution est venue de découvrir (via l'aide d'un collègue) que jQuery peut être informé du 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>

solution à une doublure pour les incrustations: 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>

Si le contenu iframe provient du même domaine, cela devrait fonctionner parfaitement. Il nécessite cependant jQuery.

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

Pour le redimensionner dynamiquement, vous pouvez procéder comme suit:

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

Voici une solution multi-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;
}

Après avoir tout essayé sur 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>

J'utilise ce code pour ajuster automatiquement la hauteur de tous les iframes (avec la classe autoHeight) lorsqu'ils se chargent sur la page. Testé et fonctionne sous 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();
});

Ceci est une solution solide à l'épreuve

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 grande solution de Garnaph ci-dessus. Il semblait que sa solution avait modifié la taille de l'iframe en fonction de la taille juste avant l'événement. Pour ma situation (soumission par e-mail via un iframe), j'avais besoin que la hauteur de l'iframe change juste après la soumission. Par exemple, affichez les erreurs de validation ou le message de remerciement après la 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>

A fonctionné pour moi, mais je ne suis pas sûr de la fonctionnalité multi-navigateur.

Si vous pouvez contrôler à la fois le contenu IFRAME et la fenêtre parente, vous avez besoin de l' iFrame Resizer .

Cette bibliothèque permet le redimensionnement automatique de la hauteur et de la largeur des iFrames identiques et inter-domaines pour s'adapter à leur contenu. Il fournit une gamme de fonctionnalités pour résoudre les problèmes les plus courants liés à l'utilisation des iFrames, notamment:

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

tous ne peuvent pas fonctionner en utilisant 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

J'ai trouvé une autre solution après quelques expériences. À l'origine, j'ai essayé le code marqué comme «meilleure réponse» à cette question et cela n'a pas fonctionné. Je suppose que mon iframe dans mon programme à l'époque a été 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 bug / effet bizarre des iframes). La largeur est encore plus étrange, vous êtes sûr d'ajouter 18px à la largeur du corps. Assurez-vous également que vous avez le CSS pour le corps iframe appliqué (ci-dessous).

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

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

Voici le html pour 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). J'ai encore plus de tests à faire, alors dites-moi comment cela fonctionne pour vous.

Voici comment je le ferais (testé en 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>

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>

CACHER LE DÉFILEMENT AVEC 2 ALTERNATIVES COMME INDIQUÉ CI-DESSUS

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

HACK AVEC LE SECOND 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 fait "overflow: hidden" pour masquer les barres de défilement et l'iFrame est fait pour aller jusqu'à 150% de largeur et de hauteur, ce qui force les barres de défilement à l'extérieur de la page et puisque le corps ne fait pas '' t avoir des barres de défilement on ne peut pas s'attendre à ce que l'iframe dépasse les limites de la page. Cela cache les barres de défilement de l'iFrame avec toute la largeur!

source: définir la hauteur automatique iframe

Au cas où quelqu'un arriverait ici: j'ai eu un problème avec les solutions lorsque j'ai supprimé les divs de l'iframe - l'iframe n'a pas raccourci.

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é que ce redimensionneur fonctionnait mieux:

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, ça 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>

Le contexte

J'ai dû le faire moi-même dans le cadre d'une extension Web. Cette extension Web injecte une partie de l'interface utilisateur dans chaque page, et cette interface utilisateur vit à l'intérieur d'un iframe. Le contenu à l'intérieur du iframeest dynamique, j'ai donc dû réajuster la largeur et la hauteur de iframelui - même.

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

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

À l'intérieur, iframej'ai changé de bodystyle pour avoir de très grandes dimensions. Cela permettra aux éléments à l'intérieur de se disposer en utilisant tout l'espace nécessaire. Faire widthet height100% n'a pas fonctionné pour moi (je suppose que l'iframe a un défaut width = 300pxet height = 150px)

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

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

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

Après avoir rendu mon application à l'intérieur #ui-root(dans React, je le fais à l'intérieur componentDidMount), je calcule les dimensions de ce div comme et les synchronise 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)

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

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

Fondamentalement, 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 avec tous les navigateurs modernes!

Je sais que le message est ancien, mais je crois que c'est encore une autre façon de le faire. Je viens de mettre en œuvre mon code. Fonctionne parfaitement à la fois au chargement de la page 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';
        } );
    }
};
} );

Remarquez le pourcentage, je l'ai inséré afin que vous puissiez contrer la mise à l'échelle habituellement effectuée pour les iframe, le texte, les annonces, etc., mettez simplement 0 si aucune mise à l'échelle n'est implémentée

C'est comme ça que je l'ai fait en charge ou quand les choses changent.

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

De toute évidence, il y a beaucoup de scénarios, cependant, j'avais le même domaine pour le document et l'iframe et j'ai pu aborder cela jusqu'à la fin de mon contenu iframe:

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

Cela «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'y a rien pour «observer» le changement de hauteur du document, ce dont je n'avais pas besoin pour mon cas d'utilisation. Dans ma réponse, j'apporte un moyen de référencer le conteneur parent sans utiliser d'ID cuits dans le contenu parent / iframe.

Si vous pouvez vivre avec un rapport hauteur / largeur fixe et que vous souhaitez un iframe réactif , ce code vous sera utile. Ce ne sont que des règles CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

L'iframe doit avoir un div comme conteneur.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Le code source est basé sur ce site et Ben Marshall a une bonne explication.

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

Si le contenu est juste un html très simple, le moyen le plus simple est de supprimer l'iframe avec javascript

Code HTML:

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

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

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>