Javascript open kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Javascript open kullanımı ile tarayıcıda yeni bir pencere veya popup oluşturma ve bu pencereye genişlik, yükseklik içeriğini özelleştirebilmekteyiz.

Kullanımı : window.open("URL","pencereAdi","[pencereOzellikleri]")

open methodu kendi içerisinde 3 adet değer almaktadır. İlk değer olarak yeni açılacak olan pencere içerisinde eğer bir adres göstermek istiyor isek bu adresi girebiliriz, ikinci değer ise açılacak olan yeni pencerenin adı olmaktadır. üçüncü değerde de pencerenin özelliklerini belirttiğimiz alandır bu alanda pencerenin genişlik, yükseklik, scroll bilgisi gibi özelliklerini aralarında virgül bırakarak belirtebilmekteyiz. 

Özellik Açıklama
widthAçılan tarayıcı genişliği
heightAçılan tarayıcı yüksekliği
statusPencerenin altında bulunan durum çubuğu
toolbarTarayıcı araç çubuğu
locationTarayıcı adres satırı
menubarPencere menusü
directoriesTarayıcı klasör seçenekleri
resizableAçılan tarayıcının boyutu sonradan değiştirilebilirmi 
scrollbarsScroollbar özelliği
window.open("https://www.kodhocasi.com","kodhocasi","width=500,height=200");

Yukarıdaki örnekte sayfa ilk açılışta popup olarak kullanıcıya genişliği 500 yüksekliği 200 olan bir pencere açılacaktır. open methodun da genişlik ve yükseklik özelliğini belirtmez isek açılan ekran yeni bir sekme olarak açılacaktır.

Eğer açılan popup içerisinde bir url bilgisi yerine bizim belirdiğimiz ifadenin yer almasını istiyor isek open methodunu bir değişkene atayarak tarayıcı içeriğini yönetebilmekteyiz

var newWindow = window.open("","newWindow","width=500,height=200");
newWindow.document.write("Kod Hocası - Geleceği Yazanlar Otağı");

Yukarıdaki popup örneğinin çıktısı aşağıdaki gibi olacaktır.

Javascript open kullanımı

Yeni açılan pencereyi dilerseniz bir buton veya işlem sonucuna göre de açabilmektesiniz.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol