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&amp;number=0

javascript jquery url venkatachalam
la source

1

vous pouvez également voir tech-blog.maddyzone.com/javascript/…

Rituraj ratan

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

1

doublon possible de Obtenir l'URL actuelle avec JavaScript?

vimal1083

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

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)

Ryan Doherty
la source

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.

Boris Guéry
la source

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>

rizon
la source

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

4

+1 jQuery est le meilleur code de qualité jamais créé, si vous ne l'utilisez pas, vous êtes un idiot. jQuery est définitivement la voie à suivre. </sarcasm>

Oriol

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

jlfenaux
la source

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 .

clawr
la source

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.

Neville Bonavia
la source

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

Gaurav
la source

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.

négutron
la source

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

28

Pour le nom d'hôte uniquement, utilisez:

window.location.hostname

Mahmoud Farahat
la source

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

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%[email protected]_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 (-_.!~*')
*/

Yash
la source

23

Cela fonctionnera également:

var currentURL = window.location.href;

Suresh Pattu
la source

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

dacopenhagen
la source

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

Riyaz Hameed
la source

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;

Nis
la source

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;

Aram Kocharyan
la source

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);

Développer l'extrait

Mohideen bin Mohammed
la source

11

 var currenturl = jQuery(location).attr('href');

hari maliya
la source

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

Costa
la source

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);
});

Peter Mortensen
la source

10

Les exemples suivants sont des extraits de code utiles qui peuvent être utilisés - certains exemples utilisent des fonctions JavaScript standard et ne sont pas spécifiques à jQuery:

Voir 8 extraits jQuery utiles pour les URL et les chaînes de requête .

Issamovitch
la source

10

Utilisez window.location.href . Cela vous donnera l' URL complète .

Saikumar Anireddy
la source

9

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

ZMR BINU
la source

9

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

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

Chuanshi Liu
la source

8

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

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

vikas mehta
la source

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

Nitish Kumar Pal
la source

8

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

Jonathan Lin
la source

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

Développer l'extrait

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>

Développer l'extrait

Sumesh TG
la source

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;

Hema Ganapathy
la source

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);

Ayan Chakraborty
la source

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

Maleen Abewardana
la source

Obtenir l'URL actuelle avec jQuery?

Réponses: