Javascipt tarayıcı nesne modeli - (bom)

Sezai AlkanFrontend Developer

JavaScript #bom #javascript #pencereolusturma

BOM - Browser Object Model Tarayıcı Penceresini Üzerinde Nesne Değişikliği. Tarayıcı Nesne Modeli İle Harici Bir Pencere Oluşturulabilir. Pencereyi Açabilir Ve Özelliklerine Müdahale Edebiliriz. Aşağıdaki Tabloda Kullanabileceğimiz Özellikleri Tablo Şeklince Yazdım. Bu Kullanımları İstersek window Nesnesi İle Kullanabilir İstersekte Tekil Kullanabiliriz.

Örn:

Kullanım - 1 : window.closed
Kullanım - 2 : closed

Bir Örnek Yapalım. Örneğin İçerisinde Bir Pencere Oluşturalım Bunun Yükseklik Ve Genişliğini Belirleyelim Ve Bu Pencereyi Kullanıcı Tarafından Açıp Kapatalım. Pencerenin Durumunuda, Pencere Açıldı Veya Pencere Kapandı Diye Kullanıcıya Bilgi Aktaralım.

Öncelikle Bir p Etiketi Oluşturalım Bunada durum id si Verelim. Böylelikle Kullanıcıya Aktarılacak Bilgiyi Yazdırabilelim.

<p id="durum"></p>

Bir Tane Pencere Aç, Bir Tanede Pencere Kapat Adında Butonlar Oluşturalım. Bunlarada Js Tarafında Oluşturacağımız İlgili fonksiyonları Çalıştırmak İçin onclick="" Methodunu Kullanalım.

<button onclick="pencereAc()">Pencere Aç</button>
<button onclick="pencereKapat()">Pencere Kapat</button>

Html Tarafımı Tamamladıktan Sonra Js Tarafına Geçelim Burada 3 Adet Fonksiyon Oluşturacağız. ilk Olarak pencereAc Adında Bir Fonsksiyon Oluşturalım.

function pencereAc(){
            pencere = window.open("js.html", "_blank", "width=300,height=100");
        }

Oluşturduğumuz Fonksiyon İçersine pencere Değişkeni İçersinde Bir Pencere Oluşturuyoruz. Pencere İçersinde js.html Gözükmesini İstiyoruz. _blank Özelliği İle Ayrı Pencere de Açılmasını İsteedik. Birde Pencerenin Yükseklik Ve Genişliğini Belirledik.

Sonrasında Birde Pencere Kapatmak İçinde Bir Fonskiyon Oluşturalım.

function pencereKapat(){
    pencere.window.close();
}

Oluşturduğumuz Bu Fonskiyon İçersinde, Pencereyi Oluştururken Kullandığımız Değişken Adını Kullarak close Nesnesini Kullanıyoruz. Son Olarak da kontrolDurum Adında Bir Fonsiyon Oluşturalım Bu Fonskiyon İçersindede Pencerenin Durumunu Kontrol Edeceğiz.

function kontrolDurum(){
            if(pencere.closed == true){
                document.getElementById("durum").innerHTML = "Pencere Kapatıldı";
            }else{
                document.getElementById("durum").innerHTML = "Pencere Açıldı";
            }
        }

Oluşturuğumuz Fonksiyon İçersinde if else ile closed Özelliğini Kullanıyoruz. closed Özelliğini İster window İstersekte Tekil Olarak Kullanabiliriz. Bu Özellik Pencere Kapalı İse Bize true Değerini Döndürecektir. Gelen Değer Sonucunda id si durum Olan Nesne İçersine Pencere Kapatıldı Veya Pencere Açıldı Yazdırabilriz.

Son Olarakda kontrolDurum Fonskiyonunu pencereAc Ve pencereKapat Fonksiyonu İçersine Dahil Etmemiz Gerekmektedir.

function pencereAc(){
    pencere = window.open("js.html", "_blank", "width=300,height=100");
    kontrolDurum();
}
function pencereKapat(){
    pencere.window.close();
    kontrolDurum();
}
function kontrolDurum(){
    if(pencere.closed == true){
        document.getElementById("durum").innerHTML = "Pencere Kapatıldı";
    }else if(pencere.closed == false){
        document.getElementById("durum").innerHTML = "Pencere Açıldı";
    }
}