El objeto window.location se utiliza para obtener la URL de la página actual, así como para extraer los componentes de dicha URL de forma separada.
URL completa
Por ejemplo, si queremos que al pulsar sobre un botón el navegador nos muestre la URL completa de esta página, debemos utilizar el objeto window.location junto con la propiedad href:
<p>Pulsa sobre este botón para obtener la URL completa de esta página.</p>
<button onclick="myFunction()">Pulsar aquí</button>
<p id="demo1"></p>
Y el código JavaScript:
function myFunction() {
document.getElementById("demo1").innerHTML = "La URL completa de esta página es: " + window.location.href;
}
Ruta de la URL actual
Si en cambio, queremos obtener solamente la ruta de la URL de la página actual debemos utilizar la propiedad window.location.pathname:
function myFunction2() {
document.getElementById("demo2").innerHTML = "La ruta de la URL de esta página es: " + window.location.pathname;
}
Dominio de la página actual
Para obtener el dominio actual debemos utilizar la propiedad window.location.hostname:
function myFunction3() {
document.getElementById("demo3").innerHTML = "El dominio de la URL de esta página es: " + window.location.hostname;
}
Obtener el protocolo de la URL
Si queremos extraer el protocolo de la URL de la página actual es necesario utilizar la propiedad window.location.protocol:
function myFunction4() {
document.getElementById("demo4").innerHTML = "El protocolo de la URL de esta página es: " + window.location.protocol;
}
Mira todos los códigos en acción en este CodePen:
See the Pen Obtener la URL con JavaScript by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
