HTML Iframes

YouTube dersi barındırılan bir oynatıcı için ünlü bir iframe tarifi kullandı. Bu oturum genel fikre döner: bir satır içi çerçeve sayfanızda dikdörtgen içinde başka bir HTML belgesi gösterir — haritalar, belgeler, paneller, yardım widget’ları veya kendinizin yazdığı küçük yerel sayfa. Video barındırıcılarıyla sınırlı değilsiniz. Kendi URL’si, kaydırma bölgesi ve (çoğu zaman) betikleri olan iç içe bir gezinme bağlamını çerçevelersiniz. YouTube’u aynı öğenin özel durumu sayın, iframe’lerin tek nedeni değil.

iframe ne yapar

iframe tarayıcıdan ikinci bir belge yüklemesini ve üst sayfada ayrılmış alana çizmesini ister. Ziyaretçi başlıklarınızı ve gezinmeyi çerçevenin çevresinde hâlâ görür ama içteki tıklamalar, kaydırma, formlar ve betikler genelde iç içe sayfaya aittir. Sıfırdan yeniden yapmadığınız demolar ve araçlar için güçlüdür — ve bir başlangıç sayfasına çok fazla ağır üçüncü taraf çerçeve yığarsanız pahalıdır. Yazdığınız üst belgeyi çerçevenin yüklediği alt belgeden zihnen ayırın.

Doğrudan yanıt

<iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe> kullanın. src iç içe sayfa URL’sidir (uzak veya göreli yerel dosya). title çerçeveyi erişilebilirlik için adlandırır. Genişlik ve yükseklik yerleşim yeri ayırır. Her site gömmeye izin vermez; birçoğu çerçevelenmeyi reddeder. Tam gömme gerekmiyorsa normal bağlantı çoğu zaman daha net, hafif ve hata ayıklaması kolaydır.

Gömmek mi yoksa yalnızca bağlamak mı?

Basit uzak önizleme

Basit bir kalıp gömmeye izin veren (veya vermezse dürüstçe başarısız olan) genel bir sayfa yükler. Her zaman anlamlı title koyun.

Temel örneği okumak

• src iç içe belgenin URL’sini gösterir
• title çerçevenin erişilebilirlik adıdır — süs değil zorunlu alışkanlık
• width ve height yer ayırır ki çevre metin zıplamasın
• Çerçeve boş kalırsa hedef gömmeyi engelliyor olabilir; çoğu zaman politika, bozuk etiket değil
• YouTube gömmeleri Share → Embed’den embed URL’li aynı öğenin özel kullanımıdır
• Boş çerçeveler erken öğretir: kontrolünüz diğer sitenin kurallarının başladığı yerde biter

Yerel çocuk sayfayla alıştırma

Güvenilir alıştırma için üst sayfanın yanına küçük bir child.html koyup çerçeveleyin. Her iki tarafı da siz kontrol edersiniz; yabancı site engellemez. Üçüncü taraf gömmeleri kovalamadan önce öğeyi öğrenmenin en güvenli yolu budur.

Yerel örneği okumak

• Göreli src="child.html" üstün yanındaki dosyayı yükler (görseller/betiklerle aynı yol kuralları)
• child.html içine kısa başlık ve paragraf koyun ki içerik görünsün
• Çocuk metnini değiştirin, üstü yenileyin, çerçevenin güncellendiğini doğrulayın
• Bu kalıp üçüncü taraf izin listelerine bağlı kalmadan öğeyi öğretir

YouTube gömmeleri vs genel iframe’ler

YouTube’un Share → Embed diyaloğu oynatıcıları için doğru embed URL ile iframe doldurmanın yönlendirmeli yoludur. Genel iframe’ler aynı öğeyi izin verilen her URL için kullanır: belge görüntüleyiciler, haritalar, kendi yardımcı sayfalarınız ve daha fazlası. YouTube alışkanlıklarını (title, makul boyut, gerektiğinde resmi embed URL) koruyun ve bu oturumun daha geniş yargısını ekleyin: yalnızca yerinde etkileşim önemliyse gömün, değilse normal bağlantıya dönün.

Yeni başlayan düzeyinde güvenlik ve performans

Her iframe yüklenecek başka bir belge, daha fazla kaydırma tuhaflığı ve üçüncü taraf betiklerin çalışabileceği başka bir yer ekler. sandbox gibi ileri öznitelikler iç içe sayfaların yapabileceklerini sıkılaştırabilir — gömmeyi ve başlığı güvenle öğrendikten sonra sonraki konu. Şimdilik üç kural: her paragrafın üstüne ağır iframe yığınları koymayın; dışarı çıkmak yetiyorsa bağlantıyı tercih edin; hedef yalnızca çerçevelemeyi reddettiğinde boş çerçevenin bozuk HTML anlamına geldiğini sanmayın.

Erişilebilirlik alışkanlıkları

Her iframe’i iç içe içeriği anlatan net bir title ile adlandırın («Kurs haritası», «Yerel alıştırma sayfası»), «frame1» veya boş değil. Gömüyü kısa bir cümleyle tanıtın. İç içe sayfa temel öğrenme malzemesiyse tam sayfa için normal bağlantı da sunun. Çerçevelerde erişilebilirlik adlandırma ve bağlamdır; üst ile çocuğun tek belge olduğunu iddia etmek değil.

Düzenleyicide alıştırma

1. Başlık ve bir alıştırma paragrafıyla child.html oluşturun.
2. Üst sayfada iframe, net title ve ılımlı boyutla gömün.
3. Üstü yerel açın ve dikdörtgen içinde çocuk içeriğini doğrulayın.
4. İsteğe bağlı uzak URL deneyin; boş kalırsa yerel çocuğa dönün — neden çoğu zaman politikadır.
5. Aynı çocuk URL’sine normal bağlantı ekleyip çerçeveli sürümle karşılaştırın.
6. Çerçevenin üstüne ziyaretçinin ne göreceğini yazın ve title’ın buna uyduğunu yeniden kontrol edin.

Kolay hatalar

• iframe’de eksik title
• Her dış sitenin çerçevenizde yükleneceğini sanmak
• Bir sayfada çok sayıda ağır iframe iç içe koymak
• «Paragrafta URL bağladım» ile «çerçeve gömdüm»ü karıştırmak
• Engellenmiş uzak gömmeyi bozuk src yolu sanmak
• YouTube gömmesinin tüm öğe değil yalnızca bir iframe tarifi olduğunu unutmak

Özet

• iframe src ile başka bir sayfayı gömer
• Her zaman net bir title ekleyin
• Hedef site gömmeyi engelleyebilir
• Yerinde etkileşim gerekmiyorsa normal bağlantıyı tercih edin
• Üçüncü taraf sayfalara güvenmeden önce yerel child.html ile güvenle alıştırma yapın