HTML'de Iframe Kullanımı

Iframe'ler web sayfalarında başka web sayfalarını gömüp göstermek için kullanılırlar. Nasıl göründüklerine aşağıdan bakabilirsiniz;

Gördüğünüz gibi prototurk.com'u bu sayfaya iframe yardımı ile gömerek açtım. Bunu tabi her web sayfası için yapamıyoruz çünkü çoğu web sayfası iframe ile görüntülenmeyi engelliyor, bunu yazının sonunda nasıl yapıldığını gösteririm. Şimdi bir iframe nasıl oluşturuluyor kodlarını inceleyelim;

<iframe src="https://prototurk.com"></iframe>

Iframe etiketide nitelikleri olmadan pek bir şey ifade etmez. Burada src niteliği ile çerçeve içerisinde gösterilecek sayfanın yolunu belirledik.

Iframe'de width ve height Nitelikleri

Çerçevenin genişlik ve yüksekliğini belirlemek için width ve height nitelikleri kullanılır. Sayfanın başındaki iframe örneğini yapmak istersek;

<iframe src="https://prototurk.com" width="380" height="480"></iframe>

Değerler yine px cinsinden verilmektedir. Ancak yüzdeli şekilde de kabul görür. Yani width="100%" işe yarayacaktır.

Iframe'de Varsayılan Kenarlığı Kaldırmak

Iframe'ler varsayılan olarak bir kenarlık çizgisiyle birlikte gelmektedir. Bunu kaldırmak içinse frameborder="0" eklenmesi yeterli olacaktır.

<iframe src="https://prototurk.com" frameborder="0">

Bunu ayrıca CSS ilede düzenlemek mümkün örnek vermek gerekirse;

<iframe src="https://prototurk.com" style="border: none;"></iframe>

Iframe Scrollunu Kapatmak

Iframe içerisinde yüklediğiniz içeriğin kaydırılmasını engellemek için scrolling niteliğine no değeri verebilirsiniz.

<iframe name="frame_adi" src="https://prototurk.com" scrolling="no"></iframe>

Aşağıdaki örnekte scroll işlemi geçersiz kılındı.

Hedef Bağlantının Iframe İçerisinde Gösterilmesi

<a> etiketine tıklandığında iframe içerisinde sayfanın açılmasını istersek şu şekilde bir kullanım yoluna gitmeliyiz;

<a href="https://prototurk.com" target="frame_adi">Prototürk'ü aç</a>
    
<iframe name="frame_adi"></iframe>

Burada önemli olan <a> etiketinde target="frame_adi" kısmı ile <iframe> etiketinde name="frame_adi" kısmının eşit olması. Çünkü <a> etiketinde hedefi target niteliği ile belirtiyoruz. Yani tıklanınca açılacak framei seçiyoruz.

Web Sayfanızın Iframe ile Açılmasını Engellemek

Şimdiden söylüyorum bunu yapabilmek için farklı teknolojiler kullanmak gerekiyor. Ben size Javascript ile yapılan örneğini paylaşacağım. Öncelikle kodlarımız aşağıdaki gibi;

<script>
if (self != top) {
	top.location.replace(location.href);
}
</script>

Burada yeni olan <script> etiketi, buda HTML sayfalar içerisinde Javascript kodu yazmamızı sağlıyor. Javascript ne abi demeyin, onlara ilerleyen derslerde geleceğiz. Bir gün lazım olursa böyle bir şey gelir buradan alırsınız kodunu :)