JavaScript’in window.open()
metoduyla yeni tarayıcı pencereleri açmak, bilgileri ayrı olarak görüntülemenin veya bağımsız uygulamalar oluşturmanın bir yolunu sunar. Modern web tasarımında genellikle modal diyaloglar tercih edilse de, window.open()
‘ı anlamak değerliliğini korumaktadır. Bu kılavuz, kullanımını, en iyi uygulamaları ve olası sınırlamaları ele alarak açıklamaktadır.
window.open()
‘ı Anlamak
Temel fonksiyon window.open(URL, windowName, windowFeatures)
‘dır. Her parametre kritik bir rol oynar:
URL
: (String) Açılacak web adresi. Bunu atlamak boş bir pencere oluşturur.windowName
: (String) Pencereyi tanımlamak için bir ad. Adı tekrar kullanmak mevcut bir pencereyi hedefler. Bunu atlamak her seferinde yeni, isimsiz bir pencere oluşturur.windowFeatures
: (String) Pencerenin görünümünü ve davranışını kontrol eden virgülle ayrılmış özellikler. Yaygın özellikler şunlardır:
Özellik | Değer | Açıklama |
---|---|---|
width |
piksel |
Pencere genişliği piksel cinsinden. |
height |
piksel |
Pencere yüksekliği piksel cinsinden. |
left |
piksel |
Ekranın sol kenarından yatay konum. |
top |
piksel |
Ekranın üst kenarından dikey konum. |
toolbar |
evet/hayır |
Araç çubuğunu göster/gizle. |
menubar |
evet/hayır |
Menü çubuğunu göster/gizle. |
location |
evet/hayır |
Adres çubuğunu göster/gizle. |
resizable |
evet/hayır |
Yeniden boyutlandırmaya izin ver/engelle. |
scrollbars |
evet/hayır |
Kaydırma çubuklarını göster/gizle. |
Pratik Örnekler
Örnek 1: Basit Açılır Pencere
window.open("https://www.example.com", "_blank", "width=800,height=600");
example.com
adresini yeni bir sekmede veya pencerede açar.
Örnek 2: Özelleştirilebilir Açılır Pencere
let myWindow = window.open("", "myPopup", "width=400,height=300,resizable=yes,scrollbars=yes");
if (myWindow) {
myWindow.document.write("Açılır Pencereden Selamlar!
");
myWindow.document.close();
} else {
alert("Açılır pencere engellendi!");
}
Dinamik olarak eklenen içerikle özelleştirilebilir bir açılır pencere oluşturur. Açılır pencere engelleyicilerini nazikçe yönetmek için hata işleme dahildir.
Örnek 3: Açılır Pencereleri Kontrol Etme ve Kapatma
let myWindow = window.open("about:blank", "myWindow");
// ... kodunuzda daha sonra ...
if (myWindow && !myWindow.closed) {
myWindow.close();
}
Bu, bir pencere açmayı ve daha sonra kapatmaya çalışmadan önce açık olup olmadığını kontrol etmeyi gösterir. !myWindow.closed
kontrolü, pencere zaten kapalıysa hataları önler.
Önemli Hususlar
- Açılır Pencere Engelleyiciler: Tarayıcı açılır pencere engelleyicileri yaygındır.
window.open()
‘ınnull
döndürme olasılığını her zaman ele alın. - Kullanıcı Deneyimi: Aşırı açılır pencereler rahatsız edicidir. Bunları nadiren ve yalnızca gerektiğinde kullanın.
- Alternatifler: Birçok kullanım durumunda, modal diyaloglar veya diğer sayfa içi etkileşimler daha sorunsuz bir kullanıcı deneyimi sağlar.