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


300

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.


Hauteur angulaire iFrame automatique: gitlab.com/reduardo7/angular-iframe-auto-height
Eduardo Cuomo

La réponse acceptée ne fonctionne pas. Essayez stackoverflow.com/a/31513163/482382
Steven Shaw

Réponses:


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

8
@StoneHeart: oui, c'est un navigateur croisé. Le code n'est pas conforme aux normes en raison de la propriété contentWindow, qui n'est pas définie dans les spécifications DOM. Dans la spécification DOM, il existe une propriété appelée contentDocument, mais Internet Explorer 6 (et 7?) Ne la prend pas en charge. La propriété contentWindow peut être utilisée à la place et elle est implémentée dans tous les navigateurs courants (Gecko, Opera, Webkit, IE).
Rafael

30
À quoi sert if (document.getElementById)?
Ally

55
N'oubliez pas non plus qu'il ne s'agit pas d'un domaine croisé. Raison pour laquelle il obtient une sorte d' erreur: Autorisation refusée d'accéder au document de propriété si le domaine est différent. Une solution peut être trouvée ici
Pierre de LESPINAY

15
Le conditionnel est non seulement inutile, mais dans les rares circonstances auxquelles il est destiné, il est garanti de causer des problèmes. Pourquoi vérifiez-vous si une méthode existe et puis utilisez la méthode en dehors de la vérification ??
JS

6
Je pense que vous vouliez dire DOMContentLoaded, car DOMContentReadycela ne semble pas être une chose: developer.mozilla.org/en-US/…
Max Heiber

46

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.


3
La bibliothèque iframe-resizer est la solution la plus robuste.
kwill

35

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>

Quel serait le code complet pour cela? Je suppose que le script va dans le iframe html?
Andrew Hundt

Il s'agit du code complet, et oui, il s'exécute à l'intérieur du code HTML de l'iFrame. La partie "window.parent.document" spécifie que le sélecteur jQuery doit utiliser le DOM du document parent, et non le document dans lequel vous vous trouvez (qui se trouve à l'intérieur de l'iFrame).
Garnaph

13
Cela fonctionne à merveille si le document parent et le document dans l'iframe sont tous deux du même domaine . S'ils ne le sont pas (ou, en chrome, s'ils sont tous les deux des fichiers locaux ), les politiques de sécurité "de même origine" des navigateurs se déclenchent et empêchent le contenu de l'iframe de modifier le document parent.
user56reinstatemonica8

1
Pour quiconque essaie de créer quelque chose comme ce travail dans plusieurs domaines, consultez window.postMessage (IE8 +) et sachez que vous aurez besoin de scripts personnalisés sur les documents hôte (parent) et source (dans iframe). Le plugin jQuery postmessage pourrait aider. Puisque vous aurez besoin de scripts sur l'hôte et la source, il pourrait être plus facile de simplement charger l'hôte de charger le contenu par AJAX en utilisant JSON-P.
user56reinstatemonica8

3
Comment déclencher l'événement automatiquement au lieu de jQuery("#IDofControlFiringResizeEvent").click(function ()?
Ben

33

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>


Exécuter l'extrait de code ne fonctionne pas avec Safari 9.1.1 peut-être inclure un problème SO?
Elensar

Ce n'est pas du domaine croisé. Peut-être que le serveur doit ajouter des en-têtes à la page encadrée?
Finesse

Toutes les réponses ici qui mentionnent scrollHeight/scrollWidthdevraient être ajustées un peu pour tenir compte des marges corporelles. Les navigateurs appliquent des marges non nulles par défaut pour l'élément de corps des documents (et cela s'applique également au contenu chargé dans des cadres). La solution de travail que je trouve est d'ajouter ceci: parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Stan

24

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>

existe-t-il des moyens simples de le faire lorsque l'origine est d'un domaine différent?
BruceJohnJennerLawso

15

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

