JavaScript, robot penceresi vb. gibi ek işlemleri gerçekleştirmek üzere tarayıcı penceresini açmak ve kapatmak için yerleşik yöntemler sunar. Bu yöntemler, tarayıcı penceresi açılır pencerelerinin açılmasına veya kapatılmasına yardımcı olur. Aşağıda pencere yöntemleri verilmiştir:
pencere.açık yöntemi yeni bir web sayfasını yeni bir pencerede açmak için kullanılır ve pencere.kapat window.open yöntemiyle açılan web sayfasını kapatma yöntemi. window.open() yöntemine ayrıntılı olarak bakın:
Window.open()
Önceden tanımlanmış bir pencere yöntemidir. JavaScript Tarayıcıda yeni sekme veya pencereyi açmak için kullanılır. Bu, tarayıcı ayarlarınıza veya yeni bir pencere veya sekmenin açılacağı window.open() yönteminde iletilen parametrelere bağlı olacaktır.
Bu yöntem Chrome gibi hemen hemen tüm popüler web tarayıcıları tarafından desteklenir. Firefox , vb. Aşağıda pencere açma yönteminin sözdizimi ve parametreleri verilmiştir -
Sözdizimi
Bu işlev dört parametreyi kabul eder, ancak bunlar isteğe bağlıdır.
window.open(URL, name, specs, replace);
Veya
Bu işlevi kullanmadan da kullanabilirsiniz. pencere aşağıda gösterildiği gibi anahtar kelime:
open(URL, name, specs, replace)
Her iki sözdizimi arasında hiçbir fark yoktur.
Parametre Listesi
Aşağıda window.open() yönteminin parametre listesi bulunmaktadır. Bu yöntemin tüm parametrelerinin isteğe bağlı olduğunu ve farklı şekilde çalıştığını unutmayın.
URL'si: window.open() işlevinin bu isteğe bağlı parametresi, açmak istediğiniz bir web sayfasının URL dizesini içerir. Bu fonksiyonda herhangi bir URL belirtmezseniz yeni bir boş pencere açılacaktır ( hakkında:boş ).
isim: Bu parametreyi kullanarak açacağınız pencerenin adını belirleyebilirsiniz. Aşağıdaki değerleri destekler:
| _boşluk | İletilen URL yeni bir sekmeye/pencereye yüklenecektir. |
| _ebeveyn | URL, zaten açık olan ana pencereye veya çerçeveye yüklenecektir. |
| _self | Bu parametreyi ilettiğinizde URL önceki çıktının yerini alacak ve aynı çerçevede yeni bir pencere açılacaktır. |
| _tepe | URL, yüklenebilecek herhangi bir çerçeve kümesinin yerine geçer. |
| İsim | Üzerindeki metni veya herhangi bir veriyi gösterecek yeni pencerenin adını girin. (Not - pencerenin başlığı değil) |
Yukarıda belirtilen değerler, isim parametresi yerinde window.open() fonksiyonuna tek veya çift tırnak içinde iletilir.
özellikler: Bu parametre virgülle ayrılmış ayarları içerir. Bu parametrede kullanılan öğe boşluk içeremez, örneğin genişlik=150, yükseklik=100 .
Çeşitli değerleri destekler.
yer değiştirmek: window.open() yönteminin diğer parametreleri gibi bu da isteğe bağlı bir parametredir. Ya yeni bir giriş oluşturur ya da geçmiş listesindeki mevcut girişin yerini alır. İki Boole değerini destekler; bu, doğru ya da yanlış döndürdüğü anlamına gelir:
| Doğru | URL, geçmiş listesindeki geçerli girişin veya belgenin yerini alırsa true değerini döndürün. |
| YANLIŞ | URL, geçmiş listesinde yeni bir giriş oluşturursa false değerini döndürün. |
Dönüş Değerleri
Yeni açılan bir pencereyi döndürecektir.
Örnekler
Tarayıcı penceresini/sekmesini açmak için window.open() işlevinin bazı örneklerini burada bulabilirsiniz. Varsayılan olarak belirtilen URL yeni sekmede veya pencerede açılır. Aşağıdaki örneklere bakın:
1. open() URL parametresiyle
Bu, içinde bir web sitesi URL'si bulunan pencere açma yönteminin basit bir örneğidir. Bir düğme kullandık. Bu düğmeye tıkladığınızda window.open() yöntemi web sitesini çağıracak ve yeni tarayıcı sekmesinde açacaktır.
dizi olarak listele
Kodu Kopyala
Click the button to open new window <br> <br> Open WindowŞimdi Test Edin
Veya
Bu kod aşağıda verildiği gibi yazılabilir -
Kodu Kopyala
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window Şimdi Test Edin Çıktı
Buna tıkladığınızda Açık pencere butonuna bastığınızda javatpoint sitesi aynı pencerede yeni bir sekmede açılacaktır.
Aşağıdaki ekran görüntüsüne bakın:
2. parametresiz open()
Bu örnekte yeni sekmenin bir önceki pencerede açılması için window.open() fonksiyonuna herhangi bir parametre aktarmayacağız.
Kodu Kopyala
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window Şimdi Test Edin Çıktı
Yukarıdaki kodu çalıştırdığınızda, onunla birlikte bir düğme görünecektir.
Bunu tıkladığınızda Açık pencere düğmesine bastığınızda yeni bir sekmede boş bir pencere açılacaktır.
3. isim parametreleriyle open()
Bu örnekte şunu belirteceğiz: _ebeveyn name parametresinde. Bu değerlerden herhangi birini (_parent, _blank, _top vb.) içine iletebilirsiniz.
Kodu Kopyala
bash dize uzunluğu
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Şimdi Test Edin Çıktı
Kodu çalıştırıp aşağıda verilen çıktıyı alın. Bu, aynı ana pencerede yeni URL'yi tıklayıp açmak için bir düğme içerecektir.
Bu düğmeyi tıkladığınızda Gmail aynı ana pencere altında açılacaktır.
İkinci parametrede farklı değerleri ilettiğinizde farklı değerler için farkı göreceksiniz.
4. Yeni pencerenin boyutunu tanımlayın
Bu örnekte yeni pencerenin yüksekliğini ve genişliğini belirleyeceğiz. Bunun için üçüncü parametreyi kullanacağız ( özellikler ) window.open() yönteminde kullanın ve pencerenin yüksekliğini ve genişliğini virgülle ayırarak bu işleve iletin. Böylece pencere belirtilen boyutta açılacaktır.
Kodu Kopyala
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Şimdi Test Edin Çıktı
Yukarıdaki kodu yürütün ve aşağıda verilen çıktıyı alın. Bu, aynı ana pencerede yeni URL'yi tıklayıp açmak için bir düğme içerecektir.
Bu butona tıkladığınızda ana pencerenin boyutunda yeni bir boş pencere açılacaktır.
Herhangi bir web sitesini açmak için URL'yi window.open() yöntemine de iletebileceğinizi unutmayın.
Bir adın ve mesajın bulunduğu yeni pencereyi aç
Kullanıcı tanımlı herhangi bir metni veya formu, butona tıkladığımızda açacağımız yeni pencerede gösterebiliriz. Bunun için yeni pencereye herhangi bir isim vermemiz ve içine bir miktar metin yazmamız gerekiyor. Bu ad window.open() yöntemine geçecektir. Gerçek kodlamayla nasıl uygulanacağına aşağıdaki koda bakın.
Kodu Kopyala
function openWindow() { var newtab = window.open('', 'anotherWindow', 'width=300,height=150'); newtab.document.write('<p> This is 'anotherWindow'. It is 300px wide and 150px tall new window! </p>'); } <b> Click the button to open the new user-defined sized window </b> <br> <br> Open Window Şimdi Test Edin Çıktı
Kodu çalıştırıp aşağıda verilen çıktıyı alın. Aynı ana pencerede yeni URL'yi tıklayıp açmak için bir düğme içerecektir.
Bu butona tıkladığınızda 300*150 boyutunda ana pencerenin altında kullanıcı tanımlı mesajın yer aldığı yeni bir pencere açılacaktır.
JavaScript ayrıca tarayıcı penceresini kapatmak için yerleşik bir yöntem (close()) sunar.
window.open() tarafından açılan pencereyi kapatın
Bu örnekte size window.open() yöntemiyle açılan pencereyi veya sekmeyi nasıl kapatacağınızı göstereceğiz. İlk olarak, bir düğme tıklamasını kullanarak bir web sitesi URL'sini yeni bir pencerede (kodda tanımlanan boyut) açacağız ve ardından açılan pencereyi kapatmak için başka bir düğme kullanacağız. Bunun nasıl yapılacağını aşağıdaki koda bakın:
Kodu Kopyala
Open and close window method example // function to open the new window tab with specified size function windowOpen() { var newWindow = window.open( 'https://www.javatpoint.com/', '_blank', 'width=500, height=350'); } // function to close the window opened by window.open() function windowClose() { newWindow.close(); } <h2> Window open() and close() method </h2> <b> Click the button to open Javatpoint tutorial site </b> <br> Open Javatpoint <br> <br> <b> Click the button to close Javatpoint tutorial site </b> <br> Close Javatpoint Şimdi Test Edin Çıktı
Kodu çalıştırdığınızda aşağıdaki gibi bir yanıt alacaksınız:
Tıkla Javatpoint'i açın Javatpoint eğitim web sitesini açmak için düğmeyi kullanın. Açılacak yeni açılır pencerenin boyutunu (yükseklik ve genişlik) belirledik.
Eğer Javatpoint'i kapat düğmesine bastığınızda açılan bu pencere küçültülecektir.
Tarayıcı Desteği
Birkaç web tarayıcısı window.open() yöntemini destekler, örneğin:
- Krom
- Mozilla Firefox
- İnternet Explorer (IE)
- Opera
- Safari'de vb.
Yukarıdaki tarayıcılarda window.open() yöntemini kullanabilir ve çalıştırabilirsiniz.