IFrame ‘in yüksekliğini içeriğe göre ayarlamak

Enes Pekkaya    Html, Javascript     Css, Html, Javascript

Belki bir çoğumuzun iframe kullanmak istemediğimizin en büyük sebebidir. Çünkü yükseklik yüzünden ya scrolling çıkmakta ki bu tasarımsal olarak çok kötü gürünmekte yada genişliği yüksek tuttuğumuzda ise aşağıya doğru baya bir boşluk olmakta. 🙂 Aşağıdaki kod parçası ile birlikte bu sorunu kökünden çözeceğiz. Üstelik bütün browserlar bu javascripti desteklemekte.

Neyse gelelim çözümümüze;

<script type="text/javascript">

function sizeFrame(frameId)
{
var F = document.getElementById(frameId);
if(F.contentDocument)
{
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else
{
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}

</script>

<iframe width="100%" id="myFrame" src="anasayfa.html" scrolling="no" frameborder="0" onload="sizeFrame(myFrame);">

Yukarıdaki işlemde ne yaptığı aslında çok açık. IFrame’in onload eventine sizeFrame fonksiyonunu çağırarak içeriğin yüksekliğine göre iframin yüksekliğini set etmekte.

Herkese iyi sorunsuz iframler 🙂

Alıntı yapılan siteye gitmek için tıklayınız.