Obtener URL actual con jQuery?


1830

Estoy usando jQuery. ¿Cómo obtengo la ruta de la URL actual y la asigno a una variable?

URL de ejemplo:

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


44
Creo que la pregunta debería restaurarse a pedir jQuery, ya que hay una respuesta para eso, independientemente de si se requiere jQuery para realizar la tarea.
goodeye


3
@goodeye No, no hay una forma jQuery para obtener la ubicación; a partir del rastreador de errores jQuery: »Puede que haya funcionado pero nunca fue compatible o documentado. Simplemente use document.location.href, que es más rápido, más simple y más fácil de entender. «En otras palabras, algunas personas usaron jQuery para obtener la ubicación, pero confiaron en un error, en lugar de en la función. Ver: bugs.jquery.com/ticket/7858
feeela

Respuestas:


2520

Para obtener el camino, puede usar:

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
Propiedades del objeto de ubicación: developer.mozilla.org/en/DOM/window.location
bentford

100
Lejos de matarlo, jQuery le ha dado a Javascript una nueva vida. ¿Los nuevos programadores de C # / Java entienden los punteros? No. ¿Necesitan hacerlo? En realidad no, nuevas abstracciones son lo suficientemente potentes como para que no importa ..
carne

199
"¿Cómo hago XYZ en jQuery?" Y la respuesta es simple JavaScript es bastante común. Es posible que sepa cómo hacer algo en JavaScript simple; sin embargo, debido a las inconsistencias del navegador, puede preferir hacerlo de la manera "jQuery". Recuerdo que antes de jQuery o framework primero revisaba el navegador y luego hacía lo que quería de varias maneras. Entonces, jQuery está matando a los simples js ... sí, gracias a Dios, pero también lo está haciendo utilizable.
Parris

99
esto no funciona para la url completa. por ejemplo. para " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " esto solo devolverá / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname solo obtiene la URL en "?" y no obtiene los parámetros de consulta como se preguntó en la pregunta.
johntrepreneur

816

En puro estilo jQuery:

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

El objeto de ubicación también tiene otras propiedades, como host, hash, protocolo y ruta.


52
Aparentemente, el uso de $ (ubicación) en jQuery no es compatible y se desaconseja: bugs.jquery.com/ticket/7858
Peter

10
@Peter Bug cerrado como no válido.
kevinji

21
@ mc10: la parte "no válida" se aplica a la solicitud para admitir $ (ubicación); esto NO debe ser usado.
Peter

66
Esta respuesta no es necesaria, y la pregunta y la respuesta se pueden actualizar para no usar jquery. Las razones se pueden encontrar aquí bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: No deberías poder hacerlo .attr()en el lugar. (1) No es un elemento, por lo que $(location)es sombrío en el mejor de los casos, y (2) incluso si funcionó, debería usarlo .prop()para obtener propiedades. .attr()es para atributos 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>');

Esto funcionará solo si tienes jQuery. Por ejemplo:

<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
Es la misma explicación que la anterior, pero con todos los elementos del objeto. Gran respuesta.
Oskar Calvo

44
Debería ser en /index.phplugar de index.phppara el nombre de ruta.
Andrea


2
Según bugs.jquery.com/ticket/7858, esto funciona solo por accidente. Además, attrse supone que solo se debe usar en objetos DOM, para cosas que se pueden establecer mediante el uso de atributos HTML.
MauganRa

69

Si necesita los parámetros hash presentes en la URL, window.location.hrefpuede ser una mejor opción.

window.location.pathname
=> /search

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

3
Si alguien necesita solo una etiqueta hash que puede llamar a window.location.href
Amit Patel

15
Creo que @AmitPatel significawindow.location.hash
ptim

53

Querrás usar el window.locationobjeto incorporado de JavaScript .


3
esto no devolverá artículos después de '?' en ubicacion.
Majid

@majidgeek funciona para mí en Firefox, Chrome e IE. ¿Puede proporcionar un caso de prueba de esta ruptura?
Barney

3
puede confirmar al menos en la consola que window.location.pathnameno recupera nada después del?
worc

45

Simplemente agregue esta función en JavaScript, y devolverá la ruta absoluta de la ruta actual.

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

Espero que te funcione.


1
Esto ayudó mucho para un script donde perezosamente tenía algunas URL base codificadas. Prefiero no tener el '/' final en la raíz e insertarlo en la ruta, así que acabo de hacer la segunda líneavar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location es un objeto en javascript. devuelve los siguientes datos

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 puedes usar

