For eksempel:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Jeg vil at den skal kunne justere høyden i henhold til innholdet i den, uten å bruke scroll.
Legg dette til i avsnittet "head":
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Og endre iframen til dette:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Som funnet på sitepoint discussion.
Forslaget fra hjpotter92 fungerer ikke i safari! Jeg har gjort en liten justering av skriptet slik at det nå også fungerer i Safari.
Den eneste endringen som er gjort er å tilbakestille høyden til 0 ved hver innlasting for å gjøre det mulig for noen nettlesere å redusere høyden.
Legg til dette i taggen <head>
:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Og legg til følgende onload
-attributt i iframen din, på denne måten
<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";
}
legg til dette i iframen din: onload="autoResize('youriframeid')"