Firmanızın kimliğine uygun web tasarım ve içeriklerle rakiplerinizden bir adım önde olabilirsiniz. Web tasarım paketlerimizi inceleyin.
Web Tasarım Yazar: Gardentr Web

 

Iframe Nasıl Oluşturulur?

Iframe Nedir? Ne İşe Yarar?

<iframe> etiketi verilen bir linkin başka sayfa içerisinde değil, aynı sayfadaki bir satır içerisinde pencere açılmasını sağlar. Dolayısıyla tıklama anında sayfa tekrar yüklenmez, sayfa belirlenen satıra çağırılır.

İframe Kullanımı
Pencerenin, sayfanızın hangi kısmında görünmesini istiyorsanız aşağıdaki kodları <body> taginden sonra yerleştiriniz.

Linkiniz şu şekilde olmalıdır;

<a href="tanitim.html" target="gardentr">İçerikler </a>

Linkimizin açılacağı yeri belirleyelim;


Sayfa bir scroll bar içerisinde çağırılır.

 <iframe src="cagirilan-sayfa.html" id="gardentr" scrolling="auto" frameborder="0"></iframe>

Sayfa genişliği 400pixel, yüksekliği 300 pixel olan bir pencerede gözükür.
 
<iframe src="cagirilan-sayfa.html" id="gardentr" scrolling="auto" width="400px" height="300px"  frameborder="0"></iframe>

Sayfada scrollbar kaydırma çubuğu istenmiyorsa ;

<iframe src="cagirilan-sayfa.html" id="gardentr" scrolling="no" width="400px" height="300px"  frameborder="0"></iframe>

Sayfanın yüzde yüz boyutlarla çıkması isteniyorsa, yani hiç bir yükseklik genişlik değeri vermeden orjinal boyutlarıyla görüntülenmesini istiyorsanız iki aşamamız var; %100 yükseklik ve %100 genişlik için;

1. Aşamada </head> taginden önce aşağıdaki kodu kopyalayıp, yapıştırın;

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type='text/javascript'>          $(function(){              var iFrames = $('iframe');            	function iResize() {     	     		for (var i = 0, j = iFrames.length; i < j; i++) {     		  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}     	    }     	             	if ($.browser.safari || $.browser.opera) {          	         	   iFrames.load(function(){         	       setTimeout(iResize, 0);                });                      	   for (var i = 0, j = iFrames.length; i < j; i++) {         			var iSource = iFrames[i].src;         			iFrames[i].src = '';         			iFrames[i].src = iSource;                }                         	} else {         	   iFrames.load(function() {          	       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';         	   });         	}                  });  </script>

Sayfayı çağırma linkimiz değişmiyor;

<iframe name="cagirilan-sayfa.html" id="gardentr" scrolling="no" width="100%" height="100%" frameborder="0">
</iframe>