Bijvoorbeeld:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Ik wil dat het de hoogte kan aanpassen aan de inhoud, zonder scroll te gebruiken.
Voeg dit toe aan je <head>
sectie:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
En verander je iframe naar dit:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Zoals gevonden op sitepoint discussie.
De suggestie van hjpotter92 werkt niet in safari! Ik heb een kleine aanpassing gemaakt in het script zodat het nu ook in Safari werkt.
De enige wijziging is dat de hoogte bij elke laadbeurt op 0 wordt gezet, zodat sommige browsers de hoogte kunnen verlagen.
Voeg dit toe aan <head>
tag:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
En voeg het volgende onload
attribuut toe aan je iframe, zoals dit
<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";
}
voeg dit toe aan je iframe: onload="autoResize('youriframeid')"