Obtenez l'URL actuelle avec JavaScript?

3003

Tout ce que je veux, c'est obtenir l'URL du site Web. Pas l'URL tirée d'un lien. Sur le chargement de la page, je dois pouvoir saisir l'URL complète et actuelle du site Web et la définir comme une variable à utiliser à ma guise.

javascript url Peter Mortensen
la source

2

Copie

1

stackoverflow.com/questions/406192/…

Nilesh Botre

3685

Utilisation:

window.location.href

Comme indiqué dans les commentaires, la ligne ci-dessous fonctionne, mais elle est bogue pour Firefox.

document.URL;

Voir URL de type DOMString, en lecture seule .

Peter Mortensen
la source

142

Dans Firefox 12, la document.URLpropriété ne se met pas à jour après un window.locationvers une ancre (#), alors que window.location.hrefoui. J'ai mis en place une démonstration en direct ici: jsfiddle.net/PxgKy Je n'ai testé aucune autre version de Firefox. Aucun problème d'utilisation document.URLn'a été détecté dans Chrome 20 et IE9.

Telmo Marques

88

vous pouvez également obtenir un hôte et un emplacement clair: window.location.hostetwindow.location.href.toString().split(window.location.host)[1]

ali youhannaei

8

et qu'est-ce qui se passe document.baseURIalors. Fondamentalement , il y a 3 façons d'obtenir url document.baseURI, document.URL, et location.

Muhammad Umer

20

-1: Si vous avez un cadre, une image ou un formulaire avec name="URL"alors cette propriété sera ombrée sur l' documentobjet et votre code se cassera. Dans ce cas, document.URLfera référence au nœud DOM à la place. Mieux vaut utiliser les propriétés de l'objet global comme dans window.location.href.

Roy Tinker

13

"window.location.href" pour la victoire

GabrielBB

662

Accès aux informations URL

JavaScript vous propose de nombreuses méthodes pour récupérer et modifier l'URL actuelle, qui s'affiche dans la barre d'adresse du navigateur. Toutes ces méthodes utilisent l' Locationobjet, qui est une propriété de l' Windowobjet. Vous pouvez créer un nouvel Locationobjet qui a l'URL actuelle comme suit:

var currentLocation = window.location;

Structure d'URL de base

<protocol>//<hostname>:<port>/<pathname><search><hash>

protocole: spécifie le nom du protocole à utiliser pour accéder à la ressource sur Internet. (HTTP (sans SSL) ou HTTPS (avec SSL))
nom d'hôte: le nom d'hôte spécifie l'hôte propriétaire de la ressource. Par exemple www.stackoverflow.com,. Un serveur fournit des services en utilisant le nom de l'hôte.
port: numéro de port utilisé pour reconnaître un processus spécifique auquel un message Internet ou autre réseau doit être transféré lorsqu'il arrive sur un serveur.
chemin: le chemin donne des informations sur la ressource spécifique de l'hôte à laquelle le client Web veut accéder. Par exemple /index.html,.
recherche: une chaîne de requête suit le composant de chemin d'accès et fournit une chaîne d'informations que la ressource peut utiliser à certaines fins (par exemple, comme paramètres pour une recherche ou comme données à traiter).
hachage: la partie d'ancrage d'une URL, comprend le signe de hachage (#).

Avec ces Locationpropriétés d'objet, vous pouvez accéder à tous ces composants URL et à ce qu'ils peuvent définir ou renvoyer:

href - l'URL entière
protocol - le protocole de l'URL
hôte - le nom d'hôte et le port de l'URL
hostname - le nom d'hôte de l'URL
port - le numéro de port que le serveur utilise pour l'URL
chemin - le nom de chemin de l'URL
recherche - la partie requête de l'URL
hachage - la partie d'ancrage de l'URL

J'espère que vous avez obtenu votre réponse ..

Nikhil Agrawal
la source

7

Ils ne sont pas « méthodes » de window.location, mais les propriétés, et nous avons ici un exemple : var stringPathName = window.location.pathname.

Peter Krauss du

@FabioC. Vous pouvez le supprimer par substring. Cependant, il peut être utile lorsque vous souhaitez utiliser pour rediriger document.location = "/page.html";redirige vers la page racinepage.html

FindOut_Quran

1

Cela répond à plus que la simple question posée. En fait, j'ai cherché il y a environ un mois un bon moyen d'obtenir une ou plusieurs parties spécifiques de la chaîne URL (je pense que c'était probablement la page actuelle que j'essayais d'obtenir), et même si d'autres questions étaient plus sur -cible, leurs réponses n'étaient pas aussi utiles et simples à cet effet que celle-ci.

Panzercrisis

1

Une suggestion rapide cependant: dans la structure d'URL de base décrite ci-dessus, il y a une place pour search, mais dans la liste des descriptions ci-dessous, cela s'appelle un query. Peut-être qu'ils peuvent être rapprochés ou que des explications supplémentaires peuvent être ajoutées.

Panzercrisis

1

Cela s'appelle «rechercher» et non «interroger»

Apollo Data

320

À utiliser window.locationpour l'accès en lecture et en écriture à l' objet de localisation associé à la trame actuelle. Si vous souhaitez simplement obtenir l'adresse sous forme de chaîne en lecture seule, vous pouvez utiliser document.URL, qui doit contenir la même valeur que window.location.href.

Christoph
la source

19

voir aussi stackoverflow.com/questions/2430936/…

Christoph

264

Obtient l'URL de la page actuelle:

window.location.href

Zanoni
la source

3

Notez que c'est l'emplacement de la fenêtre et non celui du document.

Gumbo

16

C'est la même chose. L'URL complète actuelle fait référence au chemin du document (adresse externe).

Zanoni

2

Est-il normalisé comme document.url? (Je veux dire quelque chose comme un document

W3C

documentest la racine de l'arborescence de documents définie par la spécification. windowest généralement équivalent, mais il pourrait ne pas être dans certaines circonstances étranges.

broinjc

57

OK, il est facile d' obtenir l' URL complète de la page actuelle en utilisant du JavaScript pur. Par exemple, essayez ce code sur cette page:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

La window.location.hrefpropriété renvoie l'URL de la page actuelle.

document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;

<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>

Développer l'extrait

Pas mal non plus de les mentionner également:

si vous avez besoin d'un chemin relatif, utilisez simplement window.location.pathname;
si vous souhaitez obtenir le nom d'hôte, vous pouvez utiliser window.location.hostname;
et si vous devez obtenir le protocole séparément, utilisez window.location.protocol
- En outre, si votre page a hashétiquette, vous pouvez l' obtenir comme: window.location.hash.

window.location.hrefGère donc tout en une fois ... en gros:

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

L'utilisation windown'est également pas nécessaire si elle est déjà dans la portée de la fenêtre ...

Donc, dans ce cas, vous pouvez utiliser:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Alireza
la source

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; n'est pas toujours vrai! window.location.pathname n'a pas de paramètres GET.

AssassiN

40

Pour obtenir le chemin, vous pouvez utiliser:

console.log('document.location', document.location.href);
console.log('location.pathname',  window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL

Développer l'extrait

Sangeet Shah
la source

35

Ouvrez Developer Tools , saisissez ce qui suit dans la console et appuyez sur Entrée .

window.location

Ex: Ci-dessous, la capture d'écran du résultat sur la page actuelle.

Prenez ce dont vous avez besoin d'ici. :)

tmh
la source

29

Utilisation: window.location.href.

Comme indiqué ci-dessus, document.URL ne se met pas à jour lors de la mise à jour window.location. Voir MDN .

Dorian
la source

21

Utilisez window.location.hrefpour obtenir l'URL complète.
Utilisez window.location.pathnamepour obtenir l'URL quittant l'hôte.

kishore
la source

4

window.location.pathname n'inclut pas la requête et le fragment de hachage

OMGPOP

17

Vous pouvez obtenir l'emplacement URL actuel avec une balise de hachage en utilisant:

JavaScript:

 // Using href
 var URL = window.location.href;

 // Using path
 var URL = window.location.pathname;

jQuery :

$(location).attr('href');

Bhaskar Bhatt
la source

10

var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

Le code ci-dessus peut également aider quelqu'un

Rohan Patil
la source

2

Vous avez appliqué .toLowerCase () à l'URL qui la modifie réellement. Certains serveurs sont sensibles à la casse, (linux, etc ...)

AnthonyVO

Vous devez utiliser verbeusement window.href. Ce code ne fonctionne que dans un contexte où cette fenêtre ===, mais cela pourrait ne pas toujours être le cas, surtout si quelqu'un a collé cette solution.

deadboy

Ce ne sont pas «certains» serveurs qui sont sensibles à la casse. Ce sont la plupart des serveurs. Je suis donc d'accord avec AnthonyVO: changer la casse de l'URL est une très mauvaise idée.

mivk

Vous ne pouvez pas toLowerCase () une URL en étant sûr de ne pas la casser !!! Si url l'est http://www.server.com/path/to/Script.php?option=A1B2C3, si le système de fichiers est sensible à la casse (Linux / Unix), il n'est pas nécessaire que Script.php et script.php soient identiques. Et même s'il n'est pas sensible à la casse (Windows, certains Mac OS), ce ?option=A1B2C3n'est pas la même chose ?option=a1b2c3, ni même ?Option=A1B2C3. Seul le serveur est insensible à la casse: www.server.com ou www.SeRvEr.cOm sont les mêmes.

FrancescoMM

8

Ajout d'un résultat pour une référence rapide

window.location;

 Location {href: "/programming/1034621/get-the-current-url-with-javascript",
 ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ, …}

document.location

  Location {href: "/programming/1034621/get-the-current-url-with-javascript", 
ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ
, …}

window.location.pathname

"/questions/1034621/get-the-current-url-with-javascript"

window.location.href

"/programming/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"

Hitesh Sahu
la source

7

Pour une URL complète avec des chaînes de requête:

document.location.toString().toLowerCase();

Pour l'URL hôte:

window.location

Syed Nasir Abbas
la source

11

Vous avez appliqué .toLowerCase () à l'URL qui la modifie réellement. Certains serveurs sont sensibles à la casse, (linux, etc ...)

AnthonyVO

Comme dit, vous ne pouvez pas toLowerCase () une URL en étant sûr de ne pas la casser !!! Si l'URL est server.com/path/to/Script.php?option=A1B2C3 , si le système de fichiers est sensible à la casse (Linux / Unix), il n'est pas nécessaire que Script.php et script.php soient identiques. Et même s'il n'est pas sensible à la casse (Windows, certains Mac OS),? Option = A1B2C3 n'est pas la même chose que? Option = a1b2c3, ou même? Option = A1B2C3. Seul le serveur est insensible à la casse: www.server.com ou www.SeRvEr.cOm sont les mêmes.

FrancescoMM

Merci AnthonyVO de l'avoir signalé. Nous pouvons utiliser uniquement document.location.toString () pour obtenir l'URL complète. toLowerCase () devait comparer comme indexOf dans votre script.

Syed Nasir Abbas

4

Dans jstl, nous pouvons accéder au chemin URL actuel en utilisant pageContext.request.contextPath. Si vous souhaitez effectuer un appel Ajax, utilisez l'URL suivante.

url = "${pageContext.request.contextPath}" + "/controller/path"

Exemple: Pour la page http://stackoverflow.com/posts/36577223cela donnera http://stackoverflow.com/controller/path.

Maleen Abewardana
la source

4

La façon d'obtenir l'objet de localisation actuel est window.location.

Comparez cela à document.location, qui à l'origine ne renvoyait que l'URL actuelle sous forme de chaîne. Probablement pour éviter toute confusion, a document.locationété remplacé par document.URL.

Et, tous les navigateurs modernes sont mappés document.locationà window.location.

En réalité, pour la sécurité entre navigateurs, vous devriez utiliser window.locationplutôt que document.location.

Josip Ivic
la source

3

Pour ceux qui veulent un objet URL réel, potentiellement pour un utilitaire qui prend les URL comme argument:

const url = new URL(window.location.href)

https://developer.mozilla.org/en-US/docs/Web/API/URL

Seph Reed
la source

3

La réponse de Nikhil Agrawal est excellente, ajoutant juste un petit exemple ici que vous pouvez faire dans la console pour voir les différents composants en action:

Si vous voulez que l'URL de base sans chemin ni paramètre de requête (par exemple pour effectuer des requêtes AJAX contre fonctionne sur les serveurs de développement / transfert ET de production), il window.location.originest préférable car il conserve le protocole ainsi que le port facultatif (dans le développement Django, vous pouvez parfois avoir un port non standard qui le casse si vous utilisez simplement le nom d'hôte, etc.)

Apollo Data
la source

0

   location.origin+location.pathname+location.search+location.hash;

زياد
la source

0

Vous pouvez obtenir le lien complet de la page actuelle location.href et pour obtenir le lien du contrôleur actuel, utilisez:

location.href.substring(0, location.href.lastIndexOf('/'));

Khaled Harby
la source

0

Obtenir l'URL actuelle avec JavaScript:

window.location.toString ();

window.location.href

Hasib Kamal
la source

0

si vous faites référence à un lien spécifique qui a un identifiant, ce code peut vous aider.

$(".disapprove").click(function(){
    var id = $(this).attr("id");

    $.ajax({
        url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
        type: "post",
        success:function()
        {
            alert("The Request has been Disapproved");
            window.location.replace("http://localhost/sample/page/"+id+"");
        }
    });
});

J'utilise ajax ici pour soumettre un identifiant et rediriger la page en utilisant window.location.replace . ajoutez simplement un attribut id=""comme indiqué.

curiosité
la source

0

Essayer

location+''

Afficher l'extrait de code

let url = location+'';

console.log(url);

Développer l'extrait

Kamil Kiełczewski
la source

-2

Tout d'abord, vérifiez que la page est complètement chargée dans

browser,window.location.toString();

window.location.href

puis appelez une fonction qui prend l'url, la variable URL et s'imprime sur la console,

$(window).load(function(){
   var url = window.location.href.toString();
   var URL = document.URL;
   var wayThreeUsingJQuery = $(location).attr('href');
   console.log(url);
   console.log(URL);
   console.log(wayThreeUsingJQuery );
});

Ashish Kamble
la source

Obtenez l'URL actuelle avec JavaScript?

Réponses: