Localização JavaScript

Resumo : neste tutorial, você aprenderá sobre o Locationobjeto JavaScript e como manipular a localização de forma eficaz.

O Locationobjeto representa a localização atual (URL) de um documento. Você pode acessar o Locationobjeto referenciando a locationpropriedade do objeto windowou document.

Ambos window.locatione document.locationlink para o mesmo Locationobjeto.

Propriedades de localização JavaScript

Suponha que o URL atual seja:

http://localhost:8080/js/index.html?type=listing&page=2#title
Linguagem de código:  JavaScript  ( javascript )

A imagem a seguir ilustra as propriedades do Locationobjeto:

Localização.href

A location.hrefé uma string que contém o URL inteiro.

"http://localhost:8080/js/index.html?type=listing&page=2#title"
Linguagem de código:  JSON/JSON com comentários  ( json )

Protocolo de localização

O location.protocolrepresenta o esquema de protocolo da URL, incluindo os dois pontos finais ( :).

'http:'
Linguagem de código:  JavaScript  ( javascript )

Localização.host

O location.hostrepresenta o nome do host:

"localhost:8080"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.porta

O location.portrepresenta o número da porta do URL.

"8080"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.nome do caminho

Contém location.pathnameuma inicial '/'seguida pelo caminho da URL.

"/js/index.html"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.pesquisa

A location.searché uma string que representa a string de consulta do URL:

"?type=listing&page=2"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.hash

O location.hashretorna uma string que contém um ‘#’ seguido pelo identificador do fragmento da URL.

"#title"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.origem

The location.originé uma string que contém a forma canônica da origem do local específico.

"http://localhost:8080"
Linguagem de código:  JSON/JSON com comentários  ( json )

Localização.nome de usuário

É location.usernameuma string que contém o nome de usuário antes do nome de domínio.

Localização.senha

THe location.passwordé uma string que representa a senha especificada antes do nome de domínio.

Manipulando a localização

O Locationobjeto possui vários métodos úteis: assign(), reload()e replace().

 assign()

O assign()método aceita uma URL, navega até a URL imediatamente e faz uma entrada na pilha de histórico do navegador.

location.assign('https://tutorials.acervolima.com');
Linguagem de código:  JavaScript  ( javascript )

Quando window.locationou location.hrefé definido como uma URL, o assign()método é chamado implicitamente:

window.location = 'https://tutorials.acervolima.com';
location.href = 'https://tutorials.acervolima.com';
Linguagem de código:  JavaScript  ( javascript )

Se você alterar a propriedade hostname, pathnameou port, a página será recarregada com o novo valor. Observe que alterar hasha propriedade não recarrega a página, mas registra uma nova entrada na pilha de histórico do navegador.

Quando uma nova entrada é criada na pilha de histórico do navegador, você pode clicar no botão Voltar do navegador para navegar para a página anterior.

replace()

O replace()método é semelhante ao assign()método, exceto que não cria uma nova entrada na pilha de histórico do navegador. Portanto, você não pode clicar no botão Voltar para ir para a página anterior.

O código a seguir usa o replace()método para navegar até o URL https://tutorials.acervolima.comapós 3 segundos:

setTimeout(() => {
    location.replace('https://tutorials.acervolima.com');
}, 3000);
Linguagem de código:  JavaScript  ( javascript )

reload()

O reload()método recarrega a página exibida atualmente. Quando você chama o reload()método sem argumento, o navegador recarregará a página da maneira mais eficiente, por exemplo, ele carrega os recursos da página do cache do navegador se eles não tiverem sido alterados desde a última solicitação.

reload();

Para forçar uma recarga do servidor, você passa true para o reload()método:

reload(true);    
Linguagem de código:  JavaScript  ( javascript )

Observe que o código após o reload()pode ou não ser executado, dependendo de muitos fatores, como latência da rede e recursos do sistema. Portanto, é uma boa prática colocar the reload()  como última linha do código.

Resumo

• O Locationobjeto representa o URL atual de uma página. Ele pode ser acessado via window.locationou document.location.
• O Locationobjeto possui diversas propriedades que representam a URL, como protocol, host, pathnamee search.
• Para manipular o local, você define novos valores para suas propriedades ou usa métodos assign(), replace()e reload().