JavaScript & BOM - Window


Objekt prozora (Window)

Objekt window predstavlja prozor koji sadrži DOM dokument. Prozor može biti glavni prozor, skup okvira, pojedinačni okvir ili čak novi prozor kreiran pomoću JavaScript-a. Ako se sjećate iz prethodnih lekcija, koristili smo metodu alert() u našim skriptama za prikaz skočnih poruka. Ovo je metoda objekta prozora. U sljedećih nekoliko lekcija vidjećemo brojne nove metode i svojstva objekta prozora (window) koji nam omogućavaju da radimo stvari kao što su traženje informacija od korisnika, potvrđivanje radnje korisnika, otvaranje novih prozora itd. Što vam omogućava da dodate više interaktivnosti vašoj web stranice.



Izračunavanje širine i visine prozora

Objekt prozora (window) pruža svojstvo innerWidth i innerHeight da bi se saznala širina i visina okvira za prikaz prozora pretraživača (u pikselima), uključujući horizontalnu i vertikalnu traku za pomicanje, ako su prikazani. Evo primjera koji prikazuje trenutnu veličinu prozora pretraživča na klik dugmeta:

<script>
function windowSize(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    alert("Širina: " + w + ", " + "Visina: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Veličina prozora</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje dimenzije pretraživača</title>
</head>
<body>
    <script>
    function windowSize(){
        var w = window.innerWidth;
        var h = window.innerHeight;
        alert("Širina: " + w + ", " + "Visina: " + h);
    }
    </script>
     
    <button type="button" onclick="windowSize();">Veličina prozora</button>
</body>
</html>     

Međutim, ako želite saznati širinu i visinu prozora isključujući klizače, možete koristiti svojstvo clientWidth i clientHeight bilo kojeg DOM elementa (poput div-a), kako što je prikazano u sljedećem primjeru:

<script>
function windowSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert("Širina: " + w + ", " + "Visina: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Veličina prozora</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje širinu i visinu prikaza pretraživača bez klizača</title>
    <style>
        body{
            min-height: 2000px;
        }
    </style>
</head>
<body>
    <script>
    function windowSize(){
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        alert("Širina: " + w + ", " + "Visina: " + h);
    }
    </script>
     
    <button type="button" onclick="windowSize();">Veličina prozora</button>
</body>
</html>