Desative o botão Voltar do navegador

98

Como desativar o botão VOLTAR do navegador (entre os navegadores)?

asp.net javascript priyanka.sarkar
fonte

92

Você não possui os computadores de seus usuários ou seus navegadores.

Instance Hunter

47

+1 Porque embora eu concorde que desativar o botão Voltar do navegador é uma 'má prática', não vejo razão para rejeitar a pergunta em si, respondendo e explicando por que é a melhor maneira de ir.

ChristopheD

45

Por que estamos sendo hostis a essa pergunta? Pelo que sabemos, a pessoa que fez essa pergunta já sabe que essa é uma prática de usabilidade ruim, mas está apenas seguindo os requisitos ou talvez apenas queira aprender alguma coisa. Por que simplesmente não fingimos que esta é uma questão hipotética e respondemos como faríamos se fizéssemos esse tipo de coisa?

thomasrutter

5

Algumas coisas nunca devem ser feitas, independentemente de qualquer desejo de fazê-las. Ter um requisito não negociável para isso diz instantaneamente que os requisitos foram definidos por pessoas sem negócios que os definiram, o que é um problema muito maior.

annakata

37

ugh, eu escrevi o comentário mais incrível de todos os tempos, mas perdi o controle quando acidentalmente apertei o botão Voltar.

Dan Williams

26

Esta questão é muito semelhante a este um ...

Você precisa forçar a expiração do cache para que isso funcione. Coloque o código a seguir no código da sua página.

Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)

RSolberg
fonte

14

Observe que tornar a página não armazenável em cache não atinge o que o OP desejava: desativar a visita às páginas usando o botão Voltar. Mesmo se um navegador obedecer ao não-cache ao usar o botão Voltar (que os navegadores não são obrigados a fazer AFAIK), eles ainda fornecem uma maneira de recarregar a página (normalmente após mostrar uma caixa de diálogo de aviso). Então, se você realmente não quer que seus usuários voltem para aquela página, isso pode ser pior, já que a solicitação dessa página TERÁ que percorrer todo o caminho até o servidor de origem. Você precisará de algo do lado do servidor para detectar que a página foi revisitada. Os cabeçalhos podem ser ignorados.

thomasrutter

60

Não desative o comportamento esperado do navegador.

Faça suas páginas lidar com a possibilidade de os usuários voltarem uma ou duas páginas; não tente prejudicar seu software.

Jonathan Fingland
fonte

6

Obrigado cara, o fato é que se você estiver construindo um aplicativo AJAX, a relação custo-benefício entre desativar o botão Voltar, ou navegar pelo seu aplicativo e trabalhar na ação de retorno apropriada para cada cenário possível, pode tender a desativar o botão Voltar é a opção mais atraente dos dois.

david.barkhuizen

Eu concordaria com Jonathan, especialmente com a enxurrada de anúncios de malware de redirecionamento que estão inundando a internet, eles já abusam do sistema de alerta para dificultar o acesso às suas páginas, sem permitir que eles realmente bloqueiem você em suas páginas

MikeT

46

Eu vim com um pequeno hack que desativa o botão Voltar usando JavaScript. Eu verifiquei no Chrome 10, Firefox 3.6 e IE9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

O que isso está fazendo?

Dos comentários:

Este script aproveita o fato de que os navegadores consideram tudo o que vem depois do sinal "#" no URL como parte do histórico de navegação. O que faz é o seguinte: quando a página carrega, "# 1" é adicionado ao URL. Após 50ms, o "1" é removido. Quando o usuário clica em "voltar", o navegador muda a URL de volta para o que era antes de o "1" ser removido, MAS - é a mesma página da web, então o navegador não precisa recarregar a página. - Yossi Shasho

Yossi Shasho
fonte

1

Parece que este script adiciona "#" ao URL quando a página é carregada e, a cada 50 ms, acrescenta 1 ao URL.

ashes999

6

Este script aproveita o fato de que os navegadores consideram tudo o que vem depois do sinal "#" no URL como parte do histórico de navegação. O que faz é o seguinte: quando a página carrega, "# 1" é adicionado ao URL. Após 50ms, o "1" é removido. Quando o usuário clica em "voltar", o navegador muda a URL de volta para o que era antes de o "1" ser removido, MAS - é a mesma página da web, então o navegador não precisa recarregar a página.

Yossi Shasho

1

note que o URL muda duas vezes: Fazemos isso apenas para disfarçar a implementação, então ninguém verá que adicionamos "1". Então, na verdade, quando o usuário clica de volta, a página adiciona novamente o "nº 1" por um momento e o remove novamente. BTW - não precisa ser "1", pode ser qualquer string.

