Sometimes you may need to prevent your website users from going back to previous web page on their browsers by clicking the back button. This is especially true for checkout pages and pages where payment processing is going on. In this article, we will learn how to stop browser back button using JavaScript.
Here are the steps to stop browser back button using JavaScript. We will look at two ways to do this.
1. Method 1
We will create 2 html pages such that you can go to the second page by clicking a link on the first page. On the first page, we will add a JavaScript function which basically disables the back button. So when you click back button from second page, it will not go back to the first page. Create the first html page a.html.
Blocking Back Button using javascript body { font-family:Arial; color:green; } window.history.forward[]; function noBack[] { window.history.forward[]; }GeeksforGeeks
Click here to Goto Link to second page
In the above HTML page, we have created a JavaScript code that automatically forces the browser to go forward to the next page, when back button is clicked. So when a user clicks the back button after clicking a link on this page, browser will forcefully bring them back to the second page, without going back to previous page.
Create the second html page b.html
Blocking Back Button using javascriptThis is second page
On this page, back button functionality is disabled.
Open a.html in web browser and click the link to go to b.html. Once b.html page is loaded, click back button. You will see that it is disabled.
2. Method 2
Here also we have the same approach. We create 2 html pages a.html and b.html. You can click a link on a.html to go to b.html. Once b.html is loaded users will not be able to go back to previous page using back button on browser.
Create a.html page.
First Page function preventBack[] { window.history.forward[]; } setTimeout["preventBack[]", 0]; window.onunload = function [] { null };This is first page
Goto second Page
In the above HTML page, we have added a JavaScript function preventBack[] that forces the browser to go forward, instead of backward. It is called on page load.
Create b.html page.
Second PageSecond Page - Back Button is disabled here.
Open a.html page in web browser, click the link on it to go to b.html. Once b.html is loaded click back button on browser. You will see that the browser does not go back to previous page.
In this article, we have learnt how to stop browse back button to prevent it from going to the previous page. It is useful in case you don’t want to allow users from going back to previous page by clicking back button on their browsers, especially if there is a long running process going on in the back end.
Also read:
How to Disable Clicks in IFrame Using
JavaScript
How to Replace Values in Pandas DataFrame
How to Add New Column to Existing DataFrame
How to Change Element Class Property Using
JavaScript
How to Get Value of Data Attribute in JavaScript
Related posts:
This is one JavaScript trick out of many, which is not advisable to use in websites, though very useful in terms of security and integrity of online data. Restricting or Disabling the Browser back button can be very annoying for users who might wish to go back to the previous page from the existing page.
Click Here... $[document].ready[function[] { function disableBack[] { window.history.forward[] } window.onload = disableBack[]; window.onpageshow = function[evt] { if [evt.persisted] disableBack[] } }];
The second page [page2.htm]
Click the browser back button
or hit the Backspace key.
How does this work?
The script, which actually restricts the user from getting back to the first page from second page, will exists in the first page itself.
window.history.forward[]
The above JavaScript function in the first page uses the history of the browser and forces it to navigate forward instead of going to the previous page. Therefore, every time the user clicks the back button or hits the backspace key, it will result in the Browser navigating or pushing the user forward and showing the same page [the page 2].
Does it really work?
How to Disable a Hyperlink using JavaScript or jQuery
While clicking the back button, you might have noticed that it does shifts the focus on the first page for a fraction. Therefore, does this script really make any sense?
Imagine a scenario where, one of your clients is filling up the registration form and has to fill many details before submitting it. However, in a rush hits the backspace key on the keyboard or clicks the Browser back button using a mouse.
Therefore, will clicking the Browser back button still ensures that the second page [page2.htm] will hold the data? To test this scenario, we will add a textbox to the second page and see if the data stays intact.
Yes it works. Add more textboxes and check if it still works.
Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - No | Safari 5.1.4 - Yes
Conclusion
There can be many ifs and buts to numerous scripts, which we write in our lifetime and there is no harm in knowing the exact functionalities and usage in our application. It might have some usefulness in the many applications we design.
← PreviousNext →