Comment obtenir l'URL de base avec jquery ou javascript?

152

Dans joomla php, je peux utiliser $this->baseurlpour obtenir le chemin de base, mais je voulais obtenir le chemin de base dans jquery.

Le chemin de base peut être l'un des exemples suivants:

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

Le examplepeut également changer.

javascript jquery Navin Rauniyar
la source
duplication possible de Comment obtenir le chemin de base dans jQuery?
Mritunjay
@Mritunjay J'ai déjà vu cela, mais dans mon cas, le chemin de base est différent car je souhaitais obtenir le chemin de base comme en php que nous faisons dans joomla
Navin Rauniyar
Alors, aucune des réponses n'a résolu votre problème?
Artjom B.
choisissez une réponse, s'il vous plaît?
allanberry

Réponses:

177

Celui-ci vous aidera ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
Jenish
la source
Oui cela fonctionne! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)
vee le
3
Cela ne fonctionnera pas dans tous les cas, comme indiqué par la réponse sous-notée de @Artjom B.Par exemple, lorsqu'un site est testé sur le réseau local (et que le domaine est remplacé par IP + chemin local), l'URL de base pourrait être quelque chose comme 192.168.0.23/~sites/site/html/au lieu de site.dev. Obtenir le chemin complet avec Javascript n'est pas non plus une option, car un site peut avoir n'importe quel nombre de sous-répertoires virtuels.
certainementakey
124

Je pense que ça ira pour toi

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
Haris
la source
7
Joli court et doux, merci. window.location.origin
TetraDev
1
cela devrait être la réponse préférée, car elle est courte, concise et fonctionne bien.
Gregor
window.location.origin n'est pas défini dans ie9
jnoreiga
1
@jnoreiga Qui utilise encore ie9 ツ
Alexandre Daubricourt
2
J'aurais aimé que ce soit aussi simple que ça @AlexandreDaubricourt
jnoreiga
30

Cela obtiendra l'URL de base

var baseurl = window.location.origin+window.location.pathname;
Zaheer Babar
la source
c'est la même chose que window.location.href
Z. Khullah
8
ce n'est pas la même chose, pathname vous donne le segment de chemin de l'url, href contient également les paramètres de requête
dschulten
24

C'est une question extrêmement ancienne, mais voici les approches que j'utilise personnellement ...

Obtenir l'URL standard / de base

Comme beaucoup l'ont déjà dit, cela fonctionne dans la plupart des situations.

var url = window.location.origin;


Obtenir l'URL de base absolue

Cependant, cette approche simple peut être utilisée pour supprimer tout numéro de port. 

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

Edit: Pour répondre au problème, posé par Jason Rice , ce qui suit peut être utilisé pour insérer automatiquement le type de protocole correct ...

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


Définir l'URL de base

En prime, l'URL de base peut ensuite être redéfinie globalement. 

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
Dustin Halstead
la source
1
À moins que votre protocole ne soit autre que http comme https (alors définir le protocole url sur "http: //" présentera des erreurs vraiment étranges en fonction de la façon dont vous souhaitez utiliser l'url).
Jason Rice
13

Ce n'est pas possible à partir de javascript, car il s'agit d'une propriété côté serveur. Javascript sur le client ne peut pas savoir où joomla est installé. La meilleure option est d'inclure d'une manière ou d'une autre la valeur de $this->baseurldans la page javascript, puis d'utiliser cette valeur ( phpBaseUrl).

Vous pouvez ensuite créer l'URL comme ceci:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
Artjom B.
la source
1
Notez que loc.hostle port, pour une URL comme http://localhost:8082/cette méthode produira http://localhost:8082:8082/, window.location.hostnamedoit être utilisé à la place.
Tiberiu C.
@TiberiuC. Merci, ajouté.
Artjom B.
9

J'ai eu le même problème il y a quelque temps, mon problème était que j'avais simplement besoin de l'URL de base. Il y a beaucoup d'options détaillées ici, mais pour contourner cela, utilisez simplement l' window.locationobjet. En fait, tapez ceci dans la console du navigateur et appuyez sur Entrée pour sélectionner vos options. Eh bien pour mon cas, c'était simplement: 

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

Mais vous ne pouvez pas dire que le baseurl () de CodeIgniter (ou php joomla) retournera la même valeur, car il est possible de changer le baseurl dans le fichier .htaccess de ces frameworks.

Par exemple :

Si vous avez un fichier .htaccess comme celui-ci dans votre hôte local:

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]

Le $ this-> baseurl () renverra http: // localhost / CodeIgniter /

AKHIL KUMAR
la source
6

J'ai rencontré ce besoin sur plusieurs projets Joomla. Le moyen le plus simple que j'ai trouvé pour traiter est d'ajouter un champ de saisie masqué à mon modèle:

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

Quand j'ai besoin de la valeur en JavaScript:

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

Pas aussi sophistiqué que d'utiliser du JavaScript pur mais simple et fait le travail.

Brian Bolli
la source
6

le moyen le plus simple d'obtenir l'URL de base dans jQuery

window.location.origin
Qaisar Malik
la source
Ce n'est en fait pas jQuery. jQuery ressemble à ceci: $ (emplacement) .attr ("origine");
Mauritz Hansen
3

Je recommanderais à tout le monde de créer une balise de base HTML en développement, puis d'attribuer le href dynamiquement, donc en production quel que soit l'hôte utilisé par un client, il s'y ajoutera automatiquement:

<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>
 ...

Donc si vous êtes dans localhot: 8080, vous accéderez à chaque fichier lié ou référencé depuis la base, par exemple: http://localhost:8080/some/path/file.html Si vous êtes dans www.example.com, ce serahttp://www.example.com/some/path/file.html

Notez également que, à chaque emplacement sur lequel vous vous trouvez, vous ne devez pas utiliser de références comme les globs dans hrefs, par exemple: L'emplacement parent http://localhost:8080/ne cause pas http://localhost:8080/some/path/.

Prétendez que vous référencez tous les liens hypertexte comme condamnés complets sans l'URL bas.

cagcak
la source
3

Le format est nom d'hôte / chemin / recherche

Donc, l'URL est: 

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

Pour votre cas 

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

Donc, fondamentalement, le baseurl = hostname = window.location.hostname

Md. Khirul Islam Omi
la source
3

Je suis surpris qu'aucune des réponses ne considère l'URL de base si elle était définie dans <base>tag. Toutes les réponses actuelles tentent d'obtenir le nom d'hôte ou le nom du serveur ou la première partie de l'adresse. C'est la logique complète qui considère également la <base>balise (qui peut faire référence à un autre domaine ou protocole):

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

Format Jquery:

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

Sans s'impliquer dans la logique ci-dessus, la solution abrégée qui considère à la fois <base>tag et window.location.origin:

Js:

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

Jquery:

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

Note finale: pour un fichier local sur votre ordinateur (pas sur un hôte), le window.location.originseul retourne le file://mais la solution de tri ci-dessus renvoie le chemin complet correct.

Ali Sheikhpour
la source
1
Ce n'est pas la meilleure façon. Voir également la réponse de @ DaniilSamoylov, qui intègre l' <base>élément.
Brad
baseURI renvoie l'URL de base d'un nœud donc dans ce cas, elle renvoie le chemin de base + le nom du document. vous aurez besoin de plus de codes pour supprimer le nom du document de cette URL. @Brad
Ali Sheikhpour
Cette solution ne pas rendre l'URL de base correcte lorsque le répertoire racine de la page Web se trouve dans un sous - répertoire (par exemple example.com/appRoot ). Cela ne fonctionne que lorsque le répertoire racine de la page Web est directement situé à la racine de l'hôte Web.
Michael Hafner
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

presque la même que la réponse de Jenish mais un peu plus courte.

Mateen
la source
2

J'étais juste sur la même scène et cette solution fonctionne pour moi

Dans la vue

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

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

Dans le fichier js, vous accédez en basetant que variable par exemple dans votre scénario:

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

Je ne me souviens pas où je prends cette information pour donner crédit, si je la trouve, je modifierai la réponse

Mario
la source
1 
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
vikas Chaturvedi
la source
1
Veuillez envisager d'ajouter une description à votre réponse.
Capricorne
1

Voici quelque chose de rapide qui fonctionne également avec les file://URL.

Je suis venu avec ce 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
la source
0

Vous avez mentionné que le example.compeut changer, donc je soupçonne qu'en fait vous avez besoin de l'URL de base juste pour pouvoir utiliser la notation de chemin relatif pour vos scripts. Dans ce cas particulier, il n'est pas nécessaire d'utiliser le script - ajoutez plutôt la balise de base à votre en-tête:

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

Je génère généralement le lien via PHP.

Hexode
la source
0

Au cas où quelqu'un voudrait voir cela divisé en une fonction très robuste

    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
la source
Cela donne juste l'URL entière. Pas une URL de base.
Sam
en fait, je ne sais pas où j'allais avec cela. Je suis depuis longtemps passé à la configuration avec le code côté serveur
nuander
0

Facile 

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

Génère une image avec un nom src vide force le navigateur à calculer l'URL de base par lui-même, peu importe si vous avez /index.htmlou quoi que ce soit d'autre.

Sinistre
la source
Cela semble la solution la plus élégante de toutes et la seule qui ne duplique pas la logique du navigateur, ce qui est bien. Je me demande à quel point il est portable. Y a-t-il quelque chose dans les spécifications HTML suggérant que cela fonctionne dans tous les navigateurs?
Matthijs Kooijman
@MatthijsKooijman Dépend de l'interprétation des spécifications html. Si vous dites qu'un nom de fichier de longueur 0 est un nom de ressource valide ... il correspond à tous les navigateurs.
Grim
Comprenez comment les navigateurs sont créés. Vous avez un couple de programmeurs, le souhait (indirect) de construire un navigateur. Leur première source est les spécifications html. Ils lisent les spécifications et c'est l'une des questions qu'ils aiment vraiment résoudre. Comment penseriez-vous qu'ils (tous) décident de ces circonstances?
Grim
-2

Divisez et rejoignez l'URL:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
accorder le soleil
la source
-4

Mettez-le dans votre en-tête, il sera donc disponible chaque fois que vous en aurez besoin.

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

Vous obtiendrez http://localhost:81/your-path-fileou http://localhost/your-path-file.

Asrofil Al Banna
la source