HTML iframe Kullanımı

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0

<iframe> HTML Etiketi ne işe yarar?​

<iframe>, bağımsız bir HTML belgesini geçerli belgeye yerleştiren bir satır içi çerçeve oluşturur.


Örnek Kod:


1
2
3

<iframe width="560" height="315" src="
" frameborder="0" allowfullscreen></iframe>

Güçlü, ancak kötüye kullanımı kolaydır​

Web sitesi tasarımının eski günlerinde, etrafta sarkan ve herkesin gününü mahvedecek birçok <frame> öğesi vardı. Neredeyse her zaman tasarıma kötü bir yaklaşımdı. Neyse ki, <frame> öğesi HTML5’te kullanımdan kaldırıldı, ancak <iframe> veya “satır içi çerçeve” hala kullanılabilir durumda. Aynı zamanda itiraz edilmeli miydi? Sadece bundan kaçınmak en iyisi midir? Bu elemanın bizim için bazı geçerli kullanım alanları var olması mı kaldırılmasını engelledi bilmiyorum, ancak yaygın olan bazı tuzaklardan kaçınmak için ne olduğunu ve nasıl çalıştığını gerçekten anlamalısınız.

<iframe> ve <frame> birbirine benzerlikleri ve farklılıkları​

Her iki öğe de bağımsız bir HTML belgesini temsil eder. Belgenin içeriği, her bir öğenin src niteliğinde referanslıdır, bu nedenle aslında geçerli belgeden referans alınan tamamen bağımsız bir kaynaktır.

<iframe> ve <frame> arasındaki temel fark, <iframe> içeriği, geçerli belgenin bir parçası olan bir öğenin içinde görüntülenir. Örneğin, bu gömülü YouTube videosunu göz önünde bulundurun:




Video, başka bir yerdeki ayrı bir panelde değil, sayfada açıkça görüntüleniyor. <frame> öğesi bu paradigmayı bozar ve belgenin tarayıcı penceresi üzerinde kontrolü ele geçirmesini sağlar ve her biri farklı bir belge görüntüleyen birkaç küçük panele (çerçeve) ayırır. (Çok kötüydü.) <frames> ve <iframe>> arasındaki diğer tüm farklar bu temel farktan kaynaklanıyor.

<frame> kullanımını burada gösteremiyorum fakat özetle bir sayfa içinde bir birinden bağımsız (kısmen) sayfalar topluluğu olarak düşünebilirsiniz.

<iframe> için iyi (ve korkunç) kullanımlar​

<iframe> için bazı meşru kullanımlar vardır ve 1990’lardaki korkunç tasarım modellerini taklit etmek bunlardan biri değildir.

Doğru kullanım şekillerinden bazıları:

  • Üçüncü taraf medyayı yerleştirme
  • Kendi medyanızı bir belgeye özgü şekilde gömme
  • Gömme kod örnekleri (bunu sitede yapıyoruz)
  • Üçüncü taraf “uygulamaları” ödeme şekilleri gibi yerleştirmek
Ve <iframe> için bazı korkunç kullanımlar:

  • Fotoğraf Galerisi
  • Forum

Temel olarak​

Bağımsız bir HTML belgesini mevcut belgeye gömmeniz gerekirse, bir <iframe> kullanın. Hepsini sıfırdan oluşturuyorsanız, özellikle aslında bağımsız içerik parçaları değilse, sayfa tasarımını birkaç bağımsız belgeye bölmek için hiçbir neden yoktur.



<IFRAME> içinde kullanılan nitelikler(Attributes)

AttributeDeğerTanım
alignleft
right
top
middle
bottom
HTML5 Desteği yok
frameborder1
0
HTML5 Desteği yok
heightpixels<iframe> yüksekliğini belirtir
longdescURLHTML5 Desteği yok
marginheightpixelsHTML5 Desteği yok
marginwidthpixelsHTML5 Desteği yok
nametext<iframe> ismini belirtir.
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Bir <iframe> içindeki içerik için ekstra bir kısıtlama kümesi sağlar
scrollingyes
no
auto
HTML5 Desteği yok
srcURL<iframe> içine gömülecek belgenin adresini belirtir.
srcdocHTML_code<iframe> ‘de gösterilecek sayfanın HTML içeriğini belirtir.
widthpixelsBir <iframe> genişliğini belirtir
 
Üst Alt