Redirecionamento JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar JavaScript para redirecionar para uma nova URL ou página.

Introdução ao redirecionamento JavaScript

Às vezes, você deseja redirecionar os usuários de uma página para outra que tenha um URL diferente.

Por exemplo, você pode criar uma landing page de aplicativo que redirecione puramente os usuários para o Google Play ou Apple Store, dependendo do sistema operacional de seus smartphones.

Para fazer isso, você precisa:

Detecte o sistema operacional dos smartphones
Redirecione para a Apple Store se o sistema operacional for iOS e para o Google Play se o sistema operacional for Android.

O redirecionamento pode ser feito nos navegadores web usando a API de redirecionamento JavaScript.

É importante observar que o redirecionamento de JavaScript é executado inteiramente em navegadores da web. Portanto ele não retorna o código de status 301 (mover permanentemente) como um redirecionamento de servidor.

Portanto, se você mover o site para um domínio separado ou criar uma nova URL para uma página antiga, deverá sempre usar o redirecionamento de servidor.

Redirecionar para um novo URL

Para redirecionar navegadores da web para um novo URL da página atual para uma nova, você usa o locationobjeto:

location.href = 'new_url';Linguagem de código:  JavaScript  ( javascript )

Por exemplo:

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

Atribuir um valor à hrefpropriedade do locationobjeto tem o mesmo efeito que chamar o assign()método do locationobjeto:

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

Qualquer uma dessas chamadas redirecionará para o novo URL e criará uma entrada na pilha de histórico do navegador. Isso significa que você pode voltar à página anterior através do botão Voltar do navegador.

Para redirecionar para uma nova URL sem criar uma nova entrada na pilha de histórico do navegador, você usa o replace()método do locationobjeto:

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

O exemplo a seguir cria uma página que redireciona os navegadores da web para o Google Play ou Apple Store se o sistema operacional for Android ou iOS. Caso contrário, aparecerá uma mensagem indicando que o sistema operacional não é compatível:

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Redirect</title>

    </head>

    <body>
        <div class="message"></div>
        <script src="js/app.js"></script>
    </body>

</html>Linguagem de código:  HTML, XML  ( xml )

js/app.js

const apps = {
  Android: 'https://play.google.com/',
  iOS: 'https://www.apple.com/store',
};

const platform = () => {
  let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/windows phone/i.test(userAgent)) return 'Windows Phone';
  if (/android/i.test(userAgent)) return 'Android';
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
  return null;
};

const redirect = () => {
  let os = platform();
  if (os in apps) {
    location.replace(apps[os]);
  } else {
    const message = document.querySelector('.message');
    message.innerText = 'Your OS is not supported';
  }
};

redirect();Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina um appsobjeto com as chaves sendo SO e os valores sendo URLs do Google Play e Apple Store:

const apps = {
  Android: 'https://play.google.com/',
  iOS: 'https://www.apple.com/store',
};Linguagem de código:  JavaScript  ( javascript )

Segundo, defina uma função que detecte o sistema operacional:

const platform = () => {
  let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/windows phone/i.test(userAgent)) return 'Windows Phone';
  if (/android/i.test(userAgent)) return 'Android';
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
  return null;
};Linguagem de código:  JavaScript  ( javascript )

Terceiro, crie a redirect()função que detecta o sistema operacional e redireciona o navegador da web com base no sistema operacional detectado:

const redirect = () => {
  let os = platform();
  if (os in apps) {
    location.replace(apps[os]);
  } else {
    const message = document.querySelector('.message');
    message.innerText = 'Your OS is not supported';
  }
};Linguagem de código:  JavaScript  ( javascript )

Finalmente, chame a redirect()função:

redirect();

Redirecionar para um URL relativo

O script a seguir redireciona para o about.htmlque está no mesmo nível da página atual.

location.href = 'about.html';Linguagem de código:  JavaScript  ( javascript )

O script a seguir redireciona para a contact.htmlpágina localizada na rootpasta:

location.href = '/contact.html';Linguagem de código:  JavaScript  ( javascript )

Redirecionar ao carregar a página

Se quiser redirecionar para uma nova página ao carregar, use o seguinte código:

window.onload = function() {
    location.href = "https://tutorials.acervolima.com/tutorial-de-javascript";
}Linguagem de código:  JavaScript  ( javascript )

Resumo

Para redirecionar para um novo URL ou página, atribua o novo URL à location.hrefpropriedade ou use o location.assign()método.
O location.replace()método redireciona para um novo URL, mas não cria uma entrada na pilha de histórico do navegador.

Localização JavaScript

Como obter string de consulta em JavaScript