JavaScript & BOM - Window Navigator

Objekt Navigator (Navigator Object)

Svojstvo navigatora prozora (tj. window.navigator) referenca je na objekt navigatora. To je svojstvo samo za čitanje koje sadrži informacije o korisnikovom pretraživaču. Budući da je window globalni objekt i nalazi se na vrhu lanca opsega, svojstvu window objekta, kao što je window.navigator, možemo pristupiti bez window. prefiks, na primjer window.navigator.language može se napisati kao navigator.language. Sljedeći dio će vam pokazati kako dobiti razne informacije o korisničkom pretraživaču.


Otkrivanje da li je pretraživač na mrežni ili van mreže

Svojstvo navigator.onLine možete koristiti da biste otkrili da li je pretraživač (ili aplikacija) na mrežni ili van mreže. Ovo svojstvo vraća logičku vrijednost istinito (true) ako je uređaj na mreži ili netačno (false) ukoliko nije na mreži. 

<script>
function checkConnectionStatus() {
    if(navigator.onLine) {
        alert("Prijava je online.");
    } else {
        alert("Prijava je nije online.");
    }
}
</script>
 
<button type="button" onclick="checkConnectionStatus();">Provjerite status veze</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Otkrivanje da li je pretraživač mrežni ili van mreže</title>
</head>
<body>
    <script>
    function checkConnectionStatus() {
        if(navigator.onLine) {
            alert("Prijava je online.");
        } else {
            alert("Prijava je nije online.");
        }
    }
    </script>
     
    <button type="button" onclick="checkConnectionStatus();">Provjeri status veze</button>
</body>
</html>

Pretraživač aktivira mrežne i vanmrežne događaje kada se veza uspostavi ili izgubi. Ovim događajima možete priložiti funkcije rukovaoca kako biste prilagodili svoju aplikaciju za mrežne i vanmrežne scenarije. Pogledajmo sljedeći JavaScript kod kako bismo vidjeli kako ovo funkcioniše: 

<script>
function goOnline() {
    // Radnja koju treba izvršiti kada se vaša aplikacija poveže s mrežom
    alert("I mi smo se vratili!");
}

function goOffline() {
    // Radnja koju treba izvršiti kada aplikacija prestane raditi van mreže
    alert("Hej, izgleda da ste van mreže.");
}

// Prilaganje obrađivača događaja za mrežni događaj
window.addEventListener("online", goOnline);

// Prilaganje obrađivača događaja za izvanmrežni događaj
window.addEventListener("offline", goOffline);
</script>

<p>Uključite / isključite internetsku vezu da biste vidjeli kako ona funkcionira.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Otkrivanje statusa internetske veze</title>
    <style>
        body {
            text-align: center;
            font-family: "Segoe UI", Arial, sans-serif;
        }
        #status {
            border: 2px solid;
            padding: 15px 20px 15px 40px;
            width: 160px;
            margin: 0 auto;
            border-radius: 20px;
            font-size: 30px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
        }
        #status.online {
            color: green;
        }        
        #status.offline {
            color: red;
        }
        #status.online::before, #status.offline::before {
            width: 25px;
            height: 25px;
            content: "";
            border-radius: 15px;
            box-shadow: 0 0 8px;
            position: absolute;
            left: 20px;
            top: 25px;
        }
        #status.online::before {
            background: green;
        }
        #status.offline::before {
            background: red;
        }
    </style>
</head>
<body>
    <script>    
    var hint = document.getElementById("hint");
    
    // Definiranje funkcije za ažuriranje statusa veze
    function updateConnectionStatus() {  
        var status = document.getElementById("status");
        if(navigator.onLine) {
            status.innerHTML = "Online";
            status.classList.add("online");
            status.classList.remove("offline");                        
        } else {
            status.innerHTML = "Offline";
            status.classList.add("offline");
            status.classList.remove("online");            
        }
    }

    // Prilaganje obrađivača događaja za događaj učitavanja
    window.addEventListener("load", updateConnectionStatus);
    
    // Prilaganje obrađivača događaja za mrežni događaj
    window.addEventListener("online", function(e) {
        updateConnectionStatus();
        hint.innerHTML = "I mi smo se vratili!";
    });
    
    // Prilaganje obrađivača događaja za izvanmrežni događaj
    window.addEventListener("offline", function(e) {        
        updateConnectionStatus();
        hint.innerHTML = "Hej, izgleda da ste van mreže.";
    });
    </script>
    <div id="status"></div>    
    <p>Uključite / isključite internetsku vezu da biste vidjeli kako ovo funkcioniše.</p>
    <p id="hint"></p>
</body>
</html>


Izgled koda iz prehodnog primjera


Pretraživač će automatski pozvati funkciju goOffline() u gornjem primjeru kad god se veza isključi sa mreže, dok će funkciju goOnline() pretraživač automatski pozvati kada se status veze promijeni u mrežni.


Provjera da li su kolačići omogućeni ili ne

Možete koristiti navigator.cookieEnabled da provjerite jesu li kolačići omogućeni u korisnikovom pretraživaču ili ne. Ovo svojstvo vraća logičku vrijednost true ako su omogućeni kolačići ili false ako nisu. 

<script>
function checkCookieEnabled() {
    if(navigator.cookieEnabled) {
        alert("Kolačići su omogućeni u vašem pretraživaču.");
    } else {
        alert("Kolačići su onemogućeni u vašem pretraživaču.");
    }
}
</script>
 
<button type="button" onclick="checkCookieEnabled();">Provjeri jesu li omogućeni kolačići</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Provjera jesu li omogućeni kolačići</title>
</head>
<body>
    <script>
    function checkCookieEnabled() {
        if(navigator.cookieEnabled) {
            alert("Kolačići su omogućeni u vašem pretraživaču.");
        } else {
            alert("Kolačići su onemogućeni u vašem pretraživaču..");
        }
    }
    </script>
     
    <button type="button" onclick="checkCookieEnabled();">Provjerite jesu li omogućeni kolačići</button>
</body>
</html>

Otkrivanje jezika pretraživača

Svojstvo navigator.language možete koristiti za otkrivanje jezika korisničkog interfejsa pretraživača. Ovo svojstvo vraća string koji predstavlja jezik, npr. "en", "en-US" itd. 

<script>
function checkLanguage() {
    alert("UI jezik vašeg pretraživača je: " + navigator.language);
}
</script>
 
<button type="button" onclick="checkLanguage();">Provjeri jezik</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Otkrivanje jezika korisničkog interfejsa preglednika</title>
</head>
<body>
    <script>
    function checkLanguage() {
        alert("UI jezik vašeg pretraživača je: " + navigator.language);
    }
    </script>
     
    <button type="button" onclick="checkLanguage();">Provjeri jezik</button>
</body>
</html>

Dobijanje informacija o imenu i verziji preraživača

Objekt Navigator ima pet glavnih svojstava, koja nam pružaju informacije o imenu i verziji korisnikovog pretraživača. Sljedeća lista pruža kratak pregled ovih svojstava:

  • appName - Vraća ime pretraživača. Uvijek vraća "Netscape" u bilo kom pretraživaču.
  • appVersion - Vraća broj verzije i ostale informacije o pretraživaču.
  • appCodeName - Vraća kodno ime pretraživača. Vraća "Mozilla" za sve pretraživače.
  • userAgent - Vraća string korisničkog agenta za trenutni pretraživač. Ovo svojstvo obično sadrži sve informacije i u appName i u appVersion.
  • platform - Vraća platformu na kojoj je pokrenut pretraživač (npr. "Win32", "WebTV OS" itd.)

Kao što možete vidjeti iz gornjih opisa, vrijednost koju vraćaju ova svojstva obmanjujuća je i nepouzdana, zato ih nemojte koristiti za određivanje tipa i verzije pretraživača korisnika. 

<script>
function getBrowserInformation() {
  var info = "\n App Name: " + navigator.appName;
     info += "\n App Version: " + navigator.appVersion;
     info += "\n App Code Name: " + navigator.appCodeName;
     info += "\n User Agent: " + navigator.userAgent;
     info += "\n Platform: " + navigator.platform;

    alert("Evo informacija vezanih za vaš pretraživač: " + info);
}
</script>
 
<button type="button" onclick="getBrowserInformation();">Nabavi informacije o pretraživaču</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Otkrivanje imena i verzije pretraživača</title>
</head>
<body>
    <script>
    function getBrowserInformation() {
        var info = "\n App Name: " + navigator.appName;
           info += "\n App Version: " + navigator.appVersion;
           info += "\n App Code Name: " + navigator.appCodeName;
           info += "\n User Agent: " + navigator.userAgent;
           info += "\n Platform: " + navigator.platform;
    
        alert("Evo informacija vezanih za vaš pretraživač: " + info);
    }
    </script>
     
    <button type="button" onclick="getBrowserInformation();">Nabavi informacije o pretraživaču</button>
</body>
</html>

Provjera da li je u pretraživaču omogućena Java ili ne

Možete koristiti metodu javaEnabled() da provjerite da li je u trenutnom pretraživaču omogućena Java ili ne. Ova metoda jednostavno pokazuje da li je podeđavanje koje kontroliše Javu uključeno ili isključeno, ne otkriva nudi li pretraživač Java podršku ili je Java instalirana na korisnikov sistem ili ne. 

<script>
function checkJavaEnabled() {
    if(navigator.javaEnabled()) {
        alert("U vašem pretraživaču je omogućena Java.");
    } else {
        alert("U vašem pretraživaču nije omogućena Java.");
    }
}
</script>
 
<button type="button" onclick="checkJavaEnabled();">Provjeri da li je Java omogućena</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Provjerite da li je u pretraživaču omogućena Java</title>
</head>
<body>
    <script>
    function checkJavaEnabled() {
        if(navigator.javaEnabled()) {
            alert("U vašem pretraživaču je omogućena Java.");
        } else {
            alert("U vašem pretraživaču nije omogućena Java.");
        }
    }
    </script>
     
    <button type="button" onclick="checkJavaEnabled();">Provjeri da li je Java omogućena</button>
</body>
</html>