Comment auto-dimensionner une iFrame? [dupliquer]
possibilité de dupliquer:
redimensionnement d'une iframe basée sur le contenu
je charge une iFrame et je veux que le parent change automatiquement la hauteur en fonction de la hauteur du contenu de l'iFrame.
pour les choses simples, toutes les pages appartiennent au même domaine, donc je ne devrais pas tomber dans des problèmes de scripts entre sites.
12 réponses
sur tout autre élément, j'utiliserais le scrollHeight de L'objet DOM et réglerais la hauteur en conséquence. Je ne sais pas si cela fonctionnerait sur un iframe (parce qu'ils sont un peu fou à propos de tout) mais il est certainement la peine d'essayer.
Edit: ayant eu un coup d'oeil autour, le consensus populaire est de définir la hauteur à partir de l'iframe en utilisant le offsetHeight :
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
et attachez-le pour fonctionner avec le iframe-body onLoad événement.
je viens de répondre à votre question et j'ai une solution. Mais sa en jquery. Ses trop simple.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
voilà!
santé! :)
Edit: Si vous avez un Riche Éditeur de Texte basé sur l'iframe méthode et non pas le div méthode et souhaitez élargir chaque nouvelle ligne, ce code va faire le nécessaire.
Voici une solution simple qui fonctionne sur chaque navigateur et avec des domaines croisés:
tout d'abord, cela fonctionne sur le concept que si la page html contenant l'iframe est réglée à une hauteur de 100% et l'iframe est coiffé en utilisant css pour avoir une hauteur de 100%, puis css Taille automatiquement tout pour s'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>
Ce solution qui a le mieux fonctionné pour moi. Il utilise jQuery et de l'iframe ".charge" de l'événement.
dans IE 5.5+, vous pouvez utiliser la propriété contentWindow:
iframe.height = iframe.contentWindow.document.scrollHeight;
Dans Netscape 6 (en supposant que firefox), contentDocument la propriété:
iframe.height = iframe.contentDocument.scrollHeight
j'ai trouvé la solution par @ShripadK très utile, mais il ne travailler, s'il y a plus d'un iframe. Mon fix 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)la hauteur de chaque image à la même valeur, à savoir la hauteur du contenu de la première image. J'utilise doncheight()de jquery avec une fonction au lieu d'une valeur. De cette façon, la personne les hauteurs sont calculées -
+ 20est un hack pour contourner iframe barre de défilement problèmes. Le nombre doit être plus grand que la taille d'une barre de défilement. Le hack peut probablement être évitée, mais désactiver les barres de défilement pour l'iframe. - j'utilise
setTimeoutau lieu desetInterval(..., 1)pour réduire la charge CPU dans mon cas
Oli a une solution qui marchera pour moi. Pour mémoire, la page dans mon iFrame est rendue par javascript, donc je vais avoir besoin d'un délai infinitésimal avant de rapporter les offsethight. Il ressemble à quelque chose dans ce sens:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
en fait-le code de Patrick a fonctionné pour moi aussi. La façon correcte de le faire serait dans le sens de ceci:
Note: il y a un peu de jquery devant nous:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
c'est la méthode la plus facile que j'ai trouvée en utilisant le 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>
du contenu.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.
ma solution consiste à définir l'iframe Hauteur/Largeur bien au-dessus de la taille prévue de la page source dans CSS et la propriété background à transparent .
dans la série iframe allow-transparency à true et scrolling à no .
la seule chose visible sera n'importe quel fichier source que vous utilisez. Il fonctionne en IE8, Firefox 3, & Safari.
Ma solution, (à l'aide de 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>