Por exemplo:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Quero que ele possa ajustar a sua altura de acordo com o conteúdo dentro dele, sem usar o scroll.
Adicione isto à sua secção <head>
:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
E muda o teu iframe para isto:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Como encontrado em sitepoint discussion.
A sugestão de hjpotter92 não funciona em safari! Eu fiz um pequeno ajuste no script, agora ele também funciona no Safari.
A única alteração feita é redefinir a altura para 0 em cada carga, a fim de permitir que alguns navegadores diminuam a altura.
Adicione isto à tag <head>
:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
E adicione o seguinte atributo 'onload' ao seu iframe, como
<iframe onload='resizeIframe(this)'></iframe>
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";
}
adiciona isto ao teu iframe: onload="autoResize('youriframeid')"