Recuperare l’url e l’host della pagina web corrente con Javascript

In questo breve appunto digitale vi spiego come recuperare agevolmente l’url e l’host della pagina web corrente grazie all’uso di poche righe Javascript.

Questo appunto digitale può sembrare banale ma penso possa rivelarsi molto utile in molteplici occasioni. Pensate ad esempio, alla realizzazione di uno script complesso (magari in ajax), grazie a queste poche righe di codice possiamo agevolmente includere il percorso assoluto, per rendere ad esempio dinamico il percorso a file php di elaborazione o a una determinata immagine da appendere o animare.

Recupero nome HOST con javascript

Vediamo come associare a una variabile l’ “host” del nostro sito o progetto web in maniera completamente dinamica.

var host = "http://"+window.location.hostname;

Giusto per completezza, nel caso di questa pagina ad esempio questo codice restituirebbe: “http://www.targetweb.it”.

Come  avrete notato http:// va aggiunto a parte in quanto non è incluso nel return della funzione javascript. Per rendere completamente dinamico anche il protocollo http possiamo usare:

var http = location.protocol;

E’ possibile anche concatenare il tutto (questa però è una scelta puramente “visiva” per i puristi del codice).

var http = location.protocol;

var barre= http.concat("//");

var host = barre.concat(window.location.hostname);

Possibile uso di hostname:

$("<img src='"+host+""+cartella+"/RESTODELPERCORSO.jpg' />").appendTo(".tuodiv");

Proprio come nelle variabili PHP possiamo usare quanto imparato per rendere i nostri script jQuery molto più dinamici e flessibili (lo consiglio vivamente se fate uso di ajax ad esempio).

Recuperare sottocartella della pagina corrente con Javascript

Durante le fasi di sviluppo in particolare, può capitare che il nostro percorso assoluto sia host/sottocartella. Ora che abbiamo imparato come trovare l’host dinamicamente vediamo come ricavare anche le varie subdirectory che compongono il percorso. Per recuperare le subdirectory si usa la funzione pathname di javascript.

var pathname = window.location.pathname;

Se, ad esempio, la pagina corrente è targetweb.it/guide/jquery window location pathname vi restituirà /guide/ e la cartella /jquery/. Grazie al return della funzione pathname possiamo facilmente filtrare tramite la funzione split il percorso dinamico della pagina per ricavare quello che vogliamo dal nostro url. (nel prossimo articolo tratteremo per l’appunto la funzione split).

Questo trick ti è stato utile? Bhè guarda anche nella nostra vasta raccolta oppure condividi l’articolo sui tuoi social network preferiti!