¿Obtener la URL actual con JavaScript?

Respuestas:

3685

Utilizar:

window.location.href

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

document.URL;

Ver URL de tipo DOMString, solo lectura .

Peter Mortensen
fuente
142
En Firefox 12, la document.URLpropiedad no se actualiza después window.locationde un ancla (#), mientras que window.location.hrefsí. He reunido una demostración en vivo aquí: jsfiddle.net/PxgKy No probé ninguna otra versión de Firefox. No document.URLse encontraron problemas al usar Chrome 20 e IE9.
Telmo Marques
88
También puede obtener host y ubicación clara: window.location.hostywindow.location.href.toString().split(window.location.host)[1]
Ali youhannaei
8
y de qué se document.baseURItrata entonces. Básicamente hay 3 formas de obtener url document.baseURI, document.URL, y location.
Muhammad Umer
20
-1: Si tiene un marco, imagen o 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 en su lugar. Es mejor usar las propiedades del objeto global como en window.location.href.
Roy Tinker
13
"window.location.href" por la victoria
GabrielBB
662

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 usan 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 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 utilizado para reconocer un proceso específico al que se debe reenviar un mensaje de Internet u otra red cuando llega a un servidor.

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

  • búsqueda: una cadena de consulta sigue el 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 hash (#).

Con estas Locationpropiedades de objeto puede acceder a todos estos componentes de URL y a 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
  • hostname : el nombre de host de la URL
  • Puerto : el número de puerto que usa el servidor para la URL
  • nombre de ruta : el nombre de ruta de la URL
  • buscar : la parte de consulta de la URL
  • picadillo : la parte de anclaje de la URL

Espero que hayas recibido tu respuesta.

Nikhil Agrawal
fuente
77
Ellos no son "métodos" de window.location, pero las propiedades, y aquí tenemos un ejemplo : var stringPathName = window.location.pathname.
Peter Krauss
@FabioC. Puedes eliminarlo por substring. Sin embargo, puede ser útil cuando desee utilizar para redirigir document.location = "/page.html";redirigirá a la página raízpage.html
FindOut_Quran
1
Esto responde más que solo la pregunta planteada. De hecho, busqué probablemente hace aproximadamente 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 eran más sobre -objetivo, sus respuestas no fueron tan útiles y directas para ese propósito como este.
Panzercrisis
1
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 a query. Tal vez se puedan reconciliar o se pueden agregar más explicaciones.
Panzercrisis
1
Se llama 'buscar', no 'consultar'
Apollo Data
320

Se usa 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 usarla document.URL, que debe contener el mismo valor que window.location.href.

Christoph
fuente
19
ver también stackoverflow.com/questions/2430936/…
Christoph el
264

Obtiene la URL de la página actual:

window.location.href
Zanoni
fuente
3
Tenga en cuenta que esa es la ubicación de la ventana, no la del documento.
Gumbo
16
Es lo mismo. La URL actual completa se refiere a la ruta del documento (dirección externa).
Zanoni
2
¿Está estandarizado como document.url? (Me refiero a algo así como un documento w3c)
chendral
documentes la raíz del árbol de documentos definido por la especificación. windowgeneralmente es equivalente, pero podría no serlo en algunas circunstancias extrañas.
broinjc
57

OK, obtener la URL completa de la página actual es fácil usando JavaScript puro. Por ejemplo, intente 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"

La window.location.hrefpropiedad devuelve la URL de la página actual.

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>
Expandir fragmento

Simplemente no está mal mencionar esto 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 de una vez ... básicamente:

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

También usando window es necesario si ya está en el alcance de la ventana ...

Entonces, en ese caso, puedes usar:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Obtenga la URL actual con JavaScript

Alireza
fuente
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; no siempre es cierto! faltan parámetros GET en window.location.pathname.
Asesinato el
40

Para obtener el camino, 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
Expandir fragmento

Sangeet Shah
fuente
35

Abra Herramientas para desarrolladores , escriba lo siguiente en la consola y presione Entrar .

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í

Toma lo que necesitas de aquí. :)

tmh
fuente
29

Utilizar: window.location.href .

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

dorio
fuente
21
  • Utilizar window.location.href para obtener la URL completa.
  • Se usa window.location.pathnamepara obtener la URL que sale del host.
kishore
fuente
44
window.location.pathname no incluye el fragmento de consulta y hash
OMGPOP
10 
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

Rohan Patil
fuente
2
Aplicaste .toLowerCase () a la url que realmente lo cambia. Algunos servidores distinguen entre mayúsculas y minúsculas (Linux, etc.)
AnthonyVO
Debería usar verbundamente window.href. Este código solo funciona en un contexto donde esta ventana ===, sin embargo, ese podría no ser siempre el caso, especialmente si alguien pega esta solución.
deadboy
No son "algunos" servidores los que distinguen entre mayúsculas y minúsculas. Es la mayoría de los servidores. Así que estoy de acuerdo con AnthonyVO: cambiar el caso de la URL es una muy mala idea.
mivk
¡¡¡No puedes bajar una URL () asegurándote de no romperla !!! Si url 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 necesariamente 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.
FrancescoMM
8

Agregar resultado para referencia rápida

ventana.ubicación;

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

document.location

  Location {href: "/programming/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

"/programming/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"
Hitesh Sahu
fuente
7

Para URL completa con cadenas de consulta:

document.location.toString().toLowerCase();

Para la URL del host:

window.location
Syed Nasir Abbas
fuente
11
Aplicaste .toLowerCase () a la url que realmente lo cambia. Algunos servidores distinguen entre mayúsculas y minúsculas (linux, etc.)
AnthonyVO
Como se ha dicho, no se puede bajar una URL () ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡asegurando que no se rompa !!! Si la url es 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 que Script.php y script.php sean iguales. E incluso si no distingue entre mayúsculas y minúsculas (Windows, algunos Mac Os),? Option = A1B2C3 no es lo mismo que? Option = a1b2c3, o incluso? Option = A1B2C3. Solo el servidor no distingue entre mayúsculas y minúsculas: www.server.com o www.SeRvEr.cOm son iguales.
FrancescoMM
Gracias AnthonyVO por señalar esto. Solo podemos usar document.location.toString () para obtener la URL completa. toLowerCase () era comparar like indexOf en su script.
Syed Nasir Abbas el
4

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.

Maleen Abewardana
fuente
4

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 entre navegadores, debe usar en window.locationlugar de document.location.

Josip Ivic
fuente
3

La respuesta de Nikhil Agrawal es excelente, solo agrega un pequeño ejemplo aquí que puedes 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 ruta o parámetro de consulta (por ejemplo, para realizar solicitudes AJAX en contra de trabajar tanto en servidores de desarrollo / preparación Y 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.)

Apollo Data
fuente
0 
   location.origin+location.pathname+location.search+location.hash;
زياد
fuente
0

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('/'));
Khaled Harby
fuente
0

Obtener la URL actual con JavaScript:

  • window.location.toString ();

  • window.location.href

Hasib Kamal
fuente
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.

curiosidad
fuente
-2

Primero verifique que la página se cargue completamente en 

browser,window.location.toString();

window.location.href

luego llame a una función que tome url, variable de URL e imprima 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 );
});
Ashish Kamble
fuente