Redimensionner une iframe en fonction du contenu

498

Je travaille sur une application de type iGoogle. Le contenu provenant d'autres applications (sur d'autres domaines) est affiché à l'aide d'iframes.

Comment redimensionner les iframes pour qu'ils correspondent à la hauteur du contenu des iframes?

J'ai essayé de déchiffrer le javascript utilisé par Google, mais il est obscurci, et la recherche sur le Web est restée infructueuse jusqu'à présent.

Mise à jour: veuillez noter que le contenu est chargé à partir d'autres domaines, donc la même politique d'origine s'applique.

javascript iframe widget larssg
la source

584

Nous avons eu ce type de problème, mais légèrement à l'inverse de votre situation - nous fournissions le contenu iframed à des sites sur d'autres domaines, donc la même politique d'origine était également un problème. Après de nombreuses heures passées à naviguer sur Google, nous avons finalement trouvé une solution (quelque peu ..) réalisable, que vous pourrez peut-être adapter à vos besoins.

Il existe un moyen de contourner la même politique d'origine, mais cela nécessite des modifications à la fois sur le contenu iframé et sur la page de cadrage. Si vous n'avez pas la possibilité de demander des modifications des deux côtés, cette méthode ne vous sera pas très utile, J'ai peur.

Il y a une bizarrerie du navigateur qui nous permet de contourner la même politique d'origine - javascript peut communiquer soit avec des pages sur son propre domaine, soit avec des pages qu'il a encadrées, mais jamais des pages dans lesquelles il est encadré, par exemple si vous avez:

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

home.htmlpeut alors communiquer avec framed.html(iframed) et helper.html(même domaine).

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.htmlpeut envoyer des messages à helper.html(iframed) mais pas home.html (l'enfant ne peut pas communiquer entre domaines avec le parent).

La clé ici est de helper.htmlpouvoir recevoir des messages de framed.html, et peut également communiquer avec home.html.

Donc, essentiellement, lors du framed.htmlchargement, il calcule sa propre hauteur, indique helper.html, qui transmet le message home.html, qui peut ensuite redimensionner l'iframe dans laquelle se framed.htmltrouve.

Le moyen le plus simple que nous avons trouvé pour passer des messages de framed.htmlà helper.htmlétait d'utiliser un argument URL. Pour ce faire, framed.htmla un iframe avec src=''spécifié. Lorsqu'il se onloaddéclenche, il évalue sa propre hauteur et définit le src de l'iframe à ce stade surhelper.html?height=N

Il y a une explication ici de la façon dont Facebook le gère, qui peut être légèrement plus claire que la mienne ci-dessus!

Code

Dans www.foo.com/home.html, le code javascript suivant est requis (il peut être chargé à partir d'un fichier .js sur n'importe quel domaine, incidemment ..):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

Dans www.bar.net/framed.html:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

Contenu de www.foo.com/helper.html:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

ConroyP
la source

7

vraiment plein de perspicacité. Je me demandais pourquoi igoogle.com avait un fichier helper.html! Merci

IEnumerator

9

Super merci! J'ai fait quelques ajouts: Utilisez jQuery pour obtenir la hauteur du corps dans framed.html (problème FF, le corps continue de grandir): var height = $ (document.body) .height (); A utilisé un événement de chargement de corps pour créer le cadre dans home.html similaire à votre approche dans framed.html. Adresses ne mettant pas à jour le cadre lors de l'actualisation dans FF et Safari.

Abdullah Jibaly

5

Génie! En plus des ajouts d'Abdullah: plutôt que de définir le corps onload à appeler parentIframeResize(), j'ai utilisé JQuery pour attraper à la fois la charge de la page et les événements de redimensionnement: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);cela me permet de définir l'iframe width="100%"et si la largeur de la fenêtre change pour faire du texte ou quelque chose, le le cadre intérieur reconnaîtra qu'il doit être redimensionné.

StriplingWarrior

9

Je suggère de donner à l'iframe id = frame_name_here un attribut de hauteur par défaut tel que height = "2000". Cela signifie que lorsque la page se charge, le contenu encadré est visible. Lorsque le redimensionnement se produit, il n'y a pas de "scintillement". Le redimensionnement rétrécit / s'étend sous le pli de la page. Si vous connaissez la hauteur maximale de votre contenu iframed, utilisez cette valeur ... cela se traduit également par une meilleure expérience noscript.

Chris Jacob

3

Sept ans plus tard, toujours la meilleure solution inter-navigateur et inter-domaine que j'ai trouvée. Bravo.

FurryWombat

81

Si vous n'avez pas besoin de gérer le contenu iframe d'un autre domaine, essayez ce code, il résoudra complètement le problème et c'est simple:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Ahmy
la source

9

Il peut être plus optimal de passer l'élément lui-même à la fonction pour éviter tous ceux que document.getElementById(id)vous avez et simplifier le code.

Muhd

1

Cela ne fonctionne pas pour moi car le contentWindow.document.body.scrollHeight contient 0 et non la hauteur réelle.

kroiz

4

Cette solution, comme toutes les autres que j'ai essayées, ne fonctionne que si la hauteur augmente, si à partir d'une page haute vous accédez à une page plus courte, la hauteur est toujours définie en fonction de la hauteur de la première. Quelqu'un a-t-il trouvé une solution à ce problème?

Eugenio

6

@Eugenio et tous les autres, y compris moi, pour résoudre ce problème final: voir stackoverflow.com/questions/3053072/… Avant de demander la hauteur du document à l'intérieur de l'iframe, vous devez définir la hauteur de l'objet iframe sur "auto". Notez que vous devez utiliser style.height et pas seulement la hauteur comme dans la réponse ci

Kyle

7

Je ne comprends pas ... vous vérifiez l'existence de document.getElementById et vous l'appelez quand même en dehors de la zone cochée?

Legolas

41

https://developer.mozilla.org/en/DOM/window.postMessage

window.postMessage ()

window.postMessage est une méthode permettant d'activer en toute sécurité la communication entre origines. Normalement, les scripts sur différentes pages ne sont autorisés à accéder les uns aux autres que si et seulement si les pages qui les ont exécutées se trouvent à des emplacements avec le même protocole (généralement les deux http), le numéro de port (80 étant la valeur par défaut pour http) et l'hôte (modulo document.domain étant défini par les deux pages sur la même valeur). window.postMessage fournit un mécanisme contrôlé pour contourner cette restriction de manière sûre lorsqu'il est correctement utilisé.

Sommaire

window.postMessage, lorsqu'il est appelé, provoque la distribution d'un MessageEvent dans la fenêtre cible lorsque tout script en attente qui doit être exécuté se termine (par exemple, les gestionnaires d'événements restants si window.postMessage est appelé à partir d'un gestionnaire d'événements, les délais d'attente en attente précédemment définis, etc. ). Le MessageEvent a le type message, une propriété de données qui est définie sur la valeur de chaîne du premier argument fourni à window.postMessage, une propriété d'origine correspondant à l'origine du document principal dans la fenêtre appelant window.postMessage à la fenêtre de temps. postMessage a été appelé et une propriété source qui est la fenêtre à partir de laquelle window.postMessage est appelé. (D'autres propriétés standard des événements sont présentes avec leurs valeurs attendues.)

La bibliothèque iFrame-Resizer utilise postMessage pour conserver une iFrame à la taille de son contenu, avec MutationObserver pour détecter les modifications du contenu et ne dépend pas de jQuery.

https://github.com/davidjbradshaw/iframe-resizer

jQuery: qualité des scripts interdomaines

http://benalman.com/projects/jquery-postmessage-plugin/

A une démo de redimensionnement de la fenêtre iframe ...

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

Cet article montre comment supprimer la dépendance à jQuery ... Plus contient de nombreuses informations utiles et des liens vers d'autres solutions.

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Exemple de barebones ...

http://onlineaspect.com/uploads/postmessage/parent.html

Projet de travail HTML 5 sur window.postMessage

http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages

John Resig sur la messagerie entre fenêtres

http://ejohn.org/blog/cross-window-messaging/

Chris Jacob
la source

postMessage n'est pas en soi un navigateur croisé, mais le plugin jQuery semble faire un bon travail en le simulant si nécessaire. Le seul vrai problème est la "jonque" qui est ajoutée à la barre d'URL dans les cas où postMessage n'est pas pris en charge.

Herms

2

postMessage semble être X-Browser. Seul l'IE a des bugs ou des choses à prendre en charge: 1. Communication uniquement entre les cadres ou les iframes 2. Uniquement capable de publier des chaînes. Voir: caniuse.com/x-doc-messaging

Christian Kuetbach

3

Cela aurait été bien de vous voir répondre à la question au lieu d'expliquer une technologie d'assistance qui aide à trouver une solution ..

hitautodestruct

periscopedata utilise postMessage, si c'est assez bon pour eux, c'est assez bon pour nous. Voici leurs documents: doc.periscopedata.com/docv2/embed-api-options

Yevgeniy Afanasyev

8

La manière la plus simple d'utiliser jQuery:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

Omer Arshad
la source

14

Pas de domaine croisé comme demandé.

willem

6

La solution sur http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html fonctionne très bien (utilise jQuery):

<script type=”text/javascript”>
  $(document).ready(function() {
    var theFrame = $(”#iFrameToAdjust”, parent.document.body);
    theFrame.height($(document.body).height() + 30);
  });
</script>

Je ne sais pas si vous devez ajouter 30 à la longueur ... 1 a fonctionné pour moi.

FYI : Si vous avez déjà un attribut "height" sur votre iFrame, cela ajoute simplement style = "height: xxx". Ce n'est peut-être pas ce que vous voulez.

Macho Matt
la source

7

Pas inter-domaines, non.

Volomike

Juste ce dont j'avais besoin car je ne fais pas cross-domain, +1 pour du html valide.

WildJoe

4

peut être un peu en retard, car toutes les autres réponses sont plus anciennes :-) mais ... voici ma solution. Testé dans FF, Chrome et Safari 5.0.

css:

iframe {border:0; overflow:hidden;}

javascript:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

J'espère que cela aidera n'importe qui.

ddlab
la source

@pashute - voulez-vous dire "cross-domain"?

Luke

Désolé. Destinée: ne fonctionne pas multi - plateforme ... Voici un point essentiel public: gist.github.com/pashute/c4705ce7f767f50fdf56d0030ecf9192 Obtient une erreur refusé d'exécuter. Changer le script pour avoir type = "text / javascript" n'aide pas. Ni définir la largeur et la hauteur de l'iframe (disons 80%).

pashute

4

Enfin, j'ai trouvé une autre solution pour envoyer des données au site Web parent à partir d'iframe en utilisant window.postMessage(message, targetOrigin);. Ici, j'explique comment j'ai fait.

Site A = http://foo.com Site B = http://bar.com

SiteB se charge à l'intérieur du siteA

Le site Web SiteB a cette ligne

window.parent.postMessage("Hello From IFrame", "*");

ou

window.parent.postMessage("Hello From IFrame", "http://foo.com");

Alors siteA a ce code suivant

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];


var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
   alert(e.data);
   // Do whatever you want to do with the data got from IFrame in Parent form.
}, false);

Si vous souhaitez ajouter une connexion de sécurité, vous pouvez l'utiliser si la condition eventer(messageEvent, function (e) {})

if (e.origin == 'http://iframe.example.com') {
    alert(e.data); 
    // Do whatever you want to do with the data got from IFrame in Parent form.
}

Pour IE

À l'intérieur d'IFrame:

 window.parent.postMessage('{"key":"value"}','*');

À l'extérieur:

 eventer(messageEvent, function (e) {
   var data = jQuery.parseJSON(e.data);
   doSomething(data.key);
 }, false);

Selvamani
la source

2

Voici une solution simple utilisant une feuille de style générée dynamiquement servie par le même serveur que le contenu iframe. Tout simplement, la feuille de style "sait" ce qui se trouve dans l'iframe et connaît les dimensions à utiliser pour styliser l'iframe. Cela contourne les mêmes restrictions de politique d'origine.

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

Ainsi, le code iframe fourni aurait une feuille de style d'accompagnement comme ceci ...

<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />  <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

Cela nécessite que la logique côté serveur puisse calculer les dimensions du contenu rendu de l'iframe.

Vaughan Rowsell
la source

Le lien est en panne. Pourriez-vous s'il vous plaît partager le code pertinent dans votre réponse afin qu'il reste pertinent pour ce fil?

zed

2

Cette réponse ne s'applique qu'aux sites Web qui utilisent Bootstrap. La fonction d'intégration réactive du Bootstrap fait le travail. Il est basé sur la largeur (et non la hauteur) du contenu.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
la source

Cela fonctionne pour incorporer des vidéos, mais si je veux intégrer une page Web avec une hauteur, elle obtient un défilement et une hauteur étrange.

cabaji99

1

J'implémente la solution frame-in-frame de ConroyP pour remplacer une solution basée sur la définition de document.domain, mais j'ai trouvé qu'il était assez difficile de déterminer correctement la hauteur du contenu de l'iframe dans différents navigateurs (test avec FF11, Ch17 et IE9 en ce moment ).

ConroyP utilise:

var height = document.body.scrollHeight;

Mais cela ne fonctionne que lors du chargement initial de la page. Mon iframe a un contenu dynamique et je dois redimensionner l'iframe sur certains événements.

J'ai fini par utiliser différentes propriétés JS pour les différents navigateurs.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData () est une fonction de détection de navigateur "inspirée" par http://docs.sencha.com/core/source/Ext.html#method-Ext-apply d' Ext Core

Cela fonctionnait bien pour FF et IE, mais il y avait ensuite des problèmes avec Chrome. L'un d'eux était un problème de timing, apparemment, cela prend un certain temps à Chrome pour définir / détecter la hauteur de l'iframe. Et puis Chrome n'a jamais renvoyé la hauteur du contenu dans l'iframe correctement si l'iframe était supérieur au contenu. Cela ne fonctionnerait pas avec du contenu dynamique lorsque la hauteur est réduite.

Pour résoudre ce problème, je règle toujours l'iframe sur une faible hauteur avant de détecter la hauteur du contenu, puis de définir la hauteur de l'iframe sur sa valeur correcte.

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

Le code n'est pas optimisé, c'est de mes tests de développement :)

J'espère que quelqu'un trouve cela utile!

Tor Händevik
la source

1

<html>
<head>
<script>
function frameSize(id){
var frameHeight;

document.getElementById(id).height=0 + "px";
if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;    
}

document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>

<body>

<iframe id="frame"  src="startframe.html" frameborder="0" marginheight="0" hspace=20     width="100%" 

onload="javascript:frameSize('frame');">

<p>This will work, but you need to host it on an http server, you can do it locally.    </p>
</body>
</html>

webd3sign
la source

0

Les gadgets iGoogle doivent implémenter activement le redimensionnement, donc je suppose que dans un modèle interdomaine, vous ne pouvez pas le faire sans que le contenu distant ne participe d'une manière ou d'une autre. Si votre contenu peut envoyer un message avec la nouvelle taille à la page de conteneur en utilisant des techniques de communication interdomaines typiques, alors le reste est simple.

Joeri Sebrechts
la source

0

Lorsque vous souhaitez effectuer un zoom arrière sur une page Web pour l'adapter à la taille de l'iframe:

Vous devez redimensionner l' iframe pour l'adapter au contenu
Ensuite, vous devez effectuer un zoom arrière sur l'ensemble de l'iframe avec le contenu de la page Web chargé

Voici un exemple:

<div id="wrap">
   <IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>

<style type="text/css">
    #wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
    #frame { width: 900px; height: 600px; border: 1px solid black; }
    #frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>

kaw
la source

0

Voici une approche jQuery qui ajoute les informations dans json via l'attribut src de l'iframe. Voici une démo, redimensionnez et faites défiler cette fenêtre .. l'url résultante avec json ressemble à ceci ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #

Voici le code source du violon http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

chad steele
la source

0

obtenir la hauteur du contenu iframe puis le donner à cet iframe

 var iframes = document.getElementsByTagName("iframe");
 for(var i = 0, len = iframes.length; i<len; i++){
      window.frames[i].onload = function(_i){
           return function(){
                     iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
                     }
      }(i);
 }

YellowGlue
la source

1

Pouvez-vous s'il vous plaît ajouter une sorte de description des raisons pour lesquelles votre code répond à la question?

rires

0

Travailler avec jquery lors du chargement (cross browser):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }

lors du redimensionnement dans la page responsive:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

Mario Gonzales Flores
la source

-1

Utilisation de jQuery:

parent.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
    width: 100%;
    border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
    $("iframe").css({width: w, height: h});
    return true;  // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>

child.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    var w = $("#container").css("width");
    var h = $("#container").css("height");

    var req = parent.foo(w, h);
    console.log(req); // for debug purposes
});
</script>
<style>
body, html {
    margin: 0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>
<div id="container"></div>
</body>

Nino Škopac
la source

-2

C'est un peu délicat car vous devez savoir quand la page iframe est chargée, ce qui est difficile lorsque vous ne contrôlez pas son contenu. Il est possible d'ajouter un gestionnaire de chargement à l'iframe, mais j'ai essayé cela dans le passé et il a un comportement très différent selon les navigateurs (ne devinez pas qui est le plus ennuyeux ...). Vous devrez probablement ajouter une fonction à la page iframe qui effectue le redimensionnement et injecter un script dans le contenu qui écoute les événements de chargement ou de redimensionnement, qui appelle ensuite la fonction précédente. Je pense ajouter une fonction à la page car vous voulez vous assurer qu'elle est sécurisée, mais je ne sais pas à quel point ce sera facile à faire.

roryf
la source

-2

Quelque chose sur les lignes de ce que je crois devrait fonctionner.

parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

Chargez ceci avec votre corps en charge sur le contenu iframe.

Ólafur Waage
la source

3

Ce n'est pas possible car le contenu des iFrames est chargé à partir d'autres domaines, donc essayer de le faire entraîne une erreur, telle que celle de Firefox: "Autorisation refusée pour obtenir la propriété Window.document".

larssg

-4

J'ai une solution simple et vous demande de déterminer la largeur et la hauteur du lien, veuillez essayer (cela fonctionne avec la plupart des navigateurs):

<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>

فيصل خلبوص
la source

Redimensionner une iframe en fonction du contenu

Réponses:

obtenir la hauteur du contenu iframe puis le donner à cet iframe