JavaScript History forward() method explained

Posted on May 06, 2021

Navigate the browser history programatically using the History forward() JavaScript method

The JavaScript forward() method is a method the history object, which is always available as part of the browser’s window object.

Calling the history.forward() method is the same as clicking the Forward button in your browser.

Here’s how you call the method in an HTML page:

<body>
  <h1>History Forward</h1>
  <script>
    window.history.forward();
  </script>
</body>

The forward() method will do nothing when there is no next page in your browser history.

Aside from navigating to the next page in the browser history, the forward() method is also commonly used to disable the back button for web applications that require higher security measure. This is done by adding the forward() method to all pages that you want the user to avoid getting back to.

For example, let’s say you have two web pages, home.html and about.html with the home.html allowing you to navigate to about.html:

<body>
  <h1>Home page</h1>
  <a href="/about.html">To about page</a>
</body>

When you don’t want the user to get back from the About page to the Home page, you can add the script in the Home page as follows:

<body>
  <h1>Home page</h1>
  <a href="/about.html">To about page</a>
  <script>
    window.history.forward();
  </script>
</body>

Now when you click the Back button from About page, the Home page will automatically call the forward() method. Since there is no way to disable the browser’s Back button using JavaScript, this trick has been used for special applications that needs to stop the user from navigating back from the current page.

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.