Ubicación de la ventana de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


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.


Ubicación de la ventana

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


Ubicación de la ventana Href

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

Ejemplo

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>

Nombre de host de ubicación de ventana

La propiedad window.location.hostname devuelve el nombre del host de Internet (de la página actual).

Ejemplo

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>


Nombre de ruta de ubicación de ventana

La propiedad window.location.pathname devuelve el nombre de ruta de la página actual.

Ejemplo

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>

Protocolo de ubicación de ventana

La propiedad window.location.protocol devuelve el protocolo web de la página.

Ejemplo

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>

Puerto de ubicación de ventana

La propiedad window.location.port devuelve el número del host de Internet puerto (de la página actual).

Ejemplo

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)


Asignar ubicación de ventana

El método window.location.assign() carga un nuevo documento.

Ejemplo

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>