Muitos URLs são redirecionados para novos locais, normalmente usando uma configuração de servidor e propriedades de cabeçalho HTTP. Mas existem muitos cenários em que você pode precisar usar JavaScript para redirecionar ou navegar para outro URL.
Existem muitos motivos pelos quais você pode querer redirecionar para uma nova página ou URL.
- Você alterou seu domínio ou estrutura de URL
- Você deseja redirecionar com base no idioma, local ou janela de visualização
- O usuário enviou um formulário e você deseja para direcioná-los para a próxima página na sequência
- A página pode exigir autorização
- Redirecionar de HTTP para HTTPS
- Você precisa acionar uma nova página em um aplicativo de página única
O objeto window.location gerencia o endereço carregado pelo navegador. Manipular o objeto de localização é como você gerencia os redirecionamentos de página usando JavaScript. O objeto de localização tem propriedades e métodos para acionar um redirecionamento de página JavaScript.
As propriedades do objeto de localização com as quais você precisa se familiarizar são:
- hash : usado para aplicativos de página única e sites de página única
- host : o domínio do URL
- nome do host : semelhante ao host
- href: o URL completo
- origem : o Protocolo e domínio do URL
- nome do caminho : o slug do URL ou página após a origem
- porta : se uma porta estiver incluída no URL
- protocolo: http, https, ftp, ftps, etc
Cada uma dessas propriedades são strings e oferecem suporte a todos os métodos de string padrão, como replace, que usaremos neste tutorial.
Os métodos do objeto de localização são:
- atribuir: define o objeto de localização para o novo URL
- recarregar : força a página a recarregar usando o mesmo URL
- substituir: aciona um redirecionamento, que exploraremos em profundidade
- pesquisa : permite que você interrogue a queryString
Atribuir e substituir parecem semelhantes, mas têm restrições diferentes. O método de atribuição carrega o recurso no novo URL e preserva a entrada anterior no histórico de navegação do navegador.
Isso significa que o usuário pode clicar no botão Voltar e ir para a página original.
O método replace faz a mesma coisa, exceto que o recurso original ou’atual’não é retido no histórico do navegador.
Isso significa que o usuário não pode clicar no botão Voltar para ir para a página original.
Ambos podem falhar se houver restrições de segurança. Por exemplo, scripts de terceiros não podem acionar um redirecionamento. Isso é bom porque muitos sites usam scripts de terceiros sem verificar o código.
Redirecionar para um novo endereço
Ao alterar um endereço, por exemplo, um novo nome de domínio, você deve executar um redirecionamento 301. É aqui que o servidor envia um código de status HTTP 301, com o novo endereço.
Um código de status 301 informa ao agente do usuário: ou seja, o navegador ou spider do mecanismo de pesquisa, há um novo endereço. É como quando você muda e envia uma mudança de endereço para o correio. Seu e-mail é encaminhado.
Um redirecionamento 301 permite que você mantenha o tráfego e, com sorte, sua classificação no mecanismo de pesquisa.
Normalmente você faria isso a partir do servidor. Há momentos em que isso não é possível e você precisa usar um redirecionamento de JavaScript para um URL.
Isso é muito simples, basta incluir um dos seguintes snippets:
window.location.assign ("novo URL de destino");
//ou
window.location.replace ("novo URL de destino");
Eu recomendaria usar substituir porque o URL original não é válido. Portanto, mantê-lo no histórico de sessão pode confundi-los e acionar um redirecionamento automático de qualquer maneira.
location.replace é útil para qualquer cenário de redirecionamento 301, incluindo quando você precisa redirecionar de HTTP para HTTPS. Mas uma maneira mais sucinta de redirecionar de HTTP para HTTPS usando JavaScript é o seguinte snippet de código:
if (location.protocol!=="https:") { location.replace (window.location.href.replace ("http:","https:"));
}
Eu recomendo configurar seu servidor para enviar os cabeçalhos de redirecionamento HTTP adequados porque eles são muito mais eficientes. Isso se aplica a novos endereços e HTTP para HTTPS.
Use JavaScript para atualizar uma página
Haverá momentos em que você desejará atualizar ou recarregar programaticamente uma página usando JavaScript. Normalmente, você colocaria um botão ou elemento de ação na página para o usuário iniciar a atualização. Executar uma atualização de página automaticamente pode ser uma experiência confusa e chocante para o usuário, portanto, minimize essa tática.
O método location.reload recarrega o documento atual, assim como o usuário pressionou F5 ou o botão recarregar do navegador.
A configuração padrão recarrega a página do cache do navegador, se estiver disponível. Você pode forçar o método a ignorar o cache local e recuperar o documento da rede passando true para o método.
location.reload ();
//atualiza do cache
//ou
location.reload (verdadeiro);
//para forçar um pedido de rede
Acho que a melhor etiqueta é usar JavaScript para atualizar a página em resposta a uma ação do usuário. Isso geralmente ocorre em resposta a um manipulador de eventos de clique ou toque. Eu também acho que neste cenário você também pretende recuperar da rede, então você também desejará forçar esta ação.
Aqui está um exemplo simplificado:
var btn=document.querySelector (". btn-reload"); btn.addEventListener ("clique", função (e) { e.preventDefault (); location.reload (verdadeiro);
});
Você deve estar ciente de que, se o usuário rolar a página, o navegador pode não manter a posição atual de rolagem. A maioria dos navegadores modernos parece lidar bem com isso, mas nem sempre é o caso.
Você está atualizando uma página e o conteúdo e a estrutura do documento provavelmente foram alterados em relação ao que eram originalmente renderizados. Nesses casos, o navegador pode não ser capaz de determinar onde colocar a posição de rolagem de forma confiável. Nestes casos, o navegador não rola a página e o posicionamento é o topo.
Também há uma verificação de segurança em vigor com esta chamada para evitar que scripts externos usem este método maliciosamente. Isso se refere à Política de mesma origem. Se isso acontecer, um DOMException é lançado com um SECURITY_ERROR.
Redirecionar no envio de um formulário
Outra ocasião em que usar o método location.replace é útil é no envio de formulários.
Esta não é a escolha certa 100% das vezes, mas deve ser levada em consideração. Um bom exemplo é fazer check-out de um carrinho de compras.
Depois que o usuário clica no botão para enviar o pagamento, normalmente não é uma boa ideia voltar ao carrinho. Isso pode causar todo o tipo de confusão e possíveis pedidos duplicados.
Em resposta ao carrinho ou a qualquer formulário enviado, você precisa adicionar um manipulador de eventos de clique ou ponteiro para interceptar a ação. No método do manipulador, você deve incluir um return false para evitar que o formulário seja enviado ao servidor.
submitBtn.addEventListener ("click", função (evt) { evt.preventDefault (); window.location.replace ("novo URL de destino"); retorna falso;
});
Você faria isso normalmente ao criar um gerenciador de formulários do lado do cliente, portanto, não se esqueça disso ao adicionar o código JavaScript para redirecionar para uma nova página.
Apenas uma observação útil para este processo: você pode incluir um parâmetro queryString em seu URL para passar uma referência ao estado do usuário. Isso pode ajudá-lo a renderizar ou hidratar o novo URL de destino.
Redirecionamento de JavaScript em um aplicativo de página única (SPA)
Um princípio básico de aplicativos da Web de página única (SPA) são coisas que costumavam ficar no servidor e agora vivem no navegador. Uma dessas responsabilidades é gerenciar redirecionamentos. Por exemplo, quando você faz uma chamada AJAX para um serviço seguro e sem um token de autorização válido. O serviço deve retornar um código de status 401. Ao receber um código de status 401, o aplicativo deve redirecionar o usuário para o endereço de login.
No desenvolvimento da web clássico, a solicitação AJAX seria uma solicitação de página ou postagem de volta. O servidor reconhece o estado não autorizado e executa o redirecionamento adequado do lado do servidor. No ASP.NET, fazemos isso com a função response.redirect.
Em um SPA, o código do aplicativo cliente precisa gerenciar o redirecionamento. Encontrei dois cenários comuns; redirecionar para uma parte externa ou (servidor de token seguro) STS ou para a visualização de login do aplicativo. O redirecionamento interno é bastante fácil, altere a rota do fragmento hash para a visualização de login.
window.location.hash="#! login";
Se você está familiarizado com aplicativos de página única, reconhecerá isso como a forma de usar JavaScript para redirecionar para outra página.
Lembre-se de que, ao redirecionar para uma nova página devido a um token de autenticação obsoleto ou ausente, você provavelmente está usando a autenticação ativa e precisa manter o token de autenticação em algum lugar, como IndexedDB.
Se você estiver usando autenticação passiva, a página postará de volta no servidor de autenticação e o token retornará, normalmente no cabeçalho.
O redirecionamento para um STS normalmente envolve a alteração do endereço do navegador do URL do SPA para o URL de autenticação. O URL do STS provavelmente está em um domínio, servidor, etc. completamente diferente.
Seja qual for o caso, o local deve mudar. A primeira reação da maioria dos desenvolvedores, inclusive eu, foi procurar um método location.redirect.
Não existe.
Para alterar o endereço do navegador, você deve usar a propriedade location.href. Alterar este valor aciona o navegador para carregar o novo URL.
window.location.href=myLoginUrl;
Agora o navegador carrega o novo destino. Nesse cenário, o usuário faz o login usando o STS e retorna ao aplicativo autenticado.
A autenticação é um cenário em que você pode precisar redirecionar o usuário programaticamente. Claro, existem muitos outros cenários em que você pode precisar redirecionar um usuário, interna ou externamente, durante o uso normal do aplicativo.
Resumo
Existem vários motivos pelos quais você pode precisar redirecionar de uma página para outra. Tente configurá-los no servidor tanto quanto possível. Mas existem muitos cenários comuns em que você precisa usar JavaScript para realizar um redirecionamento de página.
O objeto window.location possui propriedades e métodos que você pode manipular usando JavaScript para redirecionar para URLs diferentes. Location.replace e location.assign podem ser muito úteis. O método de substituição mantém o histórico da sessão limpo, e o método de atribuição permite ao usuário rastrear o histórico de URL.
