<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="https://www.youtube.com/embed/0mr0nUpdyWU" frameborder="0" allowfullscreen></iframe> |
Çıktı:
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)
| Attribute | Değer | Tanım |
|---|---|---|
| align | left right top middle bottom |
HTML5 Desteği yok |
| frameborder | 1 0 |
HTML5 Desteği yok |
| height | pixels | <iframe> yüksekliğini belirtir |
| longdesc | URL | HTML5 Desteği yok |
| marginheight | pixels | HTML5 Desteği yok |
| marginwidth | pixels | HTML5 Desteği yok |
| name | text | <iframe> ismini belirtir. |
| sandbox | allow-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 |
| scrolling | yes no auto |
HTML5 Desteği yok |
| src | URL | <iframe> içine gömülecek belgenin adresini belirtir. |
| srcdoc | HTML_code | <iframe> ‘de gösterilecek sayfanın HTML içeriğini belirtir. |
| width | pixels | Bir <iframe> genişliğini belirtir |
