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

javascript jquery url venkatachalam
fuente

1

puedes ver también tech-blog.maddyzone.com/javascript/…

Rituraj ratan

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

1

posible duplicado de Obtener URL actual con JavaScript?

vimal1083

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

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)

Ryan Doherty
fuente

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.

Boris Guéry
fuente

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>

rizon
fuente

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

44

+1 jQuery es el código de mejor calidad, si no lo usas eres un idiota. jQuery es definitivamente el camino a seguir. </sarcasm>

Oriol

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

jlfenaux
fuente

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 .

clawr
fuente

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.

Neville Bonavia
fuente

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

Gaurav
fuente

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.

negutron
fuente

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

28

Solo para el nombre de host, use:

window.location.hostname

Mahmoud Farahat
fuente

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

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

Yash
fuente

23

Esto también funcionará:

var currentURL = window.location.href;

Suresh Pattu
fuente

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

Dacopenhagen
fuente

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

Riyaz Hameed
fuente

13

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

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

Nis
fuente

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;

Aram Kocharyan
fuente

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

Expandir fragmento

Mohideen bin Mohammed
fuente

11

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

hari maliya
fuente

11

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

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

NB: solo funciona en el mismo dominio

Costa
fuente

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

Peter Mortensen
fuente

10

Los siguientes son ejemplos de fragmentos de código útiles que se pueden utilizar: algunos de los ejemplos utilizan funciones estándar de JavaScript y no son específicos de jQuery:

Consulte 8 Fragmentos de jQuery útiles para URL y Querystrings .

Issamovitch
fuente

10

Use window.location.href . Esto te dará la URL completa .

Saikumar Anireddy
fuente

9

window.location te dará la URL actual, y puedes extraer lo que quieras de ella ...

ZMR BINU
fuente

9

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

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

Chuanshi Liu
fuente

8

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

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

vikas mehta
fuente

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

Nitish Kumar Pal
fuente

8

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

Jonathan Lin
fuente

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

Expandir fragmento

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>

Expandir fragmento

Sumesh TG
fuente

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;

Hema Ganapathy
fuente

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

Ayan Chakraborty
fuente

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

Maleen Abewardana
fuente

Obtener URL actual con jQuery?

Respuestas: