5
How to prevent the user from using the javascript back button? I have a page and I want it to use the page back button.
1 answer
8
The idea here to block the browser back button is to put a #hash in the browser url preventing the page from coming back and not disabling the button itself. And also present an msg to the user saying that he can’t go back through the browser button.
Works in multiple browsers, including 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)); If you want to display an msg on the screen you can use this way or put a alert in the code.
<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>
-
Tested and approved in Google Chrome 48.0.2564.116 (64-bit), OS = MAC OS X 10.9.5 (13F34)
-
I used this solution to make the lock, is working properly. However, we have some screens with tabs, and to access a specific tab, we use url + '#name_aba'. With this js changes the url to #lock and no longer accesses. How to resolve?
Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
Hello, Almir. Welcome back! Great initiative, but to follow the format of the site, post as a question-- something like "How to disable the 'back' function of the browser?" and publish your solution as the same answer.
– Pablo Almeida
Cool, but how do I format it to look like code? As I am logged in have not the formatting box that appears here when I ask, for you should appear.
– Almir Antonio
You are probably trying to do this in a comment. Use the response box, which is just below "Your answer",. There are the formatting tools. Select the code and click on the icon that looks like this: { } .
– Pablo Almeida
That’s exactly what I was doing, now that’s cool.
– Almir Antonio