How to Disable or Hide Back Browser Button using JavaScript:
I have found lot of queries on internet about how to disable back browser button.
First Scenario:
Solution:
Solution for above solution is to use a JavaScript function called window.open().
Let us first understand the definition and usage of above function:
Syntax:
window.open(URL,name,specs,replace)
Use:
The open() method opens in new browser window.
Method Description:
Usage:
Using this method, we can customize browser window.
Now, how can we use this function to fulfill our requirement:
In this scenario, I do not want back browser button and menu bar (because it also provides options to back and forward the page in history tab).
so I will write the code as follows:
window.open("url", "mywindow", "toolbar=0, menubar=0");
See the result in screenshot:
I have found lot of queries on internet about how to disable back browser button.
After lots of search, I came to a conclusion that back browser button cannot be disabled, however we can tweak it according to our requirement.
So, the main work is how to tweak it to fulfill our requirement. For this, first we need to identify the need and scenario of disable back button.
Need to disable back button so that user cannot go back and forth through browser back button or only use back buttons created in application.
Solution:
Solution for above solution is to use a JavaScript function called window.open().
Let us first understand the definition and usage of above function:
Syntax:
window.open(URL,name,specs,replace)
Use:
The open() method opens in new browser window.
Method Description:
| Parameter | Description | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| URL | Optional. Specifies the URL of the page to open. If no URL is specified, a new window with about:blank is opened | ||||||||||||||||||||||||||||
| name | Optional. Specifies the target attribute or the name of the window. The following values are supported:
| ||||||||||||||||||||||||||||
| specs | Optional. A comma-separated list of items. The following values are supported:
| ||||||||||||||||||||||||||||
| replace | Optional.Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
|
Usage:
Using this method, we can customize browser window.
Now, how can we use this function to fulfill our requirement:
In this scenario, I do not want back browser button and menu bar (because it also provides options to back and forward the page in history tab).
so I will write the code as follows:
window.open("url", "mywindow", "toolbar=0, menubar=0");
See the result in screenshot:
In the screen shot you can see that, back browser button has been hide. Now, user cannot use back browser button.
We have fulfill our first scenario to a bit because user still can go back for forward using back space key and Alt-Left Arrow and on right click on page.
I have already posted how can we disable backspace key (Link) and Alt-Left key (Link)events and disable right click on browser (Link).
Thanks for information.I tested.. this may not work for all browsers.. for this we have to go JQuery.. this may help you.. http://aspnettutorialonline.blogspot.com/2012/05/disable-right-click-on-browser-using.html
ReplyDeleteHi Nicolas,
ReplyDeleteActually i am using the below code to disable the back button of browser with alert box. It is working fine in IE but i am unable to get the alert box in Chrome of Firefox.
I tried with many ways but i didnt get anything for that.
Can you please give me solution for that and do needfull.
This is my code.
window.onbeforeunload = onBack;
function onBack(evt){
if (evt == undefined){
evt = window.event;
}
if ( (evt.clientX < 0) ||
(evt.clientY < 0) ||
(evt.clientX > document.body.clientWidth) ||
(evt.clientY > document.body.clientHeight))
{
/* alert("EVT X: "+evt.clientX);
alert("EVT Y: "+evt.clientY);
alert("client width: "+document.body.clientWidth);
alert("client height: "+document.body.clientHeight); */
//alert("Unload from browser button press");
return calibrate(evt);
}
return undefined;
}
function noBack()
{
//window.history.forward();
}
function calibrate(evt){
if(evt.clientX > 140){
//do nothing
}else{
alert("Clicking Back button is Prohibited"+evt.clientX);
}
}