Objeto location em JavaScript

O objeto location contém informações sobre a localização da página web atual: URL, informações do servidor, número da porta e protocolo. Com as propriedades deste objeto, podemos obter essas informações:

href: endereço completo da URL da página web.
origin: esquema geral da solicitação.
protocol: protocolo (incluindo dois pontos), por exemplo, http: ou https:.
host: host, por exemplo, localhost.com. Se o endereço URL contiver o número da porta, a porta também estará incluída no host, por exemplo, localhost.com:8080.
hostname: domínio, similar ao host, mas sem incluir a porta, por exemplo, localhost.com.
port: porta usada pelo recurso.
pathname: caminho para o recurso, parte do endereço que vem após o host, após a barra /.
hash: identificador de fragmento, parte do endereço que vem após o símbolo de hashtag # (se presente).
search: string de consulta(parâmetros), parte do endereço que vem após o ponto de interrogação ? (se presente).
username: nome de usuário especificado no endereço. Por exemplo, no endereço https://tom:qwerty5@localhost.com, é a substring "tom".
password: senha especificada no endereço. Por exemplo, no endereço https://tom:qwerty5@localhost.com, é a substring "qwerty5".

Em geral, o formato do endereço URL é o seguinte:

protocol://username:password@hostname:port/path?search#hash

Por exemplo, considere a seguinte página web test:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Proramício</title>
  </head>
  <body>
    <script>
      console.log("href:", location.href);
      console.log("path:", location.pathname);
      console.log("origin:", location.origin);
      console.log("protocol:", location.protocol);
      console.log("port:", location.port);
      console.log("host:", location.host);
      console.log("hostname:", location.hostname);
      console.log("hash:", location.hash);
      console.log("search:", location.search);
    </script>
  </body>
</html>

Se ela estiver em um servidor web local e acessada pelo endereço http://localhost:4200/test?name=tom&age=39#userinfo, a saída será:

Objeto location em JavaScript

Controlando o Endereço

O objeto location também fornece vários métodos que podem ser usados para gerenciar o endereço da página web:

assign(url): carrega o recurso localizado no caminho url.
reload(forcedReload): recarrega a página web atual. O parâmetro forcedReload indica se deve usar o cache do navegador. Se o parâmetro for true, o cache não é usado.
replace(url): substitui a página web atual por outro recurso localizado no caminho url. Diferentemente do método assign, que também carrega a página web de outro recurso, o método replace não salva a página web anterior no histórico de navegação, portanto, não será possível usar o método history.back() para retornar a ela.

Para redirecionar para outro recurso, podemos usar tanto as propriedades quanto os métodos do objeto location:

location = "http://google.com";
// ou
location.href = "http://google.com";
location.assign("http://google.com");

Para redirecionar para outro recurso local:

location.replace("index.html");

Por exemplo, vamos redirecionar a página ao clicar em um botão:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <input type="url" id="url" />
    <button id="btn">Click</button>
    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        const url = document.getElementById("url").value;
        location.assign(url);
      });
    </script>
  </body>
</html>

Aqui, ao clicar no botão, ocorre a navegação para o endereço inserido no campo de texto url.

O redirecionamento usando o método replace()é feito de maneira semelhante:

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  const url = document.getElementById("url").value;
  location.replace(url);
});

Para recarregar a página:

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  location.reload(true);
});