FrontEnd Developer RoadMap – HTML 5 Tutorial 47 IFrame Etiketi

Merhabalar, bu yazımda sitemizin içinde farklı siteleri gösterebilmek için kullandığımız Iframe etiketine bakıyor olacağız.

Hemen başlayalım.

En basit IFrame aşağıdaki gibi yaratılır.

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

src attribute’u sitenin linkini alır.

Görüntüsü aşağıdaki gibi olacaktır.

IFrame alanına bir genişlik ve yükseklik vererek boyutlandırabiliriz. IFrame bir inline etikettir. o yüzden bulunduğu satırda alt satıra geçmek istersek daha önceden öğrendiğimiz yolları uygulamamız gerekir.

<iframe src="https://industryolog.com"></iframe> <br><br>
 
<iframe src="https://industryolog.com" width="400px" height="400px"></iframe>

IFrame’in varsayılan kenarlığını kaldırmak için frameborder attribute’u kullanılır.

Ya da style yardımıyla CSS kodlarına müdahale ederek yapabiliriz. Border özelliğini none yapmak yeterli olacaktır.

 <iframe src="https://industryolog.com"></iframe> <br><br>
 
    <iframe src="https://industryolog.com" width="400px" height="400px"></iframe> <br><br>
 
    <iframe src="https://industryolog.com" frameborder="0"></iframe> <br><br>
 
    <iframe src="https://industryolog.com" style="border: none;"></iframe> <br><br> 

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

 <iframe src="https://industryolog.com" style="border: none;" scrolling="no"></iframe> <br><br>

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

<a href="https://industryolog.com" target="frame_adi">Industryolog'u Aç</a>
    
    <iframe name="frame_adi"></iframe>

Bir sonraki yazımda görüşmek üzere.