Yossi Shasho

2

O problema com isso é que a página está rolando para o topo a cada 50 ms. Se você tiver um formulário maior do que a altura da janela, será impossível preencher os valores do formulário.

3komma14,

Muito obrigado. Isso é muito útil para uma página particularmente interativa baseada em JavaScript que tenho, onde rolar para a esquerda e para a direita faz parte da mecânica. Isso ajuda a eliminar o problema do gesto de rolagem no Mac OS X levando os usuários "para trás" uma página por acidente (tudo muito fácil de fazer se eles já estiverem rolando todo o caminho).

Iain Collins,

34

Outros adotaram a abordagem de dizer "não faça isso", mas isso não responde realmente à pergunta do autor da postagem. Vamos supor que todos saibam que é uma má ideia, mas estamos curiosos para saber como isso é feito ...

Você não pode desabilitar o botão Voltar no navegador de um usuário, mas pode fazer com que seu aplicativo seja interrompido (exibe uma mensagem de erro, exigindo que o usuário reinicie) se o usuário voltar.

Uma abordagem que vi para fazer isso é passar um token em cada URL dentro do aplicativo e em cada formulário. O token é gerado novamente em cada página e, assim que o usuário carrega uma nova página, todos os tokens das páginas anteriores são invalidados.

Quando o usuário carrega uma página, a página só será exibida se o token correto (que foi fornecido para todos os links / formulários na página anterior) foi passado para ela.

O aplicativo de banco on-line que meu banco oferece é assim. Se você usar o botão Voltar, nenhum link funcionará e nenhum recarregamento de página poderá ser feito - em vez disso, você verá um aviso informando que não é possível voltar atrás e é necessário reiniciar.

Thomasrutter
fonte

1

Meu banco adota uma abordagem diferente - ele encerra totalmente a sessão. Usar o botão Voltar é equivalente a fazer logout.

RobG de

Isso soa como a mesma abordagem. Eles estão detectando que você voltou e apresentou uma condição de erro.

thomasrutter

também o joomla contorna a solução de token, um token é gerado por cada página e cada formulário, de fato, existem alguns problemas sobre essa prática, como "quando um usuário fica muito em uma página e seu token expira"

Matteo Bononi 'peorthyr'

1

Não me entenda mal, há muitos problemas com essa prática. Não estou recomendando, estou apenas dizendo como normalmente é alcançado. Eles passam tokens exclusivos entre as páginas para detectar que você não seguiu um dos links esperados da página anterior e, em seguida, encerram a sessão ou mostram um erro. Ele quebra o botão Voltar, quebra a navegação por abas, quebra a marcação de favoritos e / ou compartilhamento de links e muito mais - e mais, não resolve realmente nenhum problema.

thomasrutter

se o problema for que a informação foi perdida ou já está quebrada se o usuário tentar usar o botão Voltar, desativar o botão Voltar seria uma abordagem mais desejada.

PoloHoleSet

10

Embora eu mesmo esteja procurando pela resposta, "Melhores práticas" está ... desatualizado ... Assim como os navegadores estão. (Na verdade, navegadores são fósseis feios)

A solução melhor / mais segura seria que os navegadores implementassem um método / solicitação em que o usuário pudesse conceder à página a capacidade de controlar a interface.

Por quê? Porque para o meu projeto atual estou construindo uma interface 100% JavaScript construída e controlada. E o botão Voltar não tem lugar no meu projeto, pois não há mudança de página. (Ou seja, muito rápido e sem flashes de página por causa de uma atualização .. Assim como um aplicativo real!)

Eu sei por que a capacidade de "roubar" a interface não está lá, e eu entendo. Mas, pelo menos, devemos ter a capacidade de solicitá-lo do navegador! Isso seria realmente a "melhor prática" sem os perigos do roubo.

Mas os navegadores são navegadores ... Não espero que nada de interessante aconteça a esse respeito.

StellarDevil
fonte

1

Discordo 100%, embora esta funcionalidade seja maravilhosa para 99% dos desenvolvedores web, isso deixa os 1% restantes que abusariam dessa funcionalidade, é muito perigoso permitir que um site controle sua capacidade de usar a internet, na minha opinião script de redirecionamento de domínio cruzado precisa ser banido ou permitir que o para confirmar se o script pode ser executado por causa desse tipo de abuso

MikeT

@MikeT - Como desabilitar um botão "voltar" enquanto navego nas páginas específicas do meu aplicativo inibiria a capacidade de alguém de usar a Internet?

PoloHoleSet

@PoloHoleSet se você tem a capacidade de desabilitar o botão voltar do navegador, então todos têm, tudo que você precisa é um redirecionamento para enviar você a uma página que você não queria ir e se eles podem desabilitar seus controles de navegação no navegador como você foge? Tenho certeza que você encontrou a página "você tem um vírus", onde eles pedem que você instale o vírus para remover o vírus inexistente. Agora imagine aquele site onde eles podem realmente impedir que você saia

MikeT

@MikeT - Posso inserir qualquer outro url na janela de navegação, posso fechar uma guia, posso desativar o javascript. A questão não é se alguém PODE, porque você pode, eu posso, qualquer um pode. Por uma questão de política, as pessoas estão dizendo que você NÃO DEVE, se puder. Não estamos falando sobre como projetaríamos um navegador, estamos falando sobre como programamos um aplicativo.

PoloHoleSet

@PoloHoleSet se você for bloquear a navegação, precisará bloquear mais do que apenas o botão Voltar, já que o histórico do navegador e os urls digitados também fornecem aos usuários uma maneira de contornar o fluxo de trabalho. e como eu disse, não estamos falando sobre o que você ou eu faríamos, mas o elemento malicioso, se a única maneira de evitar que um site malicioso assuma o controle do seu navegador for desabilitar todos os js do seu navegador, então você quebrou a internet como a web moderna depende de scripts para fornecer conteúdo, o que é meu ponto, se você quiser tanto controle sobre seus usuários, crie um aplicativo para servir ao seu fluxo de trabalho

MikeT

4

Eu estava procurando a mesma pergunta e encontrei o seguinte código em um site. Pensei em compartilhá-lo aqui:

function noBack()
{
   window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function(evt){ if(evt.persisted) noBack(); }
window.onunload = function(){ void(0); }

No entanto, conforme observado pelos usuários acima, esta nunca é uma boa prática e deve ser evitada por todos os motivos.

user704988
fonte

2

seria bom se você pudesse indicar as razões pelas quais deve ser evitado.

Chris Snow

Pelo meu entendimento, você não pode tecnicamente desabilitar o botão Voltar no navegador de alguém, você só pode fazer isso para que o botão não esteja disponível ou continue a carregar a mesma página. Em vez de fazer isso por meio de JS, use o código do lado do servidor e use a lógica adequada que não precisa usar o botão Voltar. Ações alternativas como recarregar a mesma página ou mostrar mensagem personalizada devem ser usadas.

user704988

2

Se você confiar na tecnologia do cliente, ela pode ser contornada. Javascript pode ser desativado, por exemplo. Ou o usuário pode executar um script JS para contornar suas restrições.

Meu palpite é que você só pode fazer isso rastreando a sessão do usuário do lado do servidor e redirecionando (como em Server.Transfer, não em Response.Redirect) o usuário / navegador para a página necessária.

Devio
fonte

2

<body onLoad="if(history.length>0)history.go(+1)">

Londres
fonte

2

Houve algumas implementações diferentes. Existe uma solução flash e algumas soluções iframe / frame para o IE. Veja isso

http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

BTW: Existem muitos motivos válidos para desativar (ou pelo menos evitar 1 etapa) um botão Voltar - veja o gmail como um exemplo que implementa a solução hash discutida no artigo acima.

Pesquise no Google "como o Ajax quebrou o botão Voltar" e você encontrará muitos artigos sobre testes de usuários e a validade de desativar o botão Voltar.

DallinDyer
fonte

Verifique também o novo visualizador de fotos do Facebook. Observe que o botão Voltar leva de volta uma foto (que é o que você deseja) em vez de fazer o padrão do navegador

DallinDyer

2

Eu também tive o mesmo problema, use essa função de script Java na tag head ou no, está 100% funcionando bem, não deixava você voltar.

 <script type = "text/javascript" >
      function preventBack(){window.history.forward();}
        setTimeout("preventBack()", 0);
        window.onunload=function(){null};
    </script>

Abdul Khaliq
fonte

1

Experimente este código. Funcionou para mim. Basicamente, ele muda o hash assim que a página é carregada, o que muda a página de histórico recente adicionando "1" no URL. Então, quando você clica no botão Voltar, ele redireciona para a mesma página todas as vezes.

 <script type="text/javascript">
    var storedHash = window.location.hash;
    function changeHashOnLoad() { window.location.hash = "1";}
    window.onhashchange = function () {
        window.location.hash = storedHash;
    }
</script>

<body onload="changeHashOnLoad(); ">

</bod>

P Shrestha
fonte

0

Você deve usar postagens com vencimentos adequados e cabeçalhos de cache.

Epascarello
fonte

Veja meu comentário sobre esta resposta para saber por que isso não funciona.

thomasrutter

0

Em vez de tentar desativar o botão Voltar do navegador, é melhor suportá-lo. .NET 3.5 pode muito bem lidar com os botões voltar (e avançar) do navegador. Pesquise no Google: "Scriptmanager EnableHistory". Você pode controlar quais ações do usuário adicionarão uma entrada ao histórico do navegador (ScriptManager -> AddHistoryPoint) e seu aplicativo ASP.NET receberá um evento sempre que o usuário clicar nos botões Voltar / Avançar do navegador. Isso funcionará para todos os navegadores conhecidos

Corne
fonte

0

Globalmente, desativar o botão Voltar é de fato uma prática ruim. Mas, em certas situações, a funcionalidade do botão Voltar não faz sentido.

Esta é uma maneira de evitar a navegação indesejada entre as páginas:

Página inicial (arquivo top.php):

<?php
    session_start();
    $_SESSION[pid]++;
    echo "top page $_SESSION[pid]";
    echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>

Página secundária (arquivo secondary.php):

<?php
    session_start();
    if ($_SESSION[pid] != $_GET[pid]) 
        header("location: top.php");
    else {
        echo "secondary page $_SESSION[pid]";
        echo "<BR><a href='top.php'>top</a>";
    }
?>

O efeito é permitir navegar da página superior para a frente para a página secundária e voltar (por exemplo, Cancelar) usando seus próprios links. Porém, após retornar à página inicial, o botão Voltar do navegador é impedido de navegar para a página secundária.

Anono Mouser
fonte

0

Até eu já enfrentei a mesma situação antes ... e não tive nenhuma ajuda. tente essas coisas talvez funcionem para você

na <head>tag da página de login :

<script type="text/javascript">
    window.history.forward();
</script>

no botão Logout eu fiz isso:

protected void Btn_Logout_Click(object sender, EventArgs e)      
{
    connObj.Close();
    Session.Abandon();
    Session.RemoveAll();
    Session.Clear();
    HttpContext.Current.Session.Abandon();
}

e na página de login coloquei o foco na caixa de texto Nome de usuário como esta:

protected void Page_Load(object sender, EventArgs e)
{
    _txtUsername.Focus();
}

Espero que isso ajude ... :) Alguém por favor me ensine como editar esta página ...

Robin
fonte

a) edite sua resposta b) clique no ponto de interrogação c) clique na ajuda avançada d) leia e aplique :-) Observe também que ctrl-k des / indenta o bloco selecionado para des / formatar como código. Além disso, o formatador não consegue lidar bem com guias (provavelmente não é um problema aqui)

kleopatra

0

SE você precisar suprimir suavemente as teclas delete e backspace em seu aplicativo Web, de modo que quando eles estiverem editando / excluindo itens a página não seja redirecionada inesperadamente, você pode usar este código:

window.addEventListener('keydown', function(e) {
  var key = e.keyCode || e.which;
  if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
    var len=window.location.href.length;
    if(window.location.href[len-1]!='#') window.location.href += "#";
  }
},false);

nvd_ai
fonte

0

Experimente este código. Você só precisa implementar este código na página mestra e ele funcionará para você em todas as páginas

<script type="text/javascript">
    window.onload = function () {
        noBack();
    }
    function noBack() {
        window.history.forward();
    }
</script>
<body  onpageshow="if (event.persisted) noBack();">
</body>

Suhaib Janjua
fonte

0

O problema com Yossi Shasho Code 's é que a página está rolando para o topo a cada 50 ms. Então, eu modifiquei esse código. Agora está funcionando bem em todos os navegadores modernos, IE8 e superior

var storedHash = window.location.hash;
function changeHashOnLoad() {
    window.location.href += "#";
    setTimeout("changeHashAgain()", "50");
}

function changeHashAgain() {
    window.location.href += "1";
}

function restoreHash() {
    if (window.location.hash != storedHash) {
        window.location.hash = storedHash;
    }
}

if (window.addEventListener) {
    window.addEventListener("hashchange", function () {
        restoreHash();
    }, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", function () {
        restoreHash();
    });
}
$(window).load(function () { changeHashOnLoad(); });

Vishnu TS
fonte

0

Isso parece ter funcionado para nós.

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});

jgabb
fonte

0

<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>

chetan
fonte

Desative o botão Voltar do navegador

Respostas: