How to disable back browser button using javascript
|
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. Show Here are the steps to stop browser back button using JavaScript. We will look at two ways to do this. 1. Method 1We 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.
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
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 2Here 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.
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.
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 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. Browser Support: How to Disable or Enable Submit Button using jQuery It sometimes creates a bad rapport for the website, since users do not want to be restricted for their activities while browsing. However, it is always good for a web developer to know a trick or two, as it might sometimes help them maintain multiple web pages efficiently. Many online banks restrict their users to click the refresh or back button, as it might hinder or stop a transaction in process. Doing so, the bank or the client might lose valuable data in the process. In our example, we will use two simple HTML pages. The first page will call the second page using a link and in the process using JavaScript, we will restrict the user from getting back to the first page (from the second page) using the Browser back button. The first page (page1.htm)
The second page (page2.htm)
Click the browser back button
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: 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 → Can you disable back button?You can-not actually disable the browser back button. However, you can do magic using your logic to prevent the user from navigating back which will create an impression like it is disabled.
How do I disable the Back button in Chrome?Select Settings from the list. Scroll down to the Privacy and Security section, and select the Site settings from the menu. Choose the Pop-ups and redirects option within Site settings. Toggle the button to turn OFF and block the pop-ups and redirection.
How do you make browser Back button disable in react JS?To achieve this, we'll do the following: Create a top-level
Can we override browser back button?You can't just override a browser's button's behavior. Imagine the security problems it would cause if anyone could just "Fake" browser navigation like that. Making users think they navigated to a different site is chapter 1 in phishing for dummies...
|
