Javascipt tarayıcı nesne modeli - (bom)

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

ÖzellikAçıklama
window.closedPencerenin Açık Olup Olmadığını Gösteren Nesnedir. True Veya False Değeri Döndürür.
window.defaultStatusPencerenin Durum Çubuğundaki Değeri Almak Veya Değiştirmek İçin Kullanılır.
window.innerHeightPencerenin Yükseklik Değerini Almak Veya Değiştirmek İçin Kullanılır.
window.innerWidthPencerenin Genişlik Değerini Almak Veya Değiştirmek İçin Kullanılır.
window.outerHeightPencerenin Dış Yükseklik Değerini Almak Veya Değiştirmek İçin Kullanılır.
window.outherWidthPencerenin Dış Genişlik Değerini Almak Veya Değiştirmek İçin Kullanılır.
window.namePencerenin Adına Ulaşmak Veya Değiştirmek İçin Kullanılır.
window.openerPencerenin Hangi Pencereden Açıldığının Referasının Bilgisini Verir.
window.framesPencerenin İçinde Bulunan Tüm Çerçeveleri Bir Dizi Nesne Olarak Alır.
window.lengthPencerenin İçinde Bulunan Tüm Çerçevelerin Sayısını Alır.
window.pageXOffsetPencere İçeriğinin X Eksenin de Kaydırılması Durumda Solda Kalan Gözükmeyen Kısmın Genişliğini Alır.
window.pageYOffsetPencere İçeriğinin Y Eksenin de Kaydırılması Durumunda Üstte Kalan Gözükmeyen Kısmın Yüksekliğini Alır.
window.parentPencerenin İlk Üst Kısmını Almaya Yarar.
window.screenLeftPencerenin Sol Üst Kısmının X Ekseninde Monitör E Olan Konumunu Alır.
window.screenTopPencerenin Sol Üst Kısmının Y Ekseninde Monitör E Olan Konumunu Alır.
window.screenXscreenLeft İle Aynı Özellikleri Taşır.
window.screenYscreenTop    İle Aynı Özellikleri Taşır.
window.selfPencerenin Referansını Alır.

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ı";
    }
}

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