Javascript go back to previous page

How to write a go back button for JavaScript applications

Going to the previous screen is such a common action on the web it has a dedicated button in baked in all browsers. Still, some web apps benefit from indicating this action in their interface, but writing a back button that avoids race conditions and hydration issues might be more complicated than it looks like. We don’t need back and forward actions to be present in our applications, but in some cases, it makes sense to include a back button, Chris Coyer puts this better than me.

In previous articles, I described a progressive enhancement approach for React applications including form validation, taking care of accessibility from the very first moment we start developing. The application I built for these examples has a specific view for a single search result, without a button to go back to the previous results, the context of a previous search action felt missing.

Writing the go back button

To build this component we are going to start with the HTML, as it is a navigation action it makes sense for this back button to be represented with an anchor element.

import React from 'react' const BackButton = () =>  return a href="/">Go back/a> > 

Though we are going to override the behavior of the anchor with JavaScript, it’s important to put something inside its href attribute. If you are doing server-side rendering, this will be the fallback route the user will navigate to in case they click it before the bundle is ready.

Back in history with JavaScript

There’s more than one way to achieve this, as all of them are similar let’s go with the basic one you might find while searching.

function goBack(evt)  // ignore the native anchor action evt.preventDefault() history.back() > 

If you are using a routing library like React Router or even routers present in frameworks like Next.js you might be able to do something similar to the following.

import Router from 'next/router' function goBack(evt)  // ignore the native anchor action evt.preventDefault() Router.back() > 

Check the documentation of the routing library or framework you are using, but big chances are their back method is just wrapping internally history.back anyways. The next thing to do is bind this method to our component.

const BackButton = () =>  return ( a href="/" onClick=goBack>> Go back /a> ) > 

If you are relying completely on client-side rendering and giving your users a white screen until your bundle loads, then this is all you are going to need. The article might as well end here. But following the same tone of previous articles I wrote, I don’t want to take JavaScript for granted. Even if I think all my users will have JavaScript enabled, building solutions not depending on it usually leads to more foolproof outcomes, covering edge cases, and providing better accessibility.

Navigation and request headers

Every time navigation —or any network request— takes place in browsers headers are sent to the server, and the response from the server comes with headers too. HTTP Headers are a set of keys and content we can send to or read from the server request, these parameters describe more in-depth the network transaction. One of those headers is the referer, indicating which URL requested the page you are navigating to, which might come handy here to know the location to go back to.

Reading headers in Next.js

In Next.js, when the getInitialProps method runs on the server it receives a request object names req containing a headers property. We can check for a referer value to pass it down to the page component.

import React from 'react' import BackButton from '../components/back-button' export default const SearchResultPage = ( data, referrer >) =  return ( <> BackButton referer=referrer> /> SearchResult data=data> /> /> ) > SearchResultPage.getInitialProps = ( req >) =>  let referrer if (req)  // referer is a known mispelling in the spec referrer = req.headers.referer > const response = await fetch('your.api/endpoint') const data = await response.json() return  data, referrer > > 

When defined, this newly added referrer prop is used as the href fallback value in our back button component.

const BackButton = ( referrer >) =>  const href = referrer ? referrer : '/' return ( a href=href> onClick=goBack>> Go back /a> ) > 

You might have noticed we check if req is defined inside the getInitialProps method. As I said, this header is present when the request reaches the server. If the navigation happens with JavaScript already loaded then client-side routing will handle it, and the request object won’t be there because the server didn’t play any part. The good thing is, it would mean the user has JavaScript enabled and they are on a decent connection, and our initial goBack function will probably take care of the situation without the need of the referrer value.

Accessibility improvements

A bit of quick advice to improve accessibility for this component would be to add an aria-label extending the context of the navigation.

const BackButton = ( referrer, searchQuery, resultPage >) =>  const href = referrer ? referrer : '/' const ariaLabel = `Go back to page $resultPage> of $searchQuery> search` return ( a href=href> ariaLabel=ariaLabel> onClick=goBack>> Go back /a> ) > 

It might not seem necessary, but a more complete announcement in screen readers will help assisted users to know exactly where they are heading if they hit the link.

Is this worth it?

I started this quest as an experiment to push myself to learn new patterns, but I also mentioned the number of users with JavaScript disabled might just be none for your project. Then, is all of this needed? A situation, where the referrer approach will action, might be rare. For example, imagine user taps a link of a search result when the application bundle is still loading, then the navigation will happen without client-side routing, a full reload will trigger and the server will be in charge of resolving the request. The new page will include the referrer value and have a working back button, even if the user taps the link before the JavaScript for that new page is ready. If in this result page the JavaScript gets the chance to load, then our click event will catch it.

Gotchas

The solution proposed in this article is more resilient, but it’s still not perfect. Here are some reasons why.

History discrepancy

If we disable JavaScript entirely while testing this approach, going through a search result, click the link with the referer value and then pressing the back button from the browser will take the user back to the result page instead of the previous search page. This is a scenario that JavaScript handles better. Hopefully, your users won’t adhere much to this specific list of actions. A solution to this doesn’t exist right now, I would love for a way to define this behavior by an attribute in the anchor, though I admit it can open possibilities for anti-patterns in user experience around navigation.

Security

This approach won’t affect the security status of your application, whether it is already good or bad, but security measures can make it not possible to implement. There is a Referrer-Policy one which defines the content of the Referer header. If the value of the policy header is no-referrer for example, then Referer won’t be present at all in the requests.

Wrap-up

Using the browser’s navigation buttons on content sites comes naturally as a user to me, but when sites have more an application goal, a back button might help by highlighting a clearer action to the user. When doing so, we can make use of web technologies to make sure we provide a resilient component that handles edge cases combining headers and server-side logic. You can see this working in the repository of the application I built to explore progressive patterns inside React applications.

Further reading

Источник

Window history.back()

The history.back() method loads the previous URL (page) in the history list.

The history.back() method only works if a previous page exists.

Note

history.back() is the same as history.go(-1) .

history.back() is the same as clicking «Back» your browser.

See Also:

Syntax

Parameters

Return Value

Browser Support

history.back() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

History: back() method

The History.back() method causes the browser to move back one page in the session history.

It has the same effect as calling history.go(-1) . If there is no previous page, this method call does nothing.

This method is asynchronous. Add a listener for the popstate event in order to determine when the navigation has completed.

Syntax

Parameters

Return value

Examples

The following short example causes a button on the page to navigate back one entry in the session history.

HTML

button id="go-back">Go back!button> 

JavaScript

.getElementById("go-back").addEventListener("click", () =>  history.back(); >); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Make browser go back to previous page using JavaScript

There are two ways to go back to the previous page in a user’s browser history using JavaScript.

history.back() makes the browser go back one page. Here is how you can use it to create a ‘back to previous page’ button:

Back to previous page  

This will go back one page in the user’s browser history. If there is no previous page to go back to, nothing will happen when the button is clicked.

Alternatively, the history.go() method can be used. This method accepts a negative or positive number representing how many pages to go backwards or forwards.

To go back by one page in the browser, use history.go(-1) :

Back to previous page  

Going back more than one page

With history.go , it is possible to backwards more than one page by entering a negative number greater than -1.

For example, the following button navigates backwards two pages in the user’s history:

Back to two pages  

If this history does not exist in the browser, nothing happens.

Going forward by one page or more

It is also possible to create a button that will go forwards in a browser’s history.

To go forwards by one page, use history.forward or history.go(1) :

Return to next page  

To go forwards by multiple pages, use history.go() with a positive number greater than one:

Go forward two pages  

Summary

Method	Action	Usage example
history.back()	Goes back by one page in user’s browser history	history.back() – back one page
history.forward()	Goes forward by one page in user’s browser history	history.forward() – forward one page
history.go()	Navigates user’s browser history according to number passed in	history.go(-2) – back two pages

Related links

Источник