$(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é pasa windo.location.origin?
Ali Sheikhpour

30

Este es un tema más complicado de lo que muchos piensan. Varios navegadores admiten objetos de ubicación de JavaScript incorporados y parámetros / métodos asociados accesibles a través de window.locationo document.location. Sin embargo, los diferentes tipos de Internet Explorer (6,7) no son compatibles con estos métodos de la misma manera, ( window.location.href? window.location.replace()No es compatible), por lo que debe acceder a ellos de manera diferente escribiendo código condicional todo el tiempo para sostener Internet Explorer.

Entonces, si tiene jQuery disponible y cargado, también podría usar jQuery (ubicación), como lo mencionaron los demás porque resuelve estos problemas. Sin embargo, si está haciendo, por ejemplo, una redirección de geolocalización del lado del cliente a través de JavaScript (es decir, utilizando la API de Google Maps y métodos de objeto de ubicación), entonces es posible que no desee cargar toda la biblioteca jQuery y escribir su código condicional que comprueba todas las versiones de Internet Explorer / Firefox / etc.

Internet Explorer hace que el gato de codificación front-end sea infeliz, pero jQuery es un plato de leche.


Adicional: bugs.jquery.com/ticket/8138 . En la fuente jQuery 1.8.0 hay un comentario: // # 8138, IE puede lanzar una excepción al acceder // a un campo desde window.location si se ha establecido document.domain.
Jan Święcki


24

Java Script proporciona muchos métodos para recuperar la URL actual que se muestra en la barra de direcciones del navegador.

URL de prueba:

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

Función:

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();
}
  • protocolo « Los navegadores web utilizan el protocolo de Internet siguiendo algunas reglas para la comunicación entre las aplicaciones alojadas en la web y el cliente web (navegador). (http = 80 , https (SSL) = 443 , ftp = 21, etc.)

EX: con números de puerto predeterminados

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host es el nombre dado a un punto final (máquina en la que vive el recurso) en Internet. www.stackoverflow.com - Dirección IP DNS de una aplicación (OR) localhost: 8080 - localhost

Los nombres de dominio son los que usted registra según las reglas y procedimientos del árbol del Sistema de nombres de dominio (DNS). Servidores DNS de alguien que administra su dominio con dirección IP para fines de direccionamiento. En la jerarquía del servidor DNS, el nombre raíz de un stackoverlfow.com es com.

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

Para el sistema local, debe mantener dominios que no sean PÚBLICOS en los archivos de host. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «La ruta proporciona información sobre el recurso específico dentro del host al que el cliente web quiere acceder
  • (?) «Una consulta opcional es pasar una secuencia de pares de atributo-valor separados por un delimitador (&).
  • (#) «Un fragmento opcional es a menudo un atributo de identificación de un elemento específico, y los navegadores web mostrarán este elemento a la vista.

Si el parámetro tiene una Época ?date=1467708674 , úselo .

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

URL ingrese la descripción de la imagen aquí


URL de autenticación con nombre de usuario: contraseña, si usernaem / password contiene el símbolo @
como:

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

entonces necesita codificar URL @como %40. Referir...

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

encodeURI()(vs) encodeURIComponent()ejemplo

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

Esto también funcionará:

var currentURL = window.location.href;

Esto proporciona la URL completa que busca la mayoría de las personas.
Kemal

19

Puede registrar window.location y ver todas las opciones, solo para el uso de URL:

window.location.origin

para todo el camino use:

window.location.href

También hay ubicación. _ _

.host
.hostname
.protocol
.pathname

No debería usarlo porque location.origin no funciona en Internet Explorer
Jacek Kolasa

15

Esto devolverá la URL absoluta de la página actual usando JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Si hay alguien que quiere concatenar la URL y la etiqueta hash, combine dos funciones:

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

Para aclarar: no necesita usar jQuery, ¿la función de JavaScript anterior devolverá lo que pedía el OP?
GHC

12

Tengo esto para eliminar las variables GET.

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

12

Simplemente puede obtener su ruta utilizando el propio js, window.locationo locationle dará el objeto de la URL actual

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



11

Para obtener la URL de la ventana principal desde un iframe:

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

NB: solo funciona en el mismo dominio


11

Aquí hay un ejemplo para obtener la URL actual usando jQuery y 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 te dará la URL actual, y puedes extraer lo que quieras de ella ...


9

Ver purl.js . Esto realmente ayudará y también se puede usar, dependiendo de jQuery. Úselo así:

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

8

Si desea obtener la ruta del sitio raíz, use esto:

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

1
no sería eso .replace('#.*', '')? ¿Eliminar no solo la marca hash sino también todo lo que está después?
Jonas Kölker

8

Los 3 principales más utilizados son

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

8

var path = location.pathnamedevuelve la ruta de la URL actual (no se necesita jQuery). El uso de window.locationes opcional.


8

Todos los navegadores admiten objetos de ventana de Javascript. Define la ventana del navegador.

Los objetos y funciones globales pasan a formar parte del objeto de ventana automáticamente.

Todas las variables globales son propiedades de objetos de ventana y todas las funciones globales son sus métodos.

Todo el documento HTML también es una propiedad de ventana.

Por lo tanto, puede usar el objeto window.location para obtener todos los atributos relacionados con la 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
Estoy viendo location.pathnamedónde está usando location.path. ¿Es necesario actualizar esta respuesta?
Edward

@Edward actualizado
Sumesh TG el

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

2
debe agregar alguna explicación a su respuesta.
Raptor

5
// get current URL

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

4

En jstl podemos acceder a la ruta de url actual usando pageContext.request.contextPath, si desea hacer una llamada ajax,

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

Ej: en la página http://stackoverflow.com/questions/406192esto le daráhttp://stackoverflow.com/controller/path

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.