Como mudar de página com um botão de JavaScript

Escrito por kevin lee | Traduzido por maria genoveva
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como mudar de página com um botão de JavaScript
Altere o botão de voltar em uma página de internet para controlar a navegação pelo site (typing image by PD-Images.com from Fotolia.com)

JavaScript tornou possível que os visitantes de um site possam navegar de uma página para outra visualizada anteriormente clicando em um botão de voltar na própria página. Entretanto, pode haver momentos em que se deseje alterar o comportamento desse botão, para que o visitante não possa usá-lo para navegar através do histórico do navegador. Isso poderá ser útil, por exemplo, para uma página de um banco que deve ser acessada apenas pela página principal. Para alterar esse botão, modifique a função no código JavaScript executada quando o usuário a aciona.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Adicione o código dentro da tag <body> da página:

    <input type="button" value="Go Back" onclick="goBack('ENABLE');" /><br/> <input type="button" value="Disable Back Button" onclick="goBack('DISABLE');" />

    Isso criará botões que chamarão a função "goBack" do JavaScript ao clique do usuário.

  2. 2

    Agora, adicione o código abaixo, dentro da tag <script>, também na página:

    var buttonState = "ENABLED"; function goBack() { if (buttonState == 'ENABLED') window.history.go(-1); } function disableButton() { buttonState = "DISABLED"; alert('Back button disabled. Click it to verify'); }

    A função "goBack" executará o comando "windows.history.go", se o valor do "buttonState" for "ENABLED". A função "disableButton" modifica esse valor para "DISABLED". É possível incluir uma lógica adicional, caso necessite da função "goBack".

  3. 3

    Salve o arquivo HTML e navegue em qualquer site, como http://www.whitehouse.gov.>

  4. 4

    Clique em "File" (Arquivo) e em "Open" (Abrir) no navegador. Uma janela será exibida, para escolher um arquivo. Clique duas vezes no arquivo HTML, para carregá-lo.

  5. 5

    Clique em "Go Back" (Voltar). Você voltará para a página anterior.

  6. 6
  7. 7

    Abra o arquivo HTML, escolha a opção "Disable Back Button" (Desativar botão voltar) e clique em "Go Back" (Voltar). Não será mais possível voltar para a página anterior, devido à função do botão "Voltar" ter sido desativada.

Dicas & Advertências

  • Você poderá chamar uma função para alterar o botão de voltar a qualquer momento, sem que seja preciso que o usuário clique no botão "Disable Back Button" (Desativar botão voltar). Para reativar o botão, utilize o JavaScript para alterar o valor do "ButtonState" para "Enabled". Os usuários poderão utilizar o botão voltar do próprio navegador para navegar pelas páginas visualizadas recentemente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível