WEB API
iFrame Nedir ? Nerelerde Kullanılır ?
iFrame Nedir, Problemli ve avantajlı yanları, iFrame daha etkin kullanabilmek için Web API kısmından nasıl faydalanabiliriz.
iFrame bir HTML içerisinde başka Web sayfasındaki herhangi bir kaynağı kullanmak ve render ederek göstermek istediğiniz zaman kullanabileceğimiz iç çerçevelerdir.
1. iFrame Ne İşimize Yarar
Birbirine Yakın İçerik ve İşlevlerin Yan Yana Gösterilmesi
Örneğin sitenize başka bir bir sitenin güçlü özelliğini veya farklı bir yeteneğini eklemek istiyorsunuz. Örneğin Video oynatma(youtube), Mesajlaşma(discord), Harita İşleri(map), Veri(Wikipedia) Yorum Bırakma ve benzeri bir çok servis bulunuyor
Bu içerikleri yan yana bir link olarak eklediğiniz durumda kullanıcı linke basıp diğer sayfaya gidecek bu kullanıcı istediğiniz içerik ve yeteneklere odaklayamamak anlamına geliyor.
Bunun yerine yapmak istediğimiz kendi sitemizin içerisine bu içerikleri embed edebilmek
Bunu yapmak için web sayfamızda aşağıdaki şekilde iFrame tanımlamamız yeterli olacaktır.
<iframe src="https://www.youtube.com/content"></iframe>
<iframe src="https://www.discord.com/content"></iframe>
<iframe src="https://www.wikipedia.com/content"></iframe>
Ancak iFrame’ leri dikkatli kullanmak çok önemlidir. Bazı web siteleri iFrame’ leri kötü amaçlı içerik veya kimlik bilgileri görüntülemek için kullanabilir, bu nedenle bunları güvenilir kaynaklardan kullandığınızdan emin olun.
Giriş formları veya business işlem süreçlerinde iFrame kullanmaktan kaçınmak faydalı olabilir.
Micro frontend Uygulama Geliştirme İçin Composition altyapısı olarak Kullanılıyor.
Bu konuda daha önceden aşağıdaki yazının
Container/Layout içerisinde Micro Frontends Birleştirme Yöntemleri konusuna değinmiştim.
(C. Run-time Integration via iFrames) bu konuya değinmiştim. Özellike E-Ticaret ve büyük sistemlerde Micro frontend yöntemi kullanılıyor ise bu aşamada iFrame faydalanılıyor.
Burada bir E-Ticaret veya bir Digital Eğlence Platformunu düşünürsek ekiplerin uzmanlaştığı alanlar var ve bu alanları birbirinden tamamen soyutlamak için
tüm parçalar ayrı ekipler tarafından oluşturulur. Aşağıda bu ürünün bölünmüş halini görebilirsiniz.
Aslında yapılan tüm bu parçaların iFrame içerisinde tasarlanıp bilinçli olarak yönetilmesinden ibarettir.
Legacy Code(Mevcut Çalışan Kod) Entegrasyonlarında Kullanılır.
İşletmelerin birbirlerinden habersiz geliştirdikleri veya başka teknolojiler ile aynı şirketin geliştirdiği ürünler olsun bu ürünlerin beraber çalışması gereken durumlarda kodun tekrar yazılmaması ve hızlı entegrasyon için iFrame yöntemi tercih edilebilir.
Örneğin bir Mobil Uygulama Geliştiriyorsunuz .. Tüm uygulamaları yaptınız fakat bankacılık Ödeme Sistemi ile 3D Secure entegre etmek istiyorsunuz . Bu kısmı yazmanız ve testleri geçmesi aylar alacak bu durumda hazır kodu sisteminize eklemek için düşüneceğiniz ilk şey iFrame’ dir.
2. iFrame Eklenince Ne Oluyor ?
Normal bir Web sayfası düşünün.
Tarayıcıda Developer(Geliştirici) Console açıp window yazdığınızda yeterlidir. Bu tarayıcı penceresi içerisindeki window objesini görebilirsiniz.
Bütün işlemleri bu window içerisinde işletir. Ve size Browser API ve WebAPI enjekte edilmiş bir yapı üzerinden hizmet verir.
Bu window nesnesi size içerisinde bulunan navigator, history, screen, location , console ve document (DOM)objeleri üzerinden tarayıcıyı kullanabilmenizi sağlar. Bunun yanında window alert, popup, timing ve bir çok fonksiyonu barındırır.
Bu yapının içerisine iFrame eklemek istediğinizde
window.document içerisinde iframe tag içerisinde başka web sitelerinden içerikleri ekleyebilirsiniz.
<iframe src=”https://www.onurdayibasi.com/"></iframe>
Bu durumda DOM içerisinde bunlar ek bir document olacak şekilde iframe elemanın içerisinde tekrar bir html olacak şekilde render edilir. Aynı zamanda window.frameElements, window.frames içerisinde bu frame yönetilmesini sağlayacak yapıyı oluşturur. Bu sayede aşağıdaki şekilde DOM iç içe document modelini desteklemiş olur.
→ window
→ document
→ iframe
→ document
→ iframe
→ document
Burada unutulmaması gereken şey iFrame yapısında koşan tüm bellek, rendering vb.. işlerin birbirinden soyutlanmış(isolated) olmasıdır. Bu güvenlik açısından oldukça önemlidir.
Buradaki soyutlama size birçok güvenlik açığına göre korur. Bu isolation HTML standartlarına göre tarayıcıların uyguladığı altyapıdır. Bu konuyu Chrome, İşletim Sistemi ve Donanımı Nasıl Kullanıyor — 2 ? blog yazısında anlatmıştım.
3. iFrame İle İlgili Problemler
Yukarıda iFrame faydalarından bahsettik fakat bazı problemleride beraberinde getirir. Bu bileşenler güvenlik açısından birbirinden izole bir şekilde yaşarken birleri ile iletişim kurmaları gerekirse nasıl konuşacaklar.
Kodlama Açısından İletişim
Bu durum gerçekten zorlu bir durum Modern Web Uygulamaları React, Vue , Angular, Solid, Svelte hepside ortak Web API altyapıları üzerine kurulmuş Routing, Store, Communication altyapıları üzerinden ortaklaşa çalışabilmektedir. bu durumda işler zorlaşacak.
Style Açısından İletişim.
Normalde HTML içerisinde elemanlar ekrana çizilirken styling olarak birbirini etkileyebilirken, iFrame içerisinde bileşenler kendi kabuklarında style yönetecektir. Bu durum resizing olayını iFrame yansıtılamaması anlamına gelir.
Peki İletişimi Nasıl Sağlıyacağız ?
Ama bizim bunu uygulamalar içerisinde yönetmemiz gerekir. Bunun için Tarayıcıların sunduğu tek bir yapı bulunmaktadır. Inter Process Communication ile iletişim kurmalarını sağlatabilirsiniz.
Bu durumda Routing, State, Styling tüm değişimleri birbirleri ile senkronize edebilirsiniz.
Bunu sağlayan API
window.addEventListener('message', handleMessage); // Gelen Mesajları Dinleneme
postMessage(message, '*'); ..// mesaj gönderme
Bunu bir örnek ile anlatalım. Bir Parent bileşen olsun, bu bileşen kendi child iframe gelen mesajları dinlesin..
import React, { useEffect } from 'react';
const ParentComponent = () => {
useEffect(() => {
// Add event listener to receive messages from the iframe
const handleMessage = (event) => {
// Do something with the message received from the iframe
console.log('Message received from iframe:', event.data);
};
window.addEventListener('message', handleMessage);
// Clean up the event listener when the component is unmounted
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
return (
<div>
{/* Your other content */}
<iframe src="path/to/your/iframe" title="Your iframe" />
</div>
);
};
export default ParentComponent;
Bir de Child bileşen olsun oda mesaj göndersin.
import React, { useEffect } from 'react';
const ChildIframe = () => {
useEffect(() => {
// Send a message to the parent iframe
const message = 'Hello, parent! This is a message from the iframe.';
window.parent.postMessage(message, '*'); // '*' allows communication with any window
// Note: '*' is used here as the targetOrigin, which allows communication with any window. In a production environment, you should set a specific targetOrigin to ensure more secure communication between specific domains.
}, []);
return <div>Child iframe content</div>;
};
export default ChildIframe;
Bu iletişimi tek yönlü düşünmeyin. Bu iletişim 2 yönlü hale getirip bir takım tetiklemeler ile iframe’ ler ve parent arasında güzel bir yapı oluşturabilirsiniz.
Bu kısımda debugging anlamında, performans anlamında bir takım kayıplar olacaktır. Ama tradeoff yani durumunuz avantaj/dezavantajlarını karşılaştırıp ona göre bu yöntemi seçmelisiniz.
Styling Resizing
Bu konuda da bir takım hazır 3rd Party kütüphaneler bulunuyor. Bunlarnda bazıları React iFrame parent göre ilişkilendirip otomatik resize olmasını sağlıyor.
Aşağıdaki iFrame örneğinde iFrame resize ederseniz içerisindeki content responsive olarak değiştiğini görebilirsiniz.
https://onurdayibasi.dev/iframe-resizing
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (DOM API Kullanım Yöntemleri) erişmek için bu linke tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara (Web API Kullanım Yöntemleri) erişmek için bu linke tıklayabilirsiniz.