1
C'est étrange. Pour moi, il calcule une largeur d'iframe très étrange. la largeur du contenu est de 750 et il est calculé comme 300. Avez-vous des idées pourquoi?
Rob

J'ai joué avec ce code (en ajoutant des options de hauteur). Si je règle la hauteur de l'iFrame à 100%, elle la limite à environ 200 pixels. Si je règle la hauteur de l'iFrame à 600 pixels, cela colle avec cela. @RobertJagoda avez-vous trouvé une solution à cela?
iaindownie

9

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>

il dit: Uncaught TypeError: $ n'est pas une fonction à autoResize ((index): 200) à HTMLIFrameElement.onload ((index): 204)
Michael Rogers

2
@Michael Rogers Il y a un conflit avec $ ou vous oubliez d'inclure le fichier jQuery.js. Utilisez une fonction générique stackoverflow.com/questions/6109847/… ou remplacez $ par jQuery
Adrian P.

8

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

2
Quelle est cette magie 35 que vous ajoutez? Pour quel navigateur et OS l'avez-vous mesuré?
h2stein

Maintenant, je ne sais vraiment pas pourquoi j'ai ajouté 35 pixels. Mais je peux certainement vous dire que je l'ai testé sur FF, IE (7, 8, 9) et Chrome et que j'ai très bien fonctionné.
petriq

3
Je pense que 35 n'est que l'épaisseur de la barre de défilement
Sadegh

J'ai dû modifier un peu cela pour le faire fonctionner - appelé setHeight (iframe); directement (suppression du wrapper $ (iframe) .load () qui l'entoure.
shacker

Les 35 pixels magiques ajoutés doivent tenir compte du rembourrage iframe. J'ajouterais que l'iframe ne devrait contenir aucun remplissage, le contenu de l'ifram devrait s'en occuper.
Filipe Melo

5

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>

3

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.


3

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.

2

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


2

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.


merci cela fonctionne incroyablement dans les navigateurs mobiles de ce que j'ai testé et c'est là que j'avais des problèmes avec le redimensionnement des iframes!
Mircea Sandu

Heureux que vous l'aimiez :-) J'ai trouvé l'iframe pour la plupart beaucoup plus efficace et offre une meilleure prise en charge du navigateur qu'Ajax.
www139

1
MERCI!!! Principalement, parce que vous êtes le seul à avoir spécifié OERE mettre le code sans supposer que les gens le savent. Cette solution simple a parfaitement fonctionné pour moi (Firefox, Chrome, Edge), pour cadrer du contenu dynamique sur le même domaine dans mon site Wordpress. J'ai un formulaire de sélection qui produira un contenu dynamique de différentes longueurs. L'iFrame s'ajuste magnifiquement. J'ai dû modifier le .clientHeight + 5 + 'px'; et clientWidth + 18 + 'px'; être plus de pixels. Et je ne sais pas pourquoi l'affichage: table; dans le CSS était nécessaire, donc je l'ai commenté à mes fins. Merci encore.
Heres2u

1

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>

Si Microsoft ne se soucie pas de cela, qui devrait s'en soucier?
m3nda

1

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


Les exemples que vous avez donnés sont censés créer du contenu complet iframe, et non pas redimensionner automatiquement la hauteur de l'iframe pour qu'elle s'adapte à tout le contenu interne. Il ne répond pas aux questions.
nickornotto


1

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


Ne fonctionne pas pour moi sur Chrome / Win10 - le contenu est coupé en partie en bas.
glenneroo

1

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>

1

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)

Bonne solution! Merci!
redelschaap


0

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

0

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

0

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


0

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

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

0

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.


0

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.


-1

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

-1

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

1
Cela modifie le contour du document parent. Si vous souhaitez avoir un autre document sous la forme d'une figure avec une figcaption, cela ne conserve pas le contour du document aussi succinct. Différents cas d'utilisation, mais je voulais déplacer un extrait de code vers un iframe pour des raisons générales.
Henry's Cat

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

Ce n'est pas CSS, c'est JS.
clifgriffin
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.