I want to disable the back button for a website.
Whenever the person clicks on the browser back button it should not be able to go on the page the user visited before.
4 Answers
history.pushState(null, null, document.title); window.addEventListener('popstate', function () { history.pushState(null, null, document.title); }); This script will overwrite attempts to navigate back and forth with the state of the current page.
Update:
Some users have reported better success with using document.URL instead of document.title:
history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); 
26 Comments
Mohan Seth
Downvoting : as it changes the URL and due to which site crashes on refresh.
Arjun Ajith
@Mckenzie the URL is changed because of history.pushState(null, null, document.title); statement. It puts title of the page in the URL and this causes the crash on refresh. You can replace document.title with your page URL. This will solves your issue. Before downvoting please try to understand the code. It's one of the best solutions I found so far.
Adarsh Khatri
As @ArjunAjith suggest, I replaced
document.title with document.url and it is working. +1 for this answer.
trss
To be noted that this doesn't disable long-pressing of the back button. That behaves normally and lets you go back in history.
Abdul Rauf
it should be
history.pushState(null, document.title, location.href); window.addEventListener('popstate', function (event) { history.pushState(null, document.title, location.href); }); Reference: stackoverflow.com/a/34337617/2073920 |
One cannot disable the browser back button functionality. The only thing that can be done is prevent them.
The below JavaScript code needs to be placed in the head section of the page where you don’t want the user to revisit using the back button:
<script> function preventBack() { window.history.forward(); } setTimeout("preventBack()", 0); window.onunload = function() { null }; </script> Suppose there are two pages Page1.php and Page2.php and Page1.php redirects to Page2.php.
Hence to prevent user from visiting Page1.php using the back button you will need to place the above script in the head section of Page1.php.
For more information: Reference
2 Comments
CodeFarmer
Reference code not working in Chrome.
ema
Also I couldn't work it in Firefox
Our approach is simple, but it works! :)
When a user clicks our LogOut button, we simply open the login page (or any page) and close the page we are on...simulating opening in new browser window without any history to go back to.
<input id="btnLogout" onclick="logOut()" class="btn btn-sm btn-warning" value="Logout" type="button"/> <script> function logOut() { window.close = function () { window.open('Default.aspx', '_blank'); }; } </script> 
4 Comments
Horizon Consulting
The browser warns the user that the site is trying to close their page, and they have the option to click cancel...so here we only redirect them if they truly are logging out and leaving the page.
Shailendra Sharma
use history.pushState() works in all modern browsers which support the HTML5 History API
dhruvpatel
Opening a new window does not have any history for that tab or window and hence this works. but if you want to stay in same window, this is not even close to answering that question.
underscore_d
@dhruvpatel In GNOME’s Epiphany browser, opening new views (tabs/windows) does inherit the history of the parent view.
You can't, and you shouldn't.
Every other approach / alternative will only cause really bad user engagement.
That's my opinion.
11 Comments
Sanchitos
Let's say you are on an online exam, then it got a little sense.
Claudiu Creanga
I think an alert and confirm would work better
Eduard Luca
The most practical example why you should be able to do this, is that when clicking the Back button in Firefox, and you have an iframe open that made a history change, the iframe will go back, not the entire page. That's just bull.
dhruvpatel
In some cases it is needed. If you were displaying a web view, and had control over browser history, you might wanna disable back button at certain point. Consider a situation in which you are ordering something in web view, if you are not disabling back you might end up in double ordering same thing unnecessarily.
Filip Cordas
You are right this is something only bad websites do there is an onbeforeunload event for this.
|
unloadevent useful.