Connect with us

Hi, what are you looking for?

Javascript

Javascript Dersleri: window.open() Fonksiyonu

Javascript Dersleri devam ediyor, window.open() Fonksiyonu ne işe yarar?

Javascript Dersleri
Javascript Dersleri

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.

Advertisement. Scroll to continue reading.

window.open() Fonksiyonu hangi parametreleri alır?

ParametreAçı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|0Pencerenin 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|0Eski. Dizin düğmeleri eklenip eklenmeyeceği. Varsayılan evet’tir. Yalnızca IE için.
fullscreen=yes|no|1|0Tarayı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 cinsindenPencerenin yüksekliği. Min. değer 100
left=pixelsPencerenin sol konumu. Negatif değerlere izin verilmiyor
location=yes|no|1|0Adres alanının gösterilip gösterilmeyeceği. Yalnızca Opera
menubar=yes|no|1|0Menü çubuğunun görüntülenip görüntülenmeyeceği
resizable=yes|no|1|0Pencerenin yeniden boyutlandırılıp boyutlandırılmayacağı. Yalnızca IE için.
scrollbars=yes|no|1|0Kaydı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|0Durum çubuğu eklenip eklenmeyeceği
titlebar=yes|no|1|0Baş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|0Tarayıcı araç çubuğunun gösterilip gösterilmeyeceği. Yalnızca IE ve Firefox için.
top=pixelsPencerenin üst konumu. Negatif değerlere izin verilmiyor
width=pixelsPencerenin 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:

Advertisement. Scroll to continue reading.
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 window

Bir 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

Advertisement. Scroll to continue reading.
Written By

Siberdefter'de Chief Executive Officer

Click to comment

Leave a Reply

E-posta hesabınız yayımlanmayacak.

Editörün Tavsiyeleri

Javascript

Herhangi bir web sitesine girdiğimiz zaman çoğu zaman sitelerin bizden bildirim göndermek için izin istediğini görürüz. Bizde web sitemize bu özelliği entegre etmek istediğimiz...

Javascript

Dünyanın en popüler programlama dillerinden Javascript, modern web teknolojilerinin en gözdesi. Peki Javascript ile json dosyasından veri nasıl çekeriz? Siberdefter Eğitim kaldığı yerden devam...

Javascript

Web sayfanız her açıldığında kullanıcıya rastgele renkler sunmak mı istiyorsunuz? Javascript ile Rastgele Renkler oluşturmak mümkün hem de iki satırlık kod ile. İlk etapta...

Javascript

Merhaba Siberdefter takipçileri, Javascript derslerimize devam ediyoruz ve bugün Javascript projelerimizde kullandığımız dizilerin (array) içerisinde herhangi bir içerik olmayan boş elemanları nasıl temizleyeceğimizi öğreneceğiz....

Advertisement
Advertisement