¿Obtener la URL actual con JavaScript?

3317

Todo lo que quiero es obtener la URL del sitio web. No la URL extraída de un enlace. En la carga de la página, necesito poder tomar la URL completa y actual del sitio web y configurarla como una variable para hacer lo que quiera.

2
4044

Usar:

window.location.href

Como se señaló en los comentarios, la línea a continuación funciona, pero tiene errores para Firefox.

document.URL

Consulte la URL de tipo DOMString, solo lectura .

11
  • 150
    En Firefox 12, la document.URLpropiedad no se actualiza después window.locationde un ancla (#), mientras que window.location.hrefsí. No probé ninguna otra versión de Firefox. No document.URLse encontraron problemas de uso en Chrome 20 e IE9. 07/07/12 a las 16:26
  • 97
    también puede obtener el host y la ubicación clara: window.location.hostywindow.location.href.toString().split(window.location.host)[1]
    Ali U
    26/11/12 a las 11:59
  • 10
    y qué document.baseURIpasa entonces. Básicamente hay 3 formas de obtener url document.baseURI, document.URL, y location. 29 de agosto de 2013 a las 12:06
  • 22
    -1: Si tiene un marco, una imagen o un formulario con name="URL", esta propiedad se sombreará en el documentobjeto y su código se romperá. En ese caso, document.URLse referirá al nodo DOM. Es mejor usar las propiedades del objeto global como en window.location.href. 5 de diciembre de 2013 a las 0:02
  • 15
    "window.location.href" para ganar 11/07/2014 a las 12:31
765

Acceso a la información de URL

JavaScript le proporciona muchos métodos para recuperar y cambiar la URL actual, que se muestra en la barra de direcciones del navegador. Todos estos métodos utilizan el Locationobjeto, que es una propiedad del Windowobjeto. Puede crear un nuevo Locationobjeto que tenga la URL actual de la siguiente manera:

var currentLocation = window.location;

Estructura básica de la URL

<protocol>//<hostname>:<port>/<pathname><search><hash>
  • protocolo: especifica el nombre del protocolo que se utilizará para acceder al recurso en Internet. (HTTP (sin SSL) o HTTPS (con SSL))

  • nombre de host: el nombre de host especifica el host que posee el recurso. Por ejemplo www.stackoverflow.com,. Un servidor proporciona servicios utilizando el nombre del host.

  • puerto: un número de puerto que se utiliza para reconocer un proceso específico al que se reenviará un mensaje de Internet u otro mensaje de red cuando llegue a un servidor.

  • nombre de ruta: la ruta proporciona información sobre el recurso específico dentro del host al que el cliente web desea acceder. Por ejemplo /index.html,.

  • búsqueda: una cadena de consulta sigue al componente de ruta y proporciona una cadena de información que el recurso puede utilizar para algún propósito (por ejemplo, como parámetros para una búsqueda o como datos para procesar).

  • hash: la parte de anclaje de una URL, incluye el signo de almohadilla (#).

Con estas Locationpropiedades de objeto, puede acceder a todos estos componentes de URL y lo que pueden establecer o devolver:

  • href : la URL completa
  • protocolo : el protocolo de la URL
  • host : el nombre de host y el puerto de la URL
  • nombre de host : el nombre de host de la URL
  • puerto : el número de puerto que el servidor usa para la URL
  • nombre de ruta : el nombre de la ruta de la URL
  • búsqueda : la parte de consulta de la URL
  • hash : la parte de anclaje de la URL

Espero que tengas tu respuesta.

8
  • 13
    Ellos no son "métodos" de window.location, pero las propiedades, y aquí tenemos un ejemplo : var stringPathName = window.location.pathname. 22/07/14 a las 22:18
  • 1
    @FabioC. Puede eliminarlo por substring. Sin embargo, puede ser útil cuando desee utilizar para redireccionar document.location = "/page.html";se redirigirá a la página raíz.page.html 23/12/2016 a las 5:11
  • 5
    Esto responde a algo más que a la pregunta planteada. De hecho, busqué probablemente hace un mes una buena manera de obtener una o más partes específicas de la cadena de URL (creo que probablemente era la página actual que estaba tratando de obtener), y aunque otras preguntas estaban más en -objetivo, sus respuestas no fueron tan útiles y sencillas para ese propósito como este. 7 de ene. De 2019 a las 7:10
  • 2
    Sin embargo, una sugerencia rápida: en la estructura básica de URL descrita anteriormente, hay un lugar para search, pero en la lista de descripciones a continuación, se llama query. Quizás se puedan reconciliar o se puedan agregar más explicaciones. 7 de enero de 2019 a las 7:11
  • 2
    Se llama "búsqueda", no "consulta". 27/12/19 a las 17:01
333

Úselo window.locationpara acceso de lectura y escritura al objeto de ubicación asociado con el marco actual. Si solo desea obtener la dirección como una cadena de solo lectura, puede usar document.URL, que debe contener el mismo valor que window.location.href.

1
274

Obtiene la URL de la página actual:

window.location.href
4
  • 3
    Tenga en cuenta que esa es la ubicación de la ventana, no la del documento.
    Gumbo
    23/06/09 a las 19:32
  • dieciséis
    Es lo mismo. La URL actual completa se refiere a la ruta del documento (dirección externa).
    Zanoni
    23/06/09 a las 19:34
  • 2
    ¿Está estandarizado como document.url? (Me refiero a algo como un documento w3c) 23/06/09 a las 19:47
  • documentes la raíz del árbol de documentos definido por la especificación. windowes generalmente equivalente, pero puede que no lo sea en algunas circunstancias extrañas.
    broinjc
    19 de septiembre de 2014 a las 16:19
75

De acuerdo, obtener la URL completa de la página actual es fácil usando JavaScript puro. Por ejemplo, pruebe este código en esta página:

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

The window.location.href property returns the URL of the current page.

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>

No está mal mencionar estos también:

  • si necesita una ruta relativa, simplemente use window.location.pathname;

  • si desea obtener el nombre de host, puede usar window.location.hostname;

  • y si necesita obtener el protocolo por separado, use window.location.protocol

    • También, si su página tiene hashetiqueta, puede conseguirlo como: window.location.hash.

Entonces window.location.hrefmaneja todo en una vez ... básicamente:

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

Además, el uso windowno es necesario si ya está en el alcance de la ventana ...

Entonces, en ese caso, puede usar:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Obtener la URL actual con JavaScript

0
45

Para obtener la ruta, puede usar:

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
42

Abra Developer Tools , escriba lo siguiente en la consola y presione Enter .

window.location

Ej .: A continuación se muestra la captura de pantalla del resultado en la página actual.

ingrese la descripción de la imagen aquí

Coge lo que necesites de aquí. :)

30

Uso: window.location.href.

Como se señaló anteriormente, document.URL no se actualiza al actualizar window.location. Ver MDN .

24
  • Úselo window.location.hrefpara obtener la URL completa.
  • Úselo window.location.pathnamepara obtener la URL que sale del host.
1
  • 5
    window.location.pathname no incluye la consulta ni el fragmento hash
    OMGPOP
    29/06/15 a las 7:53
18

Puede obtener la ubicación de la URL actual con una etiqueta hash utilizando:

JavaScript:

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

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

jQuery :

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

El código anterior también puede ayudar a alguien

4
  • 2
    Aplicó .toLowerCase () a la URL que realmente lo cambia. Algunos servidores distinguen entre mayúsculas y minúsculas (linux, etc.) 15 de mayo de 2015 a las 23:33
  • Debería utilizar de forma prolija window.href. Este código solo funciona en un contexto donde esta ventana ===, sin embargo, ese no siempre es el caso, especialmente si alguien pegó esta solución.
    deadboy
    29 de mayo de 2015 a las 16:01
  • No son "algunos" servidores los que distinguen entre mayúsculas y minúsculas. Son la MAYORÍA de los servidores. Entonces estoy de acuerdo con AnthonyVO: cambiar el caso de la URL es una muy mala idea.
    mivk
    11/06/2015 a las 17:47
  • ¡¡¡No puedes toLowerCase () una URL asegurándote de no romperla !!! Si la URL lo es http://www.server.com/path/to/Script.php?option=A1B2C3, si el sistema de archivos distingue entre mayúsculas y minúsculas (Linux / Unix) no es necesario, Script.php y script.php son iguales. E incluso si no distingue entre mayúsculas y minúsculas (Windows, algunos Mac Os), ?option=A1B2C3no es lo mismo ?option=a1b2c3, ni siquiera ?Option=A1B2C3. Solo el servidor no distingue entre mayúsculas y minúsculas: www.server.com o www.SeRvEr.cOm son iguales. 9 de septiembre de 2016 a las 7:03
9

Agregar resultado para referencia rápida

window.location;

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

document.location

  Location {href: "https://stackoverflow.com/questions/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

"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"
8

Para URL completa con cadenas de consulta:

document.location.toString()

Para URL de host:

window.location
0
7

Para aquellos que desean un objeto URL real, potencialmente para una utilidad que toma las URL como argumento:

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

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

7

La respuesta de Nikhil Agrawal es genial, solo agregue un pequeño ejemplo aquí que puede hacer en la consola para ver los diferentes componentes en acción:

ingrese la descripción de la imagen aquí

Si desea que la URL base sin la ruta o el parámetro de consulta (por ejemplo, para que las solicitudes AJAX funcionen tanto en los servidores de desarrollo / ensayo Y de producción), window.location.origines mejor ya que mantiene el protocolo y el puerto opcional (en el desarrollo de Django, a veces tiene un puerto no estándar que lo rompe si solo usa el nombre de host, etc.)

5

En jstl podemos acceder a la ruta URL actual usando pageContext.request.contextPath. Si desea hacer una llamada Ajax, use la siguiente URL.

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

Ejemplo: Para la página http://stackoverflow.com/posts/36577223esto dará http://stackoverflow.com/controller/path.

0
5

La forma de obtener el objeto de ubicación actual es window.location.

Compare esto con document.location, que originalmente solo devolvió la URL actual como una cadena. Probablemente para evitar confusiones, document.locationfue reemplazado por document.URL.

Y todos los navegadores modernos se asignan document.locationa window.location.

En realidad, para la seguridad de varios navegadores, debería utilizar en window.locationlugar de document.location.

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

y

location.href

hace lo mismo.

2

Puede obtener el enlace completo de la página actual location.href y para obtener el enlace del controlador actual, use:

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

Tienes varias formas de hacer esto.

1:

location.href;

2:

document.URL;

3:

document.documentURI;
2

Utilizar esta:

var url = window.location.href;

console.log(url);
1

Obteniendo la URL actual con JavaScript:

  • window.location.toString();

  • window.location.href

1

Tratar

location+''

let url = location+'';

console.log(url);
0

Si se refiere a un enlace específico que tiene una identificación, este código puede ayudarlo.

$(".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+"");
        }
    });
});

Estoy usando ajax aquí para enviar una identificación y redirigir la página usando window.location.replace . simplemente agregue un atributo id=""como se indica.

-2

En primer lugar, compruebe que la página esté cargada completamente en

browser,window.location.toString();

window.location.href

luego llame a una función que toma url, variable de URL y se imprime en la consola,

$(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 );
});
0