Dupliquer possible:
Redimensionnement d'un iframe en fonction du contenuJe charge un iFrame et je souhaite que le parent modifie automatiquement la hauteur en fonction 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.
Réponses
Trop de publicités?
Sur tout autre élément, j'utiliserais les 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 offsetHeight :
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
Et attachez-le à courir avec l'événement onLoad l'iframe-body.
xmedeko
Points
1038
Shripad K
Points
6594
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é! :)
Éditer: Si vous avez un éditeur de texte enrichi basé sur la méthode iframe et non sur la méthode div et que vous voulez qu'il développe chaque nouvelle ligne, alors ce code fera le nécessaire.
Sky
Points
102
Voici une solution simple 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 à une hauteur de 100% et que l'iframe est stylé à l'aide de css pour avoir une hauteur de 100%, css redimensionnera automatiquement tout le contenu 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>
craigmoliver
Points
3022
Cette solution a fonctionné mieux pour moi. Il utilise jQuery et l'événement ".load" de l'iframe.
