Merhaba dostlar, Siberdefter Akademi‘ye hepiniz hoş geldiniz, bugün Javascript Dersleri serimizde window.open() hakkında bilgi vereceğiz. DOM komutu olan window.open() ile neler yapabileceğimize bakacağız.
<!DOCTYPE html>
<html>
<body>
<p>Düğmeye tıklayın ve tarayıcınızda yeni bir sekme açılsın.</p>
<button onclick="newTab()">Try it</button>
<script>
function newTab() {
window.open("https://www.siberdefter.com");
}
</script>
</body>
</html>Şimdi örnek kodumuzu incelediğimiz zaman basit bir HTML yapısı ile karşılışıyoruz. Bir paragraf ve bir düğme oluşturdum ve HTML sayfamın içerisine <script> etiketlerini açıp küçük fonksiyonumu tanımladım.
window.open(); fonksiyonu mevcut tarayıcıda mevcut sekmenin hemen yanına bir yeni sekme açar ve parametre olarak hangi URL gönderilmiş ise oraya yönlendirir.
window.open(parameter);Syntax olarak göstermemiz gerekirse bu şekilde basit bir yapıya sahiptir.
window.open("https://www.siberdefter.com");Bu kullanım ise basit düzeyde kullanımdır ve sadece yeni bir sekme oluşturur. Aşağıda window.open() fonksiyonun alabileceği parametreler listelenmiştir.
window.open() Fonksiyonu hangi parametreleri alır?
| Parametre | Açıklama |
|---|---|
| URL | İsteğe bağlı. Açılacak sayfanın URL’sini belirtir. URL belirtilmezse, about: blank ile yeni bir pencere / sekme açılır |
| name | İsteğe bağlı. Hedef niteliğini veya pencerenin adını belirtir. Aşağıdaki değerler desteklenir: _blank – URL yeni bir pencereye veya sekmeye yüklenir. Bu varsayılan _parent – URL üst çerçeveye yüklenir _self – URL geçerli sayfanın yerini alır _top – URL, yüklenebilecek çerçeve kümelerinin yerini alır name – Pencerenin adı (Not: ad, yeni pencerenin başlığını belirtmez) |
| specs | İsteğe bağlı. Virgülle ayrılmış öğe listesi, boş bırakılmaz. Alacağı özellikleri bir sonraki tabloda belirtilmiştir. |
| replace | İsteğe bağlı. URL’nin yeni bir girdi oluşturup oluşturmadığını veya geçmiş listesindeki geçerli girdinin yerine geçip geçmeyeceğini belirtir. Aşağıdaki değerler desteklenir: true – URL, geçmiş listesindeki geçerli belgenin yerini alır false – URL, geçmiş listesinde yeni bir giriş oluşturur |
Specs
Tabloda yer alan “yes” ,”no” terimleri boolean ifadeleri temsil ediyor. Tablo verileri W3Schools’tan alınmıştır.
channelmode=yes|no|1|0 Pencerenin sinema modunda görüntülenip görüntülenmeyeceği. Varsayılan değer: no. Yalnızca IE için. directories=yes|no|1|0 Eski. Dizin düğmeleri eklenip eklenmeyeceği. Varsayılan evet’tir. Yalnızca IE için. fullscreen=yes|no|1|0 Tarayıcının tam ekran modunda görüntülenip görüntülenmeyeceği. Varsayılan değer no. Tam ekran modundaki bir pencere de sinema modunda olmalıdır. Yalnızca IE için height = pixel cinsinden Pencerenin yüksekliği. Min. değer 100 left=pixels Pencerenin sol konumu. Negatif değerlere izin verilmiyor location=yes|no|1|0 Adres alanının gösterilip gösterilmeyeceği. Yalnızca Opera menubar=yes|no|1|0 Menü çubuğunun görüntülenip görüntülenmeyeceği resizable=yes|no|1|0 Pencerenin yeniden boyutlandırılıp boyutlandırılmayacağı. Yalnızca IE için. scrollbars=yes|no|1|0 Kaydırma çubuklarının görüntülenip görüntülenmeyeceği. Yalnızca IE, Firefox ve Opera için status=yes|no|1|0 Durum çubuğu eklenip eklenmeyeceği titlebar=yes|no|1|0 Başlık çubuğunun gösterilip gösterilmeyeceği. Çağıran uygulama bir HTML Uygulaması veya güvenilir bir iletişim kutusu değilse yok sayılır toolbar=yes|no|1|0 Tarayıcı araç çubuğunun gösterilip gösterilmeyeceği. Yalnızca IE ve Firefox için. top=pixels Pencerenin üst konumu. Negatif değerlere izin verilmiyor width=pixels Pencerenin genişliği. Min. değer 100 olmalıdır.
Teknik Detay
Dönüş Değeri: Yeni oluşturulan pencereye başvuru veya çağrı başarısız olursa null değeri döner.
Daha fazla örnek
About: blank sayfasını yeni bir pencerede / sekmede açma:
var myWindow = window.open("", "", "width=200,height=100");“Msg Window” adlı yeni bir pencere açın ve içine bir metin yazın:
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");Geçerli pencereyi yeni bir pencereyle değiştir:
var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");Yeni bir pencere açın ve görünümünü kontrol edin:
window.open("https://www.siberdefter.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");Birden fazla URL açın.
window.open("http://www.google.com/");
window.open("https://www.siberdefter.com/");Yeni bir pencere açın. Yeni pencereyi kapatmak için close () öğesini kullanın:
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100"); // Opens a new window
}
function closeWin() {
myWindow.close(); // Closes the new window
}Yeni bir pencere açın. Yeni pencerenin adını döndürmek için name özelliğini kullanın:
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");Yeni pencereyi oluşturan pencereye başvuru döndürmek için açılış özelliğini kullanma:
var myWindow = window.open("", "myWindow", "width=200,height=100"); // Opens a new window
myWindow.document.write("<p>This is 'myWindow'</p>"); // Text in the new window
myWindow.opener.document.write("<p>This is the source window!</p>"); // Text in the window that created the new windowBir sonraki Javascript derslerimizde görüşmek üzere dostlar, sağlıkla kalın. Bizi Instagram üzerinden takip etmeyi unutmayın: Instagram kullanıcı adımız @siberdefter
