¿Obtener la URL actual con JavaScript?

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.

preguntado el 23 de junio de 09 a las 19:06

25 Respuestas

Uso:

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 nuestra página URL de tipo DOMString, solo lectura.

Respondido 11 Oct 20, 09:10

En Firefox 12 el document.URL la propiedad no se actualiza después de un window.location a un ancla (#), mientras window.location.href lo hace. No probé ninguna otra versión de Firefox. No hay problemas al usar document.URL se encontraron en Chrome 20 e IE9. - Telmo Marques

también puede obtener el host y la ubicación clara: window.location.host y window.location.href.toString().split(window.location.host)[1] - Ali U

y que es document.baseURI sobre entonces. Básicamente, hay 3 formas de obtener la URL. document.baseURI, document.URLY location. - Muhammad Umer

-1: si tiene un marco, una imagen o un formulario con name="URL" entonces esta propiedad se sombreará en el document objeto y su código se romperá. En ese caso, document.URL se referirá al nodo DOM en su lugar. Es mejor usar las propiedades del objeto global como en window.location.href. - Roy Tinker

"window.location.href" para ganar - GabrielBB

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 Location objeto, que es una propiedad del Window objeto. Puede crear un nuevo Location objeto que tiene 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: Número de puerto que se utiliza para reconocer un proceso específico al que se debe reenviar un mensaje de Internet u otro mensaje de red cuando llega 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 la 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 a procesar).

  • picadillo: La parte de anclaje de una URL incluye el signo de almohadilla (#).

Con estos Location propiedades del 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
  • anfitrión - 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 el servidor usa para la URL
  • ruta - el nombre de la ruta de la URL
  • search - la parte de consulta de la URL
  • hachís - la parte de anclaje de la URL

Espero que tengas tu respuesta.

Respondido 16 Abr '20, 09:04

No son "métodos" de window.location, pero propiedades, y aquí tenemos un ejemplo: var stringPathName = window.location.pathname. - Peter Krauss

@FabioC. Puedes eliminarlo por substring. Sin embargo, puede resultar útil cuando desee utilizar para redirigir document.location = "/page.html"; redirigirá a la página raíz page.html - FindOut_Quran

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. - Panzercrisis

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. - Panzercrisis

Se llama "búsqueda", no "consulta". Datos de Apolo

Utilizan window.location para acceso de lectura y escritura al objeto de ubicación asociado con el fotograma 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.

Respondido 18 Feb 19, 14:02

Obtiene la URL de la página actual:

window.location.href

Respondido el 23 de junio de 09 a las 23:06

Tenga en cuenta que esa es la ubicación de la ventana, no la del documento. - Gumbo

Es lo mismo. La URL actual completa se refiere a la ruta del documento (dirección externa). - Zanoni

¿Está estandarizado como document.url? (Me refiero a algo como un documento w3c) - chendral

document es la raíz del árbol de documentos definido por la especificación. window es generalmente equivalente, pero puede que no lo sea en algunas circunstancias extrañas. - broinjc

OK, obteniendo el 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"

El window.location.href La propiedad 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>

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 tu página tiene hash etiqueta, puede obtenerla como: window.location.hash.

So window.location.href maneja todo en una vez ... básicamente:

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

También usando window no 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

Respondido el 25 de junio de 19 a las 08:06

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

Respondido el 03 de Septiembre de 18 a las 23:09

Abre Herramientas de desarrollo, escriba lo siguiente en el consolar y pulse Entrar.

window.location

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

enter image description here

Coge lo que necesites de aquí. :)

Respondido el 15 de junio de 17 a las 13:06

Uso: window.location.href.

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

Respondido 25 Abr '14, 20:04

  • Utilizan window.location.href para obtener la URL completa.
  • Utilizan window.location.pathname para obtener la URL que sale del host.

Respondido 21 Abr '15, 12:04

window.location.pathname no incluye la consulta y el fragmento hash - OMGPOP

Puedes obtener la ubicación de la URL actual con una etiqueta hash mediante el uso:

JavaScript:

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

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

jQuery:

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

contestado el 26 de mayo de 17 a las 00:05

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

Respondido 07 Jul 14, 13:07

Aplicó .toLowerCase () a la URL que realmente lo cambia. Algunos servidores distinguen entre mayúsculas y minúsculas (linux, etc ...) - AnthonyVO

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. - niño muerto

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

¡¡¡No puedes toLowerCase () una URL asegurándote de no romperla !!! Si la 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 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=A1B2C3 no es lo mismo de ?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

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: ƒ, …}

ubicación del documento

  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"

respondido 03 nov., 17:16

Para URL completa con cadenas de consulta:

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

Para URL de host:

window.location

Respondido el 13 de Septiembre de 14 a las 14:09

Aplicó .toLowerCase () a la URL que realmente lo cambia. Algunos servidores distinguen entre mayúsculas y minúsculas (linux, etc ...) - AnthonyVO

Como ya se ha dicho, ¡no puede bajarCase () una URL asegurándose de no romperla! 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, Script.php y script.php son 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 () fue para comparar como indexOf en su script. - Syed Nasir Abbas

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

Respondido el 30 de Septiembre de 19 a las 01:09

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:

enter image description here

Si desea que la URL base sin la ruta o el parámetro de consulta (por ejemplo, para hacer solicitudes AJAX en contra para trabajar en los servidores de desarrollo / ensayo Y de producción), window.location.origin es 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.)

Respondido el 27 de diciembre de 19 a las 20:12

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/36577223 esto dará http://stackoverflow.com/controller/path.

contestado el 26 de mayo de 17 a las 00:05

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

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

Y todos los navegadores modernos mapean document.location a window.location.

En realidad, para la seguridad de varios navegadores, debe utilizar window.location más bien que document.location.

contestado el 26 de mayo de 17 a las 00:05

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

y

location.href

hace lo mismo

Respondido 09 Jul 20, 06:07

Tienes varias formas de hacer esto.

1:

location.href;

2:

document.URL;

3:

document.documentURI;

Respondido el 01 de enero de 21 a las 14:01

Obteniendo la URL actual con JavaScript:

  • window.location.toString ();

  • window.location.href

Respondido el 22 de Septiembre de 18 a las 09:09

Utilizar esta:

var url = window.location.href;

console.log(url);

Respondido 10 Feb 21, 13:02

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

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

contestado el 26 de mayo de 17 a las 00:05

si se refiere a un enlace específico que tiene un id este código puede ayudarte.

$(".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. solo agrega un atributo id="" como se indica.

Respondido 17 Oct 19, 05:10

Trata

location+''

let url = location+'';

console.log(url);

Respondido el 02 de enero de 20 a las 01:01

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

contestado el 30 de mayo de 19 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.