web-dev-qa-db-fra.com

Comment redimensionner automatiquement un iFrame?

Duplicate possible:
Redimensionnement d'un iframe en fonction du conten

Je charge une iFrame et souhaite que le parent modifie automatiquement la hauteur en fonction de la hauteur du contenu de l'iFrame.

Pour résumer, toutes les pages appartiennent au même domaine. Par conséquent, je ne devrais pas rencontrer de problèmes de script intersite.

javascriptiframeautosize
63
Allan

Pour tout autre élément, j'utiliserais le scrollHeight de l'objet DOM et définirais la hauteur en conséquence. Je ne sais pas si cela fonctionnerait sur un iframe (parce qu'ils sont un peu bizarres à propos de tout) mais ça vaut vraiment le coup d'essayer.

Edit: Après avoir jeté un coup d’œil, le consensus populaire consiste à définir la hauteur depuis l’iframe à l’aide de la touche offsetHeight:

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

Et attachez-le pour qu'il soit exécuté avec l'événement onLoad de l'iframe-body.

39
Oli

Essayer:

14
xmedeko

Je viens de passer par votre question et j'ai une solution. Mais c'est dans jQuery. C'est trop simple.

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

Voilà!

À votre santé! :)

Edit: Si vous avez un éditeur de texte enrichi basé sur la méthode iframe et non la méthode div et que vous voulez qu'il développe chaque nouvelle ligne, alors ce code fera le nécessaire.

10
Shripad Krishna

Voici une solution simple et efficace qui fonctionne sur tous les navigateurs et avec plusieurs domaines:

Tout d'abord, cela fonctionne sur le concept que si la page html contenant l'iframe est définie sur une hauteur de 100% et que l'iframe est stylé à l'aide de CSS pour avoir une hauteur de 100%, css redimensionnera automatiquement tout pour l'adapter.

Voici le code:

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-Origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
7
Sky

Cette solution a fonctionné le mieux pour moi. Il utilise jQuery et l'événement ".load" de l'iframe.

2
craigmoliver

Ma solution, (en utilisant jquery):

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>  
<script type="text/javascript">
    $(function () {

        $('.tabFrame').load(function () {
            var iframeContentWindow = this.contentWindow;
            var height = iframeContentWindow.$(document).height();
            this.style.height = height + 'px';
        });
    });
</script>
1
iknowitwasyoufredo

J'ai trouvé la solution de @ShripadK très utile, mais cela ne fonctionne pas s'il y a plus d'un iframe. Ma solution est:

function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
  • $('iframe').height($('iframe').contents().find('body').height() + 20) définirait la hauteur de chaque image sur la même valeur, à savoir la hauteur du contenu de la première image. J'utilise donc height() de jquery avec une fonction au lieu d'une valeur. De cette façon, les hauteurs individuelles sont calculées
  • + 20 Est un hack pour contourner les problèmes de barre de défilement iframe. Le nombre doit être supérieur à la taille d'une barre de défilement. Le piratage peut probablement être évité, mais en désactivant les barres de défilement pour l'iframe.
  • J'utilise setTimeout au lieu de setInterval(..., 1) pour réduire la charge du processeur dans mon cas
1
geekQ

Dans IE 5.5+, vous pouvez utiliser la propriété contentWindow:

iframe.height = iframe.contentWindow.document.scrollHeight;

Dans Netscape 6 (en supposant que firefox soit également), propriété contentDocument:

iframe.height = iframe.contentDocument.scrollHeight
1
TimeSpace Traveller

En fait, le code de Patrick a également fonctionné pour moi. La bonne façon de le faire serait dans le sens suivant:

Remarque: il y a un peu de temps devant vous:


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
0
Allan

Ma solution consiste à définir la hauteur/largeur de l'iframe sur toute taille de page source anticipée dans CSS et la propriété background à transparent.

Dans le jeu iframe allow-transparency à true et scrolling à no.

La seule chose visible sera le fichier source que vous utiliserez. Cela fonctionne dans IE8, Firefox 3 et Safari.

0
Gale

Oli a une solution qui fonctionnera pour moi. Pour mémoire, la page à l'intérieur de mon iFrame est restituée en javascript. Il me faudra donc un délai infinitésimal avant de faire rapport sur offsetHeight. Cela ressemble à quelque chose du genre:


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
0
Allan

C'est la méthode la plus simple que j'ai trouvée en utilisant un prototype:

Main.html:

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html:

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

Cela semble fonctionner (jusqu'à présent) dans tous les principaux navigateurs.

0
Ian Harrigan