Localização da janela JavaScript

Índice

    Mostrar índice

O objeto window.location pode ser usado para obter o endereço da página atual (URL) e redirecionar o navegador para uma nova página.

Localização da janela

O objeto window.location pode ser escrito sem o prefixo window.

Alguns exemplos:

  • window.location.href retorna o href (URL) da página atual

  • window.location.hostname retorna o nome de domínio do host da web

  • window.location.pathname retorna o caminho e o nome do arquivo da página atual

  • window.location.protocol retorna o protocolo web usado (http:ou https:)

  • window.location.assign() carrega um novo documento

Localização da janela Href

A propriedade window.location.href retorna o URL da página atual.

Exemplo

Exiba o href (URL) da página atual:

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

O resultado é:

Experimente você mesmo →

<!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>

Nome do host do local da janela

A propriedade window.location.hostname retorna o nome do host da Internet (da página atual).

Exemplo

Exiba o nome do host:

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

O resultado é:

Experimente você mesmo →

<!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>

Nome do caminho do local da janela

A propriedade window.location.pathname retorna o nome do caminho de a página atual.

Exemplo

Exiba o nome do caminho do URL atual:

 document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

O resultado é:

Experimente você mesmo →

<!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 localização de janela

A propriedade window.location.protocol retorna o protocolo web da página.

Exemplo

Exibir o protocolo da web:

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

O resultado é:

Experimente você mesmo →

<!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>

Porta de localização da janela

A propriedade window.location.port retorna o número do host da Internet porta (da página atual).

Exemplo

Exiba o nome do host:

document.getElementById("demo").innerHTML =
"Port 
  number is " + window.location.port;

O resultado é:

Experimente você mesmo →

<!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>

A maioria dos navegadores não exibirá números de porta padrão (80 para http e 443 para https)

Atribuição de localização de janela

O método window.location.assign() carrega um novo documento.

Exemplo

Carregue um novo 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>

Experimente você mesmo →

<!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>