Например:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Искам да може да регулира височината си в зависимост от съдържанието в него, без да използва скрол.
Добавете това в раздела <head>
:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
И променете вашия iframe на това:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Както е намерено в sitepoint discussion.
Предложението на hjpotter92 не работи в Safari! Направих малка корекция в скрипта, така че сега работи и в Safari.
Единствената направена промяна е нулиране на височината на 0 при всяко зареждане, за да се даде възможност на някои браузъри да намалят височината.
Добавете това в тага <head>
:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
И добавете следния атрибут onload
към вашия iframe, както следва
<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";
}
добавете това към вашия iframe: onload="autoResize('youriframeid')"