El objeto window.location
se puede utilizar para obtener la dirección de la página actual (URL) y redirigir el navegador a una nueva página.
El objeto window.location
se puede escribir sin el prefijo de ventana.
Algunos ejemplos:
window.location.href
devuelve el href (URL) de la página actual
window.location.hostname
devuelve el nombre de dominio del servidor web
window.location.pathname
devuelve la ruta y el nombre de archivo de la página actual
window.location.protocol
devuelve el protocolo web utilizado (http:o https:)
window.location.assign()
carga un nuevo documento
La propiedad window.location.href
devuelve la URL de la página actual.
Muestra el href (URL) de la página actual:
document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;
El resultado es:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The full URL of this page is:<br>" + window.location.href;
</script>
</body>
</html>
La propiedad window.location.hostname
devuelve el nombre del host de Internet (de la página actual).
Mostrar el nombre del host:
document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;
El resultado es:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page hostname is: " + window.location.hostname;
</script>
</body>
</html>
La propiedad window.location.pathname
devuelve el nombre de ruta de la página actual.
Muestra el nombre de la ruta de la URL actual:
document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;
El resultado es:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>
</body>
</html>
La propiedad window.location.protocol
devuelve el protocolo web de la página.
Mostrar el protocolo web:
document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;
El resultado es:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>
</body>
</html>
La propiedad window.location.port
devuelve el número del host de Internet puerto (de la página actual).
Mostrar el nombre del host:
document.getElementById("demo").innerHTML =
"Port
number is " + window.location.port;
El resultado es:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<p id="demo"></p>
<p><b>Note: </b>If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>
<script>
document.getElementById("demo").innerHTML =
"The URL port number of the current page is: " + window.location.port;
</script>
</body>
</html>
La mayoría de los navegadores no mostrarán los números de puerto predeterminados (80 para http y 443 para https)
El método window.location.assign()
carga un nuevo documento.
Cargar un nuevo documento:
<html>
<head>
<script>
function newDoc() {
window.location.assign("https://www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Load new document"
onclick="newDoc()">
</body>
</html>
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
<input type="button" value="Load new document" onclick="newDoc()">
<script>
function newDoc() {
window.location.assign("https://www.w3schools.com")
}
</script>
</body>
</html>