como parar o botão voltar do navegador usando javascript

155

Estou fazendo um aplicativo de teste online em php. Quero restringir o usuário a voltar em um exame. Eu tentei o seguinte script, mas ele interrompe meu cronômetro. O que devo fazer?

Eu incluí o código fonte. O cronômetro é armazenado em cdtimer.js

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

Eu tenho o temporizador do exame, que leva uma duração para o exame a partir de um valor mysql . O temporizador inicia de acordo, mas para quando eu coloco o código para desativar o botão Voltar. Qual é o meu problema?

javascript browser Sawant Akshay
fonte

para o nodeJS detectar e parar o evento de botão do navegador

Darshan Dixit

157

Existem inúmeras razões pelas quais desativar o botão Voltar realmente não funciona. Sua melhor aposta é avisar o usuário:

window.onbeforeunload = function() { return "Your work will be lost."; };

Esta página lista várias maneiras pelas quais você pode tentar desativar o botão Voltar, mas nenhuma é garantida:

http://www.irt.org/script/311.htm

ColinE
fonte

Você deve verificar no seu código PHP se a resposta já foi enviada e, em caso afirmativo, rejeitá-la.

Sela Yair

4

Vale ressaltar que agora as coisas mudaram nos navegadores modernos: consulte stackoverflow.com/questions/19926641/…

devrobf

126

Geralmente, é uma má idéia substituir o comportamento padrão do navegador da web. O script do lado do cliente não tem o privilégio suficiente para fazer isso por motivos de segurança.

Também são feitas algumas perguntas semelhantes,

Você pode-não realmente desativar botão do navegador de volta. No entanto, você pode fazer mágica usando sua lógica para impedir que o usuário volte, o que criará uma impressão como se estivesse desativada. Aqui está como, confira o seguinte trecho.

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

Como o JavaScript é puro, funcionaria na maioria dos navegadores. Também desabilitaria a tecla backspace, mas a chave funcionará normalmente dentro dos inputcampos e textarea.

Configuração recomendada:

Coloque esse trecho em um script separado e inclua-o na página em que deseja esse comportamento. Na configuração atual, ele executará o onloadevento DOM, que é o ponto de entrada ideal para esse código.

Trabalhando DEMO!

Testado e verificado nos seguintes navegadores,

Cromada.
Raposa de fogo.
IE (8-11) e Edge.
Safári.

Rohit416
fonte

1

Não entendo por que o setTimeout. Se eu apenas acrescentar #! para localizar e remover o setTimeout, ele ainda funciona.

baraber

sim verdade, ele vai funcionar, mas se eu tiver que me lembrar de algo da memória quando eu tive isso em primeiro lugar ... o fluxo não estava funcionando corretamente no chrome como em outros navegadores. O Chrome retornou o vazio location.hashinicialmente, por isso me fez fazê-lo assim. Poderia haver mais melhorias nisso, mas 50 ms apenas uma vez não me custaram muito, então deixo lá.

Rohit416 27/05

Ah, isso foi um desafio de memória, obrigado :) Eu usei sua solução, mas substitui o setInterval pelo manipulador .onhashchange. Funciona perfeitamente. Mas eu tenho outra pergunta: por que "if (global.location.hash! = _Hash)"? Eu acho que essa condição só pode ser verdadeira o tempo todo, porque window.location.hash sempre deve retornar o hash com o caractere '#' e _hash nunca conterá o caractere '#'. Você se lembra de algo sobre isso? Isso é apenas uma proteção, caso o navegador não retorne o caractere '#' em location.hash?

27515 baraber

Criei um arquivo .js conforme recomendado e incluí o arquivo js no meu código usando o seguinte: <script src = "./ javascript / noback.js"> </script> Mas ainda posso executar uma recuperação (usando o Safari). o que estou perdendo? Esta biblioteca foi adicionada da mesma maneira que outras bibliotecas que eu uso, portanto a inclusão é boa.

Tim

1

Bloqueia o botão voltar no ipad air, ios 8

plugincontainer

75

Me deparei com isso, precisando de uma solução que funcionasse corretamente e "de maneira adequada" em vários navegadores, incluindo o Mobile Safari (iOS9 no momento da postagem). Nenhuma das soluções estava certa. Eu ofereço o seguinte (testado no IE11, FireFox, Chrome e Safari):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

Observe o seguinte:

history.forward()(minha solução antiga) não funciona no Mobile Safari --- parece não fazer nada (ou seja, o usuário ainda pode voltar). history.pushState()funciona em todos eles.
o terceiro argumento para history.pushState()é um URL . Soluções que passam uma sequência como 'no-back-button'ou 'pagename'parecem funcionar bem, até você tentar Atualizar / Recarregar na página, quando o erro "Página não encontrada" é gerado quando o navegador tenta localizar uma página com essa URL. (É provável que o navegador inclua essa sequência na barra de endereço quando estiver na página, o que é feio.) location.hrefDeve ser usado para o URL.
o segundo argumento para history.pushState()é um título . Olhando pela web, a maioria dos lugares diz que "não é usado", e todas as soluções aqui passam nullpor isso. No entanto, no Mobile Safari, pelo menos, isso coloca o URL da página no menu suspenso do histórico que o usuário pode acessar. Porém, quando adiciona uma entrada para uma visita à página normalmente, coloca seu título , o que é preferível. Então, passar document.titlepor isso resulta no mesmo comportamento.

JonBrave
fonte

3

Essa é a resposta correta. Funciona perfeitamente no Chrome, IE 11, Firefox e Edge.

precisa saber é o seguinte

3

Essa deve ser a resposta aceita, é multiplataforma e funciona bem.

calbertts

no jsp sevlet Após o envio, atualizo a página. página não exibida (erro)

Madhuka Dilhan

Melhor solução até agora, mas provavelmente não está trabalhando em navegadores mais antigos

j4n7

2

Solução perfeita para navegadores modernos. Eu combinei com a resposta @ Rohit416 para oferecer suporte a navegadores mais antigos usando apenas a condição typeof (history.pushState) === "função" funciona sem problemas.

Miklos Krivan

74

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

vrfvr
fonte

3

Gênio! Usei isso para evitar o acionamento acidental do botão Voltar quando o usuário pressiona Backspace (em campos desativados / somente leitura, por exemplo) em um aplicativo Web em que o retorno / encaminhamento não fazia sentido. Confirmado desativa a funcionalidade de avançar e retroceder (embora não os botões), incluindo a opção do menu de contexto; verificado no IE8 até o IE11, Chrome e FF.

nothingisnecessary

1

Isso funciona, mas redefine todos os dados inseridos nas caixas de texto. É possível impedir a limpeza?

Somnium

6

Ela trabalhou para mim no firefox, mas não no Chrome (versão 36.0.1985.143)

baraber

Isso funcionou para mim também, mas no Firefox parece interromper a window.history.back()função. Queremos impedir que os usuários cliquem no botão voltar do navegador, mas, em alguns casos, fornecemos nosso próprio botão voltar na página. Existe alguma maneira de fazê-lo funcionar?

AsGoodAsItGets

1

Isso não funciona para mim. Estou usando o Chrome versão 55 no Windows 10. Coloquei o script em vários locais (início do cabeçalho, fim do corpo etc.) e ainda posso usar o botão Voltar para voltar à página anterior.

Victor Stoddard

28

Esse código desabilitará o botão voltar dos navegadores modernos que suportam a API de histórico do HTML5. Em circunstâncias normais, pressionar o botão Voltar retorna um passo para a página anterior. Se você usar history.pushState (), começará a adicionar sub-etapas extras à página atual. A maneira como funciona é: se você usar o history.pushState () três vezes, comece a pressionar o botão Voltar, nas três primeiras vezes em que voltará a navegar nessas subetapas e na quarta vez em que voltará a a página anterior.

Se você combinar esse comportamento com um ouvinte de popstateevento, poderá configurar essencialmente um loop infinito de sub-estados. Então, você carrega a página, pressiona um subestado e depois pressiona o botão voltar, que abre um subestado e também empurra outro, portanto, se você apertar o botão voltar novamente, ele nunca ficará sem subestados para pressionar . Se você achar que é necessário desativar o botão Voltar, isso o levará até lá.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

Jeremy Warne
fonte

2

Em qualquer navegador, tente uma página Atualizar / Recarregar depois disso e você ficará preso ao erro "Página não encontrada", pois tenta encontrar uma página chamada no-back-button... (É provável que o navegador também seja exibido no-back-buttonno endereço bar também, o que parece feio.) Para ser justo, essa não é a única solução aqui que sofre com isso. O terceiro argumento para history.pushState()é um URL e deve ser o URL da sua página atual: use em location.hrefvez disso.

JonBrave

4

Isso funcionou para mim. Basta alterar 'no-back-button' para "window.top.location.pathname + window.top.location.search" e ele permanecerá o nome da página em que você está, mesmo em atualização

Steve

Entre outros, isso funcionou para mim, com voto positivo. Consulte stackoverflow.com/questions/19926641/… .

user2171669

Eu explorei muitos casos, e esta é a melhor solução para o local de 1 página

djdance

Esta é uma solução muito ruim, porque você está alterando a URL, portanto, se você voltar e avançar algumas vezes, o Chrome será redirecionado para um caminho que não existe

Tallboy

21

Para restringir o evento de retorno do navegador

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

Fezal halai
fonte

1

Isso funciona muito bem no chrome !, por que as pessoas não estão votando, pois esta é a melhor resposta?

Tarık Seyceri

1

Acabei de testar usando o sistema operacional Windows 10 nos seguintes navegadores (funciona muito bem) Versão Chrome 74.0.3729.108 (Versão oficial) (Chrome oficial) (64 bits) Versão Canária do Chrome versão 76.0.3780.0 (Versão oficial) (versão oficial do Chrome) Chromium versão 32.0 (32 bits). 3355.0 (Build do desenvolvedor) (64 bits) Firefox 66.0.3 (64 bits) EDGE IE 11 Safari 5.1.7

Tarık Seyceri

2

@ TarıkSeyceri porque isso só funciona em navegadores que a) apoiar a história API b) a página é realmente usando o API história para gerenciar o estado

givanse

Não está mais funcionando no Chrome após a versão 75. Consulte: support.google.com/chrome/thread/8721521?hl=en

gene b.

13

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

Eng Mahmoud El Torri
fonte

12

Embora essa possa ser uma resposta válida, é muito mais provável que você ajude outras pessoas, explicando o que o código faz e como ele funciona. As respostas somente de código tendem a receber menos atenção positiva e não são tão úteis quanto as outras respostas.

precisa

Testado no Chrome, Firefox, IE e Edge. Isso funciona bem. Você me salvou.

Nooovice Boooy

12

Esta é a maneira que eu poderia fazê-lo. Estranhamente, mudar a janela. O local não funcionou bem no chrome e no safari. Acontece que o location.hash não cria uma entrada no histórico para chrome e safari. Então você terá que usar o pushstate. Isso está funcionando para mim em todos os navegadores.

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };

Sanchitos
fonte

1

Isso não funciona no IE9 e abaixo, o pushState não é suportado.

Alex

Ótimo. Essa é uma boa abordagem e funciona em quase todos os navegadores mais recentes.

Venugopal M

1

Funciona muito bem em IE posteriores. Basta colocar diretamente no document.ready: $(document).ready(function () { .... });

Oppa Gingham Style

Lembre-se de que você deve adicionar sua URL atual antes de "#nbb". ie "conta # nbb"

Mladen Janjetovic

9

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

Ashwin Patil
fonte

Existe alguma documentação em algum lugar event.persisted?

Muhd

1

Aqui está o link encontrado para sua pergunta. Encontre-o aqui @Muhd

rbashish 3/17/17

Eu apenas tentei este, não está funcionando

Pedro Joaquín

8

Este artigo em jordanhollinger.com é a melhor opção que eu sinto. Semelhante à resposta de Razor, mas um pouco mais clara. Código abaixo; créditos completos a Jordan Hollinger:

Página anterior:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Página do JavaScript sem retorno:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

dav_i
fonte

8

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

Este javascript não permite que nenhum usuário volte (funciona no Chrome, FF, IE, Edge)

Surajit Mitra
fonte

5

Experimente com facilidade:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

Lakhan
fonte

5

Este código foi testado nos navegadores Chrome e Firefox mais recentes.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

Franklin Innocent F
fonte

Bem-vindo, huyhoang.

Franklin Innocent F

3

Função muito simples e limpa para quebrar a seta traseira sem interferir com a página posteriormente.

Benefícios:

Carrega instantaneamente e restaura o hash original, para que o usuário não se distraia com a alteração visível da URL.
O usuário ainda pode sair pressionando 10 vezes (isso é bom), mas não acidentalmente
Nenhuma interferência do usuário como outras soluções usando onbeforeunload
Ele é executado apenas uma vez e não interfere com outras manipulações de hash, caso você use isso para rastrear o estado
Restaura o hash original, quase invisível.
Usa setIntervalpara não quebrar os navegadores lentos e sempre funciona.
Javascript puro, não requer histórico de HTML5, funciona em qualquer lugar.
Não invasivo, simples e funciona bem com outro código.
Não usa o unbeforeunloadque interrompe o usuário com o diálogo modal.
Apenas funciona sem problemas.

Nota: algumas das outras soluções são usadas onbeforeunload. Por favor, não use onbeforeunloadpara esta finalidade, que abre uma janela sempre que os usuários tentam fechar a janela, backarrow hit, etc. Modais como onbeforeunloadsão geralmente apropriado apenas em raras circunstâncias, como quando eles realmente fez alterações na tela e paraíso' os salvou, não para esse fim.

Como funciona

Executa no carregamento da página
Salva seu hash original (se houver um no URL).
Anexa sequencialmente # / noop / {1..10} ao hash
Restaura o hash original

É isso aí. Sem mais brincadeiras, sem monitoramento de eventos em segundo plano, nada mais.

Use-o em um segundo

Para implantar, basta adicionar isso em qualquer lugar da sua página ou em seu JS:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

erro fatal
fonte

2

Parece que isso funcionou para desativar o botão voltar no navegador, bem como o botão voltar atrás.

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

jgabb
fonte

1

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

user3789888
fonte

1

Você simplesmente não pode e não deve fazer isso. No entanto, mas isso pode ser útil

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

Funciona no meu chrome e firefox

Shailendra Sharma
fonte

1

Tente isso para evitar o botão backspace no IE, que por padrão atua como "Voltar":

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

Ajit Kamble
fonte

1

Acredito que a solução perfeita, na verdade, é bastante direta, que usei há muitos anos.

É basicamente atribuir o evento "onbeforeunload" da janela, juntamente com os eventos 'mouseenter' / 'mouseleave' do documento em andamento, para que o alerta seja acionado apenas quando os cliques estiverem fora do escopo do documento (que poderia ser o botão voltar ou avançar do navegador)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

Abdelqoddous Rifai
fonte

1

Em um navegador moderno, isso parece funcionar:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

Joakim L. Christiansen
fonte

1

Não tenho certeza do que aconteceu, mas por alguma razão eu votei esta resposta em outra máquina. Só de informar que essa não era minha intenção, mas não posso mais desfazer a votação: /

Lennard Fonteijn 11/12/19

Há sentimentos feridos @LennardFonteijn :)

Joakim L. Christiansen

1

Nenhuma das respostas mais votadas funcionou para mim no Chrome 79 . Parece que o Chrome mudou seu comportamento em relação ao botão Voltar após a versão 75, veja aqui:

https://support.google.com/chrome/thread/8721521?hl=en

No entanto, nesse segmento do Google, a resposta fornecida por Azrulmukmin Azmi no final funcionou. Esta é a solução dele.

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

O problema com o Chrome é que ele não aciona o evento onpopstate, a menos que você faça uma ação no navegador (por exemplo, chame history.back). É por isso que os adicionei ao script.

Não entendo completamente o que ele escreveu, mas, aparentemente, history.back() / history.forward()agora é necessário um adicional para bloquear o Back in Chrome 75+.

gene b.
fonte

Depois de pesquisar alto e baixo, isso finalmente funcionou também nos navegadores Android, onde, por algum motivo, o evento do botão voltar do navegador não foi detectado com nenhum outro script que eu tentei. Obrigado, obrigado, obrigado novamente! Testado e funcionando bem no Chrome 83, para computadores e dispositivos móveis! Gene, você é um salva-vidas!

Ivan

0

Eu crio uma página HTML (index.html). Eu também crio um (mechanic.js) dentro de uma pasta / diretório (script). Em seguida, coloco todo o meu conteúdo dentro de (index.html) usando as tags form, table, span e div, conforme necessário. Agora, aqui está o truque que fará o retrocesso / avanço não fazer nada!

Primeiro, o fato de você ter apenas uma página! Segundo, o uso de JavaScript com tags span / div para ocultar e exibir conteúdo na mesma página quando necessário através de links regulares!

Dentro de 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

Dentro de 'mechanic.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

Parece cabeludo, mas observe os nomes e chamadas das funções, HTML incorporado e as chamadas de identificação da tag de extensão. Isso foi para mostrar como você pode injetar HTML diferente na mesma tag de span na mesma página! Como o Back / Forward pode afetar esse design? Não pode, porque você está ocultando objetos e substituindo outros na mesma página!

Como esconder e exibir? Aqui vai: Funções internas no 'mecanismo.js' conforme necessário, use:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

Dentro das funções de chamada 'index.html', através de links:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

e

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

Espero não ter lhe dado dor de cabeça. Desculpe se eu fiz :-)

hacker1033
fonte

0

No meu caso, essa foi uma ordem de compra. Então, o que eu fiz foi desativar o botão. Quando o usuário clicou em voltar, o botão ainda estava desativado. Quando eles clicaram em mais uma vez e, em seguida, clicaram em um botão de página para avançar. Eu sabia que o pedido foi enviado e pulado para outra página.

No caso em que a página realmente atualizou, o que tornaria o botão (teoricamente) disponível; Pude reagir no carregamento da página que o pedido já foi enviado e redirecionar também.

Valamas
fonte

0

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

Kamlesh
fonte

3

1. O que javascript:você escreveu define um rótulo JavaScript chamado "javascript". Duvido muito que você pretendesse isso; Eu suspeito que você esteja se misturando href=javascript:...com <script>blocos JavaScript . 2. language="JavaScript"deixou de ser um <script>atributo válido no HTML5. 3. Os 2 pontos acima não importam muito; o que importa é que history.forward(1)não funciona no Mobile Safari (pelo menos). Use uma das history.pushState()respostas.

JonBrave

0

Você pode simplesmente colocar um pequeno script e depois verificar. Não permitirá que você visite a página anterior. Isso é feito em javascript.

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

A função window.onunload é acionada quando você tenta visitar a página anterior ou anterior através do navegador.

Espero que isto ajude.

noobprogrammer
fonte

0

Eu tive esse problema com o React.JS. (componente de classe)

E resolva facilmente

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

Eu usei HashRoutera partir react-router-dom.

Oo
fonte

0

Basta definir location.hash="Something": Ao pressionar o botão Voltar, o hash será removido do URL, mas a página não voltará. Esse método é bom para evitar a volta acidental, mas por motivos de segurança, você deve projetar seu back-end para impedir a resposta.

Abhishek
fonte

-1

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

Chauncey.Zhong
fonte

1 obtenha o objeto de evento 2. para determinar o tipo de fonte do evento, como condição de julgamento. 3.Quando o hit Backspace, o tipo de origem do evento para a senha ou único e a propriedade readonly para true ou enabled for false, ocorrerá uma falha na chave de backspace. Quando bater Backspace, a fonte dos tipos de eventos a senha ou individuais, é o fracasso tecla de retrocesso

Chauncey.Zhong

A pergunta é sobre o uso do botão Voltar de navegação, não da tecla Backspace.

Quentin

como parar o botão voltar do navegador usando javascript

Respostas:

Configuração recomendada: