Ana Sayfa»Genel»Yüksekliği Dinamik Değişen iframe Çözümü (X-Browser)

Önizleme:

_____________________

_____________________

İndir:

Uzun uğraşlar sonucu dinamik yüksekliğe sahip iframe nasıl yapılır, araştırmalarım sonucu çözüme kavuşturdum. Kaynağı vermek isterdim ancak kod hataları ile dolu, dolayısıyla daha basit, Türkçe anlatım yapmak istedim. Gelin bu yazıda dinamik yükseklikli iframe nasıl yapılıyormuş bakalım…

Örnek iframe kodlarımız:

(iframemiz.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0} 
.Btn{float:left;margin-left:10px}
.Icerik{line-height:20px;}
</style>
</head>
<body>
<div class="Tumu">
<div style="clear:both;height:10px"></div>
<input class="Btn1 Btn" value="Buton1" type="button">
<input class="Btn2 Btn" value="Buton2" type="button">
<div style="clear:both;margin-top:10px"></div>
<div class="Icerik1 Icerik">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</div>
<div class="Icerik2 Icerik">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.</div>
<div style="clear:both"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var sendHeight=function(){height=$(".Tumu").height();window.parent.postMessage({height:height},"*");};
$(document).ready(function(){
$(".Icerik2").hide();
sendHeight();
$(".Btn1").on("click",function(){ 
$(".Icerik2").hide();
$(".Icerik1").show();
sendHeight();
});
$(".Btn2").on("click",function(){
$(".Icerik1").hide();
$(".Icerik2").show();
sendHeight();
});
});
$(window).resize(function(){
sendHeight();
});
</script>
</body>
</html>

Bu sayfada ne yaptık? 2 adet input ve 2 adet yazı içeren div tanımladık. 1. buton 1. yazıyı, 2. buton 2. yazıyı açıyor. Script’imizdeki ilk satıra dikkat. O satır iframe sayfasına eklenmelidir. Daha sonra yaptığımız her yükseklik değişimi için sendHeight(); function’undan yararlanıyoruz. Örnek olarak ben burada tıklama function’larını gösterdim.

iframe kodunu eklediğimiz sayfaya body kapanışından önce şunları yazıyoruz:

(Aynı sitede herhangi bir isimde sayfa açın. Dosya yolunu doğru belirttiğinizden emin olun. Aynı klasöre index.html açtık diyelim.)

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

<iframe id="iframem" src="iframemiz.html" scrolling="no" frameborder="0" style="width:100%">Tarayıcınız iframe desteklemiyor.</iframe>
<script type="text/javascript">
  window.addEventListener("message",function(event){if(height=event.data.height){console.log(height);$("#iframem").css("height",height+"px");}});
</script>

Şimdi 2 ayrı dosyamız oldu. index.html’ye girdiğimizde iframemiz.html açılıyor ve butonlara tıkladığımızda 2 ayrı yükseklik değeri kazanıyor. Demek ki dinamik yüksekliği olan iframe işini çözdük. 🙂 İyi kodlamalar…

Bunlar İlginizi Çekebilir
 40
Dnm2
 •  2 hafta Önce
 73
aaaaa
 •  2 hafta Önce
Bu İçeriğe Tepkiniz Nedir?
😡
0
Sinirlendim
😥
0
Üzüldüm
👎
0
Beğenmedim
👍
3
Beğendim
😆
0
Çok Güldüm
😱
0
Şaşırdım
Yorumlar
İlk Yorum Yapan Siz Olun!
Kategori Seçiniz
Genel
 73
aaaaa
 • 
2 hafta Önce
 47
Dnm3
 • 
2 hafta Önce
 40
Dnm2
 • 
2 hafta Önce
 21
dnm
 • 
2 hafta Önce
Kategori Seçiniz
Genel
Genel
aaaaa
 •  2 hafta Önce
GaleriyeGitaaaaaaaa
 Yorum Yok  •   73
Dnm3
 •  2 hafta Önce
Dnm2
 •  2 hafta Önce
dnm
 •  2 hafta Önce