Como impedir que o usuário use o botão voltar do navegado com javascript? Tenho uma pagina e quero que ele use o botão da pagina para voltar.
-
2Olá, Almir. Seja bem-vindo! Ótima iniciativa, mas, para seguir o formato do site, publique como uma pergunta-- algo como "Como desabilitar a função do botão 'voltar' do navegador?" e publique a sua solução como resposta mesmo.– Pablo AlmeidaCommented 26/02/2016 às 18:42
-
Legal, mas como que eu formato para ficar com essa aparência de código? Como eu estou logado não tem a caixa de formatação que aparece aqui quando vou perguntar, pra vc deve aparecer.– Almir AntonioCommented 26/02/2016 às 19:19
-
Você provavelmente está tentando fazer isso num comentário. Use a caixa de resposta, que fica logo abaixo de "Sua resposta",. Lá tem as ferramentas de formatação. Selecione o código e clique no ícone que se parece com isso: { } .– Pablo AlmeidaCommented 26/02/2016 às 19:21
-
Exatamente isso que eu estava fazendo, agora esta legal.– Almir AntonioCommented 26/02/2016 às 20:19
Adicione um comentário
|
1 Resposta
A ideia aqui para bloquear o botão voltar do browser é colocar um #hash na url do navegador impedindo a pagina de voltar e não desabilitar o próprio botão em si. E ainda apresentar uma msg ao usuário dizendo que ele não pode voltar pelo botão do browser.
Funciona em vários navegadores, inclusive o IE.
/**
noback v0.0.1
library for prevent backbutton
Author: Kiko Mesquita: http://twitter.com/kikomesquita
Based on stackoverflow
* Copyright (c) 2015 @ kikomesquita
*/
(function(window) {
'use strict';
var noback = {
//globals
version: '0.0.1',
history_api : typeof history.pushState !== 'undefined',
init:function(){
window.location.hash = '#no-back';
noback.configure();
},
hasChanged:function(){
if (window.location.hash == '#no-back' ){
window.location.hash = '#BLOQUEIO';
//mostra mensagem que não pode usar o btn volta do browser
if($( "#msgAviso" ).css('display') =='none'){
$( "#msgAviso" ).slideToggle("slow");
}
}
},
checkCompat: function(){
if(window.addEventListener) {
window.addEventListener("hashchange", noback.hasChanged, false);
}else if (window.attachEvent) {
window.attachEvent("onhashchange", noback.hasChanged);
}else{
window.onhashchange = noback.hasChanged;
}
},
configure: function(){
if ( window.location.hash == '#no-back' ) {
if ( this.history_api ){
history.pushState(null, '', '#BLOQUEIO');
}else{
window.location.hash = '#BLOQUEIO';
//mostra mensagem que não pode usar o btn volta do browser
if($( "#msgAviso" ).css('display') =='none'){
$( "#msgAviso" ).slideToggle("slow");
}
}
}
noback.checkCompat();
noback.hasChanged();
}
};
// AMD support
if (typeof define === 'function' && define.amd) {
define( function() { return noback; } );
}
// For CommonJS and CommonJS-like
else if (typeof module === 'object' && module.exports) {
module.exports = noback;
}
else {
window.noback = noback;
}
noback.init();
}(window));
Caso queira apresentar uma msg na tela pode usa desta forma ou colocar um alert
no código.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="msgAviso" style="display:none;">
<span><img src="desabilitaBotao.png"></span>
<span>Não é permitido voltar pelo botão do browser.</span>
</div>
-
Testado e aprovado no Google Chrome 48.0.2564.116 (64-bit), SO = MAC OS X 10.9.5 (13F34)– denisCommented 26/02/2016 às 20:31
-
Utilizei essa solução para fazer o bloqueio, está funcionando corretamente. Porém, temos algumas telas com abas, e para acessar uma aba específica, utilizamos url + '#nome_aba'. Com isso o js altera a url para #bloqueio e não acessa mais. Como resolver? Commented 8/05/2018 às 14:37