Obtenir l'URL actuelle avec jQuery?


1830

J'utilise jQuery. Comment obtenir le chemin de l'URL actuelle et l'affecter à une variable?

Exemple d'URL:

http://localhost/menuname.de?foo=bar&number=0


4
Je pense que la question devrait être rétablie en demandant jQuery, car il y a une réponse à cela, indépendamment du fait que jQuery soit requis pour accomplir la tâche.
goodeye


3
@goodeye Non, il n'y a pas de moyen jQuery pour obtenir l'emplacement; à partir de l'outil de suivi des bogues jQuery: »Cela a peut-être fonctionné mais il n'a jamais été pris en charge ou documenté. Utilisez simplement document.location.href qui est plus rapide, plus simple et plus facile à comprendre. «En d'autres termes, certaines personnes ont utilisé jQuery pour obtenir l'emplacement, mais elles se sont appuyées sur un bogue plutôt que sur une fonctionnalité. Voir: bugs.jquery.com/ticket/7858
feeela

Réponses:


2520

Pour obtenir le chemin, vous pouvez utiliser:

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)

79
Propriétés de l'objet de localisation: developer.mozilla.org/en/DOM/window.location
bentford

100
Loin de le tuer, jQuery a donné à Javascript une nouvelle vie. Les nouveaux programmeurs C # / Java comprennent-ils les pointeurs? Non. En ont-ils besoin? Pas vraiment, les abstractions les plus récentes sont suffisamment puissantes pour que cela n'ait pas d'importance ..
chair

199
"Comment puis-je XYZ dans jQuery" et la réponse étant javascript simple est assez courante. Vous savez peut-être comment faire quelque chose en javascript simple; cependant, en raison des incohérences du navigateur, vous préférerez peut-être le faire de la manière "jQuery". Je me souviens de la pré-jQuery ou du framework, je vérifierais d'abord le navigateur, puis ferais ce que je voulais de quelques façons. Est-ce que jQuery tue tout simplement js ... oui, Dieu merci, mais cela le rend également utilisable.
Parris

9
cela ne fonctionne pas pour l'url complète. par exemple. pour " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 ", cela ne renverra que / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname obtient seulement l'URL dans le "?" et ne reçoit pas les paramètres de requête comme demandé dans la question.
johntrepreneur

816

En pur style jQuery:

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

L'objet de localisation a également d'autres propriétés, comme l'hôte, le hachage, le protocole et le nom de chemin.


52
Apparemment, l'utilisation de $ (location) dans jQuery n'est pas prise en charge et déconseillée: bugs.jquery.com/ticket/7858
Peter

10
@Peter Bug fermé comme non valide.
kevinji

21
@ mc10: La partie "invalide" s'applique à la demande de prise en charge de $ (location); cela ne doit PAS être utilisé.
Peter

6
Cette réponse n'est pas nécessaire, et la question et la réponse peuvent être mises à jour pour ne pas utiliser jquery. Les raisons peuvent être trouvées ici bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: Vous ne devriez pas pouvoir le faire .attr()sur place. (1) Ce n'est pas un élément, donc $(location)est au mieux ombragé, et (2) même si cela a fonctionné, vous devriez utiliser .prop()pour obtenir des propriétés. .attr()est pour les attributs HTML.
cHao

471
http://www.refulz.com:8082/index.php#tab2?foo=789

Property    Result
------------------------------------------
host        www.refulz.com:8082
hostname    www.refulz.com
port        8082
protocol    http:
pathname    index.php
href        http://www.refulz.com:8082/index.php#tab2
hash        #tab2
search      ?foo=789

var x = $(location).attr('<property>');

Cela ne fonctionnera que si vous avez jQuery. Par exemple:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

13
C'est la même explication que la précédente, mais avec tout l'élément de l'objet. Très bonne réponse.
Oskar Calvo

4
Devrait être à la /index.phpplace du index.phpchemin d'accès.
Andrea


2
Selon bugs.jquery.com/ticket/7858, cela ne fonctionne que par accident. En outre, attrest censé être utilisé uniquement sur les objets DOM, pour les choses qui peuvent être définies à l'aide d'attributs HTML.
MauganRa

69

Si vous avez besoin des paramètres de hachage présents dans l'URL, cela window.location.hrefpeut être un meilleur choix.

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

3
Si quelqu'un n'a besoin que d'une balise de hachage, il peut appeler window.location.href
Amit Patel

15
Je pense que @AmitPatel signifiewindow.location.hash
ptim

53

Vous voudrez utiliser l' window.locationobjet intégré de JavaScript .


3
cela ne retournera pas les articles après '?' en place.
Majid

@majidgeek fonctionne pour moi dans Firefox, Chrome et IE. Pouvez-vous fournir un cas de test de cette rupture?
Barney du

3
peut confirmer au moins dans la console qui window.location.pathnamene récupère rien après le?
worc

45

Ajoutez simplement cette fonction en JavaScript, et elle renverra le chemin absolu du chemin actuel.

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

J'espère que ça marche pour vous.


1
Cela m'a beaucoup aidé pour un script où j'avais paresseusement des URL de base codées en dur. Je préfère ne pas avoir le '/' à la racine et l'insérer dans le chemin, donc je viens de faire la deuxième lignevar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location est un objet en javascript. il renvoie les données suivantes

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

en jquery vous pouvez utiliser

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

1
qu'en est-il windo.location.origin?
Ali Sheikhpour

30

C'est une question plus compliquée que beaucoup ne le pensent. Plusieurs navigateurs prennent en charge les objets de localisation JavaScript intégrés et les paramètres / méthodes associés accessibles via window.locationou document.location. Cependant, différentes versions d'Internet Explorer (6,7) ne prennent pas en charge ces méthodes de la même manière, ( window.location.href? window.location.replace()Non prises en charge), vous devez donc y accéder différemment en écrivant du code conditionnel tout le temps pour tenir Internet Explorer à la main.

Donc, si jQuery est disponible et chargé, vous pouvez tout aussi bien utiliser jQuery (emplacement), comme les autres l'ont mentionné, car cela résout ces problèmes. Si toutefois, vous faites, pour un exemple, une redirection de géolocalisation côté client via JavaScript (c'est-à-dire en utilisant l'API Google Maps et des méthodes d'objet de localisation), vous ne voudrez peut-être pas charger la bibliothèque jQuery entière et écrire votre code conditionnel qui vérifie chaque version d'Internet Explorer / Firefox / etc.

Internet Explorer rend le chat de codage frontal malheureux, mais jQuery est une assiette de lait.


De plus: bugs.jquery.com/ticket/8138 . Dans la source jQuery 1.8.0, il y a un commentaire: // # 8138, IE peut lever une exception lors de l'accès // à un champ à partir de window.location si document.domain a été défini.
Jan Święcki


24

java-script fournit de nombreuses méthodes pour récupérer l'URL actuelle qui est affichée dans la barre d'adresse du navigateur.

URL de test:

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762
resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

Une fonction:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {

    fullAddress : function () {
        var addressBar = window.location.href;
        if ( addressBar != '' && addressBar != 'undefined') {
            webAddress[ 'href' ] = addressBar;
        }
    },
    protocol_identifier : function () { resourceAddress.fullAddress();

        protocol = window.location.protocol.replace(':', '');
        if ( protocol != '' && protocol != 'undefined') {
            webAddress[ 'protocol' ] = protocol;
        }
    },
    domain : function () {      resourceAddress.protocol_identifier();

        var domain = window.location.hostname;
        if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
            webAddress[ 'domain' ] = domain;
            var port = window.location.port;
            if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
                if(protocol == 'http') port = '80';
                if(protocol == 'https') port = '443';           
            }
            webAddress[ 'port' ] = port;
        }
    },
    pathname : function () {        resourceAddress.domain();

        var resourcePath = window.location.pathname;
        if ( resourcePath != '' && resourcePath != 'undefined') {
            webAddress[ 'resourcePath' ] = resourcePath;
        }
    },
    params : function () {      resourceAddress.pathname();

        var v_args = location.search.substring(1).split("&");

        if ( v_args != '' && v_args != 'undefined')
        for (var i = 0; i < v_args.length; i++) {
            var pair = v_args[i].split("=");

            if ( typeOfVar( pair ) === 'array' ) {
                param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
            }
        }
        webAddress[ 'params' ] = param_values;
    },
    hash : function () {        resourceAddress.params();

        var fragment = window.location.hash.substring(1);
        if ( fragment != '' && fragment != 'undefined')
            webAddress[ 'hash' ] = fragment;        
    }
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
  • protocole « Les navigateurs Web utilisent le protocole Internet en suivant certaines règles de communication entre les applications hébergées sur le Web et le client Web (navigateur). (http = 80 , https (SSL) = 443 , ftp = 21, etc.)

EX: avec des numéros de port par défaut

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Hôte est le nom donné à un point de terminaison (machine sur laquelle vit la ressource) sur Internet. www.stackoverflow.com - Adresse IP DNS d'une application (OR) localhost: 8080 - localhost

Les noms de domaine sont que vous enregistrez selon les règles et procédures de l'arborescence DNS (Domain Name System). Serveurs DNS d'une personne qui gère votre domaine avec une adresse IP à des fins d'adressage. Dans la hiérarchie des serveurs DNS, le nom racine d'un stackoverlfow.com est com.

gTLDs      - com « stackoverflow (OR) in « co « google

Système local, vous devez gérer les domaines qui ne sont pas PUBLICS dans les fichiers hôtes. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Le chemin donne des informations sur la ressource spécifique de l'hôte à laquelle le client Web veut accéder
  • (?) «Une requête facultative consiste à passer une séquence de paires attribut-valeur séparées par un délimiteur (&).
  • (#) «Un fragment facultatif est souvent un attribut id d'un élément spécifique, et les navigateurs Web feront défiler cet élément en vue.

Si le paramètre a une époque, ?date=1467708674 utilisez-le.

var epochDate = 1467708674; var date = new Date( epochDate );

URL entrez la description de l'image ici


URL d'authentification avec nom d'utilisateur: mot de passe, si usernaem / mot de passe contient un symbole @
comme:

Username = `my_email@gmail`
Password = `Yash@777`

alors vous devez encoder l'URL en @tant que %40. Référer...

http://my_email%40gmail.com:Yash%40777@www.my_site.com

encodeURI()(vs) encodeURIComponent()exemple

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/

23

Cela fonctionnera également:

var currentURL = window.location.href;

Cela donne l'URL complète que la plupart des gens recherchent.
Kemal

19

Vous pouvez vous connecter à window.location et voir toutes les options, pour l'utilisation de l'URL uniquement:

window.location.origin

pour toute l'utilisation du chemin:

window.location.href

il y a aussi un emplacement. _ _

.host
.hostname
.protocol
.pathname

Ne devrait pas l'utiliser car location.origin ne fonctionne pas dans Internet Explorer
Jacek Kolasa

15

Cela renverra l' URL absolue de la page actuelle à l'aide de JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

S'il y a quelqu'un qui veut concaténer l' URL et la balise de hachage, combinez deux fonctions:

var pathname = window.location.pathname + document.location.hash;

Pour clarifier: vous n'avez pas du tout besoin d'utiliser jQuery, la fonction javascript ci-dessus retournera ce que l'OP demandait?
GHC

12

J'ai ceci pour supprimer les variables GET.

var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;

12

Vous pouvez simplement obtenir votre chemin en utilisant js lui-même, window.locationou locationvous donnera l'objet de l'URL actuelle

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);



11

Pour obtenir l'URL de la fenêtre parent à partir d'un iframe:

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

NB: ne fonctionne que sur le même domaine


11

Voici un exemple pour obtenir l'URL actuelle à l'aide de jQuery et JavaScript:

$(document).ready(function() {

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

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});



9

window.location vous donnera l' URL actuelle, et vous pourrez en extraire ce que vous voulez ...


9

Voir purl.js . Cela va vraiment aider et peut également être utilisé, selon jQuery. Utilisez-le comme ceci:

$.url().param("yourparam");

8

Si vous souhaitez obtenir le chemin du site racine, utilisez ceci:

$(location).attr('href').replace($(location).attr('pathname'),'');

1
n'est-ce pas .replace('#.*', '')? Supprimer non seulement la marque de hachage mais tout ce qui se trouve après?
Jonas Kölker

8

Les 3 premiers très couramment utilisés sont

1. window.location.hostname 
2. window.location.href
3. window.location.pathname

8

var path = location.pathnamerenvoie le chemin de l'URL actuelle (jQuery n'est pas nécessaire). L'utilisation de window.locationest facultative.


8

Tous les navigateurs prennent en charge l'objet fenêtre Javascript. Il définit la fenêtre du navigateur.

Les objets et fonctions globaux font automatiquement partie de l'objet fenêtre.

Toutes les variables globales sont des propriétés d'objets fenêtre et toutes les fonctions globales sont ses méthodes.

L'ensemble du document HTML est également une propriété de fenêtre.

Vous pouvez donc utiliser l'objet window.location pour obtenir tous les attributs liés à l'url.

Javascript

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1
Je vois location.pathnameoù vous utilisez location.path- cette réponse doit-elle être mise à jour?
Edward

@Edward Mis à jour
Sumesh TG

7
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

2
vous devez ajouter quelques explications sur votre réponse.
Raptor

5
// get current URL

$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);

4

Dans jstl, nous pouvons accéder au chemin de l'URL en utilisant pageContext.request.contextPath, si vous voulez faire un appel ajax,

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

Ex: dans la page http://stackoverflow.com/questions/406192cela donnerahttp://stackoverflow.com/controller/path

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.