JavaScript & BOM - Window Location

Lokacijski objekt

Svojstvo lokacije prozora (tj. window.location) referenca je na objekt lokacije (Location). Predstavlja trenutni URL dokumenta koji se prikazuje u tom prozoru. Objekt prozora (Window) je na vrhu lanca opsega. Svojstvima objekta window.location se može pristupiti bez window. prefiks, na primjer window.location.href može se zapisati kao location.href. Sljedeći dio pokazaće vam kako dobiti URL stranice, kao i ime hosta, protokol itd. koristeći svojstvo objekta lokacije window objekta.


Dobijanje URL-a trenutne stranice

Svojstvo window.location.href možete koristiti za dobijanje cijelog URL-a trenutne stranice. Sljedeći primjer će prikazati kompletni URL stranice na klik dugmeta: 

<script>
function getURL() {
    alert("URL ove stranice je: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Dohvati URL stranice</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Tačan URL stranice</title>
</head>
<body>
    <script>
    function getURL() {
        alert("URL stranice je: " + window.location.href);
    }
    </script>
     
    <button type="button" onclick="getURL();">Dohvati URL stranice</button>
</body>
</html>

Dobijanje drugog dijela URL-a

Slično tome, možete koristiti druga svojstva objekta lokacije kao što su: protokol, ime hosta, port, putanja, pretraživanje itd. da biste dobili drugačiji dio URL-a. Isprobajmo sljedeći primjer da biste vidjeli kako se koristi svojstvo lokacije prozora (Window Location). 

// Ispisuje kompletan URL
document.write(window.location.href);
  
// Ispisuje protokol kao http: ili https:
document.write(window.location.protocol); 
 
// Ispisuje ime hosta s portom poput localhost ili localhost:3000
document.write(window.location.host);
  
// Ispisuje ime hosta poput localhost ili www.example.com
document.write(window.location.hostname);
 
// Ispisuje broj porta poput 3000
document.write(window.location.port);
  
// Ispisuje putanju kao /products/search.php
document.write(window.location.pathname); 
 
// Ispisuje query string kao ?q=ipad
document.write(window.location.search);
 
// Ispisuje identifikator fragmenta poput #featured
document.write(window.location.hash);
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Different Part of a URL</title>
</head>
<body>
    <script>
    // Ispisuje kompletan URL
    document.write(window.location.href);
  
    // Ispisuje protokol kao http: ili https:
    document.write(window.location.protocol); 
 
    // Ispisuje ime hosta s portom poput localhost ili localhost:3000
    document.write(window.location.host);
  
    // Ispisuje ime hosta poput localhost ili www.example.com
    document.write(window.location.hostname);
 
    // Ispisuje broj porta poput 3000
    document.write(window.location.port);
  
    // Ispisuje putanju kao /products/search.php
    document.write(window.location.pathname); 
 
    // Ispisuje query string kao ?q=ipad
    document.write(window.location.search);
 
    // Ispisuje identifikator fragmenta poput #featured
    document.write(window.location.hash);
    </script>
    <p><strong>Napomena:</strong> Ako URL ne sadrži određenu
    komponentu (npr. broj porta i identifikator fragmenta), biće postavljen na ' ' .</p>
</body>
</html>

Učitavanje novih dokumenata

Možete koristiti metodu assign() objekta lokacije, tj. window.location.assign() za učitavanje drugog resursa iz URL-a navedenog kao parametar. Pogledajmo primjer: 

<script>
function loadHomePage() {
    window.location.assign("https://www.ittutorijali.net");
}
</script>
 
<button type="button" onclick="loadHomePage();">Učitaj početnu stranicu</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Učitavnje drugih resusra iz URL-a</title>
</head>
<body>
    <script>
    function loadHomePage() {
        window.location.assign("https://www.ittutorijali.net");
    }
    </script>
     
    <button type="button" onclick="loadHomePage();">Učitaj početnu stranicu</button>
    <p><strong>Napomena:</strong> Otvorite izlaz na novoj kartici 
    klikom na strelicu pored dugmeta "Show Output", a zatim kliknite 
    gornje dugme da biste vidjeli kako to radi.</p>
</body>
</html>

Takođe možete koristiti metodu replace() za učitavanje novog dokumenta koji je gotovo isti kao assign(). Razlika je u tome što ne stvara unos u istoriji pretraživača, što znači da korisnik neće moći koristiti dugme za povratak da bi došao do njega. Pogledajmo primjer: 

<script>
function loadHomePage(){
    window.location.replace("https://www.ittutorijali.net");
}
</script>
 
<button type="button" onclick="loadHomePage();">Učitaj početnu stranicu</button>

Možete koristiti i svojstvo window.location.href za učitavanje novog dokumenta u prozoru. Daje isti efekt kao i metodom assign(). Pogledajmo primjer: 

<script>
function loadHomePage() {
    window.location.href = "https://www.ittutorijali.net";
}
</script>
 
<button type="button" onclick="loadHomePage();">Učitaj početnu stranicu</button>

Dinamičko učitavanje stranice

Metoda reload() može se koristiti za ponovno dinamičko učitavanje trenutne stranice. Po želji možete navesti logički parametar true ili false. Ako je parametar tačan (true), metoda će prisiliti pretraživač da ponovo učita stranicu s poslužitelja. Ako je netačno (false) ili nije navedeno, pretraživač može ponovo učitati stranicu iz svoje predmemorije. Pogledajmo primjer: 

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Ponovi učitavanje stranice</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ponovno učitavanje dinamičke stranice</title>
</head>
<body>
    <script>
    function forceReload() {
        window.location.reload(true);
    }
    </script>
     
    <button type="button" onclick="forceReload();">Ponovi učitavanje stranice</button>
    <p><strong>Napomena:</strong> Otvorite izlaz na novoj kartici
    klikom na strelicu pored dugmeta "Show Output", a zatim kliknite gornje
    dugme da biste vidjeli kako to radi.</p>
</body>
</html>