Come ottenere l'URL di base con jquery o javascript?

152

In joomla php lì posso usare $this->baseurlper ottenere il percorso di base, ma volevo ottenere il percorso di base in jquery.

Il percorso di base può essere uno dei seguenti esempi:

http://www.example.com/
http://localhost/example
http://www.example.com/sub/example

L' examplepuò anche cambiare.

javascript  jquery 
— Navin Rauniyar
fonte
— Mritunjay,
@Mritunjay L'ho già visto, ma nel mio caso il percorso di base è diverso poiché desideravo ottenere il percorso di base come in php, come facciamo in joomla
— Navin Rauniyar
Quindi, nessuna delle risposte ha risolto il tuo problema?
— Artjom B.
scegli una risposta, per favore?
— Allanberry,

Risposte:

177

Questo ti aiuterà ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— Jenish
fonte
Sì funziona! http://localhost/myapp/what/ever/sub/folder-> getBaseURL -> http://localhost/myapp:-)
— vee
3
Questo non funzionerà in tutti i casi, come indicato dalla risposta in qualche modo non riservata di @Artjom B. Ad esempio, quando un sito viene testato sulla rete locale (e il dominio viene sostituito con IP + percorso locale) l'URL di base potrebbe essere qualcosa di simile 192.168.0.23/~sites/site/html/invece di site.dev. Anche ottenere il percorso completo con Javascript non è un'opzione, perché un sito può avere un numero qualsiasi di sottodirectory virtuali.
— sicuramente l'
124

Penso che andrà bene per te

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
— Haris
fonte
7
Bello breve e dolce, grazie. window.location.origin
— TetraDev,
1
questa dovrebbe essere la risposta preferita, poiché è breve, concisa e funziona bene.
— Gregor
window.location.origin non è definito in
— ie9
1
@jnoreiga Chi utilizza ancora ie9 ツ
— Alexandre Daubricourt,
2
Vorrei che fosse così semplice @AlexandreDaubricourt
— jnoreiga
30

Questo otterrà l'URL di base

var baseurl = window.location.origin+window.location.pathname;
— Zaheer Babar
fonte
questo è lo stesso di window.location.href
— Z. Khullah,
8
non è lo stesso, pathname ti dà il segmento del percorso dell'url, href contiene anche i parametri della query
— dschulten
24

Questa è una domanda estremamente vecchia, ma qui ci sono gli approcci che uso personalmente ...

Ottieni URL standard / base

Come molti hanno già affermato, questo funziona per la maggior parte delle situazioni.

var url = window.location.origin;


Ottieni l'URL di base assoluto

Tuttavia, questo semplice approccio può essere utilizzato per eliminare qualsiasi numero di porta. 

var url = "http://" + location.host.split(":")[0];

Modifica: per risolvere il problema, presentato da Jason Rice , è possibile utilizzare quanto segue per inserire automaticamente il tipo di protocollo corretto ...

var url = window.location.protocol + "//" + location.host.split(":")[0];


Imposta l'URL di base

Come bonus: l'URL di base può quindi essere ridefinito a livello globale. 

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
— Dustin Halstead
fonte
1
A meno che il tuo protocollo sia diverso da http come https (quindi l'impostazione del protocollo url su "http: //" presenterà alcuni errori davvero strani a seconda di come desideri utilizzare l'URL).
— Jason Rice,
13

Questo non è possibile da JavaScript, poiché si tratta di una proprietà sul lato server. Javascript sul client non può sapere dove è installato joomla. L'opzione migliore è in qualche modo includere il valore di $this->baseurlnella pagina javascript e quindi utilizzare questo valore ( phpBaseUrl).

È quindi possibile creare l'URL in questo modo:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
— Artjom B.
fonte
1
Si noti che loc.hostha la porta, per un URL come http://localhost:8082/questo metodo produrrà http://localhost:8082:8082/, window.location.hostnamedovrebbe essere usato invece.
— Tiberiu C.,
@TiberiuC. Grazie, aggiunto.
— Artjom B.
8

Ho avuto lo stesso problema qualche tempo fa, il mio problema era che avevo semplicemente bisogno dell'URL di base. Ci sono molte opzioni dettagliate qui ma per aggirare il problema, usa semplicemente l' window.locationoggetto. Digita effettivamente questo nella console del browser e premi invio per selezionare le opzioni lì. Bene per il mio caso era semplicemente: 

window.location.origin
— Johhn
fonte
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

Ma non si può dire che il baseurl () di CodeIgniter (o php joomla) restituirà lo stesso valore, in quanto è possibile cambiare il baseurl nel file .htaccess di questi framework.

Per esempio :

Se hai un file .htaccess come questo nel tuo host locale:

RewriteEngine on
RewriteBase /CodeIgniter/
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

$ This-> baseurl () restituirà http: // localhost / CodeIgniter /

— AKHIL KUMAR
fonte
6

Ho incontrato questa esigenza in diversi progetti Joomla. Il modo più semplice che ho trovato per indirizzare è aggiungere un campo di input nascosto al mio modello:

<input type="hidden" id="baseurl" name="baseurl" value="<?php echo $this->baseurl; ?>" />

Quando ho bisogno del valore in JavaScript:

var baseurl = document.getElementById('baseurl').value;

Non elegante come usare JavaScript puro ma semplice e fa il lavoro.

— Brian Bolli
fonte
6

il modo più semplice per ottenere l'URL di base in jQuery

window.location.origin
— Qaisar Malik
fonte
Questo non è in realtà jQuery. jQuery è simile al seguente: $ (location) .attr ("origin");
— Mauritz Hansen,
3

Consiglierei a tutti di creare tag HTML di base in fase di sviluppo, quindi assegnare href in modo dinamico, quindi in produzione qualunque host usi un client, si adatterà automaticamente ad esso:

<html>
 <title>Some page title</titile>
  <script type="text/javascript">
    var head  = document.getElementsByTagName('head')[0];
    var base = document.createElement("base");
    base.href = window.document.location.origin;
    head.appendChild(base);
  </script>
 </head>
 ...

Quindi, se ti trovi in ​​localhot: 8080, raggiungerai tutti i file collegati o referenziati dalla base, ad esempio: http://localhost:8080/some/path/file.html Se ti trovi in ​​www.esempio.com, saràhttp://www.example.com/some/path/file.html

Si noti inoltre che, in ogni posizione in cui ci si trova, non si dovrebbero usare riferimenti come globs in hrefs, ad esempio: La posizione principale http://localhost:8080/non lo fa http://localhost:8080/some/path/.

Fai finta di fare riferimento a tutti i collegamenti ipertestuali come completamente condannati senza l'URL di base.

— cagcak
fonte
3

Il formato è hostname / nome percorso / ricerca

Quindi l'URL è: 

var url = window.location.hostname + window.location.pathname + window.location.hash

Per il tuo caso 

window.location.hostname = "stackoverflow.com"
window.location.pathname ="/questions/25203124/how-to-get-base-url-with-jquery-or-javascript"
window.location.hash = ""

Quindi, in pratica, baseurl = hostname = window.location.hostname

— Md. Khirul Islam Omi
fonte
3

Sono sorpreso che nessuna delle risposte consideri l'URL di base se è stato impostato nel <base>tag. Tutte le risposte correnti cercano di ottenere il nome host o il nome del server o la prima parte dell'indirizzo. Questa è la logica completa che considera anche il <base>tag (che può riferirsi a un altro dominio o protocollo):

function getBaseURL(){
  var elem=document.getElementsByTagName("base")[0];
  if (typeof(elem) != 'undefined' && elem != null){
     return elem.href;
  }
  return window.location.origin;
}

Formato jquery:

function getBaseURL(){
  if ($("base").length){
     return $("base").attr("href");
  }
  return window.location.origin;
}

Senza essere coinvolti con la logica sopra, la soluzione abbreviata che considera sia <base>tag chewindow.location.origin :

js:

var a=document.createElement("a");
a.href=".";
var baseURL= a.href;

jquery:

var baseURL= $('<a href=".">')[0].href

Nota finale: per un file locale nel tuo computer (non su un host) window.location.originrestituisce solo file://la soluzione di sorthand precedente ma restituisce il percorso corretto completo.

— Ali Sheikhpour
fonte
1
Questo non è il modo migliore. Inoltre, vedi la risposta di @ DaniilSamoylov, che incorpora l' <base>elemento.
— Brad,
baseURI restituisce l'URL di base di un nodo, quindi in questo caso restituisce il percorso di base + il nome del documento. avrai bisogno di più codici per rimuovere il nome del documento da quell'URL. @Brad
— Ali Sheikhpour,
Questa soluzione non non restituire l'URL di base corretta quando la directory principale della pagina web è all'interno di una sottodirectory (ad es example.com/appRoot ). Funziona solo quando la directory principale della pagina Web si trova direttamente nella directory principale del webhost.
— Michael Hafner,
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

quasi uguale alla risposta di Jenish ma un po 'più breve.

— Mateen
fonte
2

Ero solo sullo stesso palco e questa soluzione funziona per me

Nella vista

<?php
    $document = JFactory::getDocument();

    $document->addScriptDeclaration('var base = \''.JURI::base().'\'');
    $document->addScript('components/com_name/js/filter.js');
?>

Nel file js accedi basecome variabile, ad esempio nel tuo scenario:

console.log(base) // will print
// http://www.example.com/
// http://localhost/example
// http://www.example.com/sub/example

Non ricordo dove prendo queste informazioni per dare credito, se le trovo modificherò la risposta

— Mario
fonte
1 
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— vikas Chaturvedi
fonte
1
Ti preghiamo di considerare di aggiungere una descrizione alla tua risposta.
— Capricorno
1

Ecco qualcosa di veloce che funziona anche con gli file://URL.

Ho pensato a questo one-liner:

[((1!=location.href.split(location.href.split("/").pop())[0].length?location.href.split(location.href.split("/").pop())[0]:(location.protocol,location.protocol+"//" + location.host+"/"))).replace(location.protocol+"//"+location.protocol+"//"+location.protocol+"://")]
— Blubbll
fonte
0

Hai detto che example.compotrebbe cambiare, quindi sospetto che in realtà hai bisogno dell'URL di base solo per poter usare la notazione relativa del percorso per i tuoi script. In questo caso particolare non è necessario utilizzare gli script, ma aggiungi il tag di base all'intestazione:

<head>
  <base href="http://www.example.com/">
</head>

Generalmente genera il collegamento tramite PHP.

— Hexodus
fonte
0

Nel caso in cui qualcuno vorrebbe vederlo diviso in una funzione molto solida

    function getBaseURL() {
        var loc = window.location;
        var baseURL = loc.protocol + "//" + loc.hostname;
        if (typeof loc.port !== "undefined" && loc.port !== "") baseURL += ":" + loc.port;
        // strip leading /
        var pathname = loc.pathname;
        if (pathname.length > 0 && pathname.substr(0,1) === "/") pathname = pathname.substr(1, pathname.length - 1);
        var pathParts = pathname.split("/");
        if (pathParts.length > 0) {
            for (var i = 0; i < pathParts.length; i++) {
                if (pathParts[i] !== "") baseURL += "/" + pathParts[i];
            }
        }
        return baseURL;
    }
— nuander
fonte
Questo dà solo l'intero URL. Non un URL di base.
— Sam,
anzi, non sono sicuro di dove stavo andando. Ho da tempo cambiato impostazione con il codice lato server
— nuander,
0

Facile 

$('<img src=>')[0].src

Genera un img con nome src vuoto forza il browser a calcolare l'URL di base da solo, indipendentemente dal fatto che tu abbia /index.htmlo altro.

— truce
fonte
Questa sembra la soluzione più elegante di tutte e l'unica che non duplica la logica del browser, il che è carino. Mi chiedo quanto sia portatile. C'è qualcosa nelle specifiche HTML che suggeriscono che questo è garantito per funzionare in tutti i browser?
— Matthijs Kooijman,
@MatthijsKooijman Dipende dall'interpretazione delle specifiche html. Se dici che un nome file di lunghezza 0 è un nome risorsa valido ... corrisponde a tutti i browser.
— Triste
Comprendi come sono fatti i browser. Hai un paio di programmatori, il desiderio (indiretto) di creare un browser. La loro prima fonte sono le specifiche html. Leggono le specifiche e questa è una delle domande che a loro piace davvero risolvere. Come pensi che (tutti) decidano su queste circostanze?
— Triste
-2

Dividi e unisciti all'URL:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
— concedi il sole
fonte
-4

Inserisci questo nella tua intestazione, quindi sarà disponibile ogni volta che ne avrai bisogno.

var base_url = "<?php echo base_url();?>";

Otterrai http://localhost:81/your-path-fileo http://localhost/your-path-file.

— Asrofil Al Banna
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.