iframe Öğesi: src ve sandbox

<iframe> öğesi, başka bir HTML belgesini geçerli sayfanın içine gömer. Her gömülü çerçevenin kendi tarama bağlamı, DOM'u ve JavaScript kapsamı vardır. Gömülü çerçevenin içeriği, açık izin olmadan üst sayfanın DOM'una erişemez.

Gömülecek URL'yi kaynak özniteliğine ayarlayın: <iframe src="https://example.com" width="800" height="600">. Gömülü çerçeve yeni bir tarama bağlamı oluşturur. Erişilebilirlik için title özniteliği gereklidir: title="Embedded map".

sandbox, gömülü çerçeve içeriğine kısıtlamalar uygular; varsayılan olarak betikleri, formları, açılır pencereleri ve eklentileri devre dışı bırakır. Yetenekleri geri yüklemek için belirli izinler ekleyin: sandbox="allow-scripts allow-same-origin".

Betiklere izin verme seçeneği JavaScript'i etkinleştirir. Aynı kaynak izni, gömülü çerçevenin aynı kaynaktan geliyormuş gibi değerlendirilmesini sağlar ve localStorage erişimi için gereklidir. Form izni, form gönderimini etkinleştirir. Açılır pencere izni, window.open() kullanımına izin verir. Yalnızca gereken en az izinleri verin.

Kaynaklar arası gömülü çerçeveler üst DOM'a erişemez; parent.document bir güvenlik hatası üretir. Kaynaklar arası çerçeveler arasındaki iletişim postMessage kullanır: iframe.contentWindow.postMessage(data, origin).

Üst sayfadan gömülü çerçeveye iletileri şu şekilde gönderin: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Gömülü çerçevede şu şekilde dinleyin: window.addEventListener("message", handler). İşlemeden önce event.origin değerini her zaman doğrulayın.

Gömülü çerçevelerde loading="lazy" kullanmak, çerçeve görünüm alanına yaklaşana kadar yüklemeyi erteler ve ilk sayfa yükünü azaltır. Ekranın altındaki haritalar, video gömmeleri ve hemen görünür olmayan sosyal medya bileşenleri için kullanışlıdır.

Her iframe ayrı bir HTML belgesi, CSS, JavaScript ve kaynak yükler; bu da önemli bir kaynak maliyeti oluşturur. Parçacık olarak gömülebilecek içerikler için iframe kullanmaktan kaçının. Ekranın alt kısmında kalan iframe'leri gecikmeli yükleyin. Cephe desenlerini değerlendirin (yer tutucu gösterip tıklama sırasında yükleme yapın).

Iframe kaydırma davranışını denetleyin: scrolling="no" kaydırma çubuklarını devre dışı bırakır (kullanımdan kaldırılmıştır; iframe üzerinde CSS overflow: hidden kullanın). Modern yaklaşım, iframe yüksekliğini içerik yüksekliğiyle eşleştirerek dahili kaydırma çubuklarına duyulan ihtiyacı ortadan kaldırmaktır.

allow özniteliği, iframe'e İzinler Politikası özellikleri verir: allow="camera; microphone; fullscreen". Bu, üst kaynağın bu özellikleri kullanmadığı durumlarda bile iframe'in kamera erişimi, mikrofon erişimi ve tam ekran API'si istemesine olanak tanır.

YouTube ve Google Haritalar, iframe yerleştirme kodları sağlar. Bu kodlarda tam ekran ve otomatik oynatma için allow öznitelikleri bulunur. Ekran okuyucu erişilebilirliği için her zaman title="Video title" ekleyin. sandbox özniteliği genellikle üçüncü taraf yerleştirme kodlarına eklenmez; güvenlik yönergeleri için belgelerini inceleyin.

Hiçbir değer belirtilmediğinde sandbox özniteliği varsayılan olarak iframe'e ne yapar?

iframe'ler, harici belgeleri yalıtılmış tarama bağlamlarına gömer. sandbox özniteliği iframe yeteneklerini kısıtlar; yalnızca gereken en düşük izinleri verin. postMessage, kaynaklar arası güvenli iletişim sağlar. Gecikmeli yükleme, ekranın alt kısmında kalan iframe'ler için kaynak maliyetini erteler. allow özniteliği, güvenilir üçüncü taraf yerleştirmelerine İzinler Politikası özellikleri verir.