6

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.

4
  • 2
    Olá, 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. Commented 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. Commented 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: { } . Commented 26/02/2016 às 19:21
  • Exatamente isso que eu estava fazendo, agora esta legal. Commented 26/02/2016 às 20:19

1 Resposta 1

10

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>
2
  • Testado e aprovado no Google Chrome 48.0.2564.116 (64-bit), SO = MAC OS X 10.9.5 (13F34)
    – denis
    Commented 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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .