Controlling and directing browser’s back button with JavaScript
In js, we sometimes use the back or forward button when switching or redirecting pages. But sometimes we need to use the browser’s back or forward buttons, and in this case, if we want to control these buttons and redirect, the goBack() function may not work.For this reason, we may need to somehow control this action (the action of pressing the browser’s back button) and direct it to the pages we want.For example, you are building a platform and you are using a form on your page where members need to enter their information, or you use a rich text editor such as Ckeditor/jodid etc and you want to display the final version of it on your next page.and after you see the final version here, you want to go back to the form page and make the necessary changes by pressing the Borwsers back button to edit the places you don’t like.Yes, you can do this by defining the goBack( ) function to the Button you have defined and designed on our own page.
<button onClick = {() =>history.goBack()}>Go Back</button>
But what if the user uses the browser back button? your page can go to the main page or to two previous pages if you didn’t edit it.For this reason, you should control the browser’s back button and make it act as you want. How can we do this? We can do this in two ways, at least I found these two methods, if anyone finds different methods, you can share them in the comments so that we can learn new methods together.
1-The first method is to disable the browser’s back button, that is, to prevent this process when the user wants to click the back button in the browser. In this way, the user will press the back button that we defined to go back and our goBack function will work and go to the previous page.You can use one of the following for this:
a) <button onClick = {() history.goBack()}>Go Back</button>
b) <a href=”javascript: history.go(-1)”>Go Back</a>
c) <a href=”##” onClick=”history.go(-1); return false;”>Go back</a>
2-The second method is to control the browser’s back button and send it to the page you want. So how do we do this? There are many articles and questions about this on Stackoverflow, you can find various answers there, but I will share with you the method that I think is the easiest and most understandable one, of course for Js.
const onBackButtonEvent = (e) => {
e.preventDefault();var currentLocation = window.location.pathname;
history.push(`${currentLocation}/mypage/new`)};
useEffect(() => {window.addEventListener(‘popstate’, onBackButtonEvent);return () => {window.removeEventListener(‘popstate’, onBackButtonEvent);
};}, [])
Now I’ll try to briefly explain what’s going on here. First of all, in order for our application to realize that the browser has pressed the back button, we add into the useEffect : window.addEventListener(‘popstate’, onBackButtonEvent); Of course, after we get what we want later, we can remove this : window.removeEventListener(‘popstate’, onBackButtonEvent);Well, there may be a question here. What happens if we don’t add => window.removeEventListener(‘popstate’, onBackButtonEvent);?As an answer, I can say that it won’t be in your mind until you try it, so even if I say yes or no, you can try the code I shared above by copying it to make it more permanent.
By doing this, => window.addEventListener(‘popstate’, onBackButtonEvent); we now know that onBackButtonEvent will work thanks to addEventListener.Now it’s time to determine what this function will do when called.
const onBackButtonEvent = (e) => {
e.preventDefault();
var currentLocation = window.location.pathname;
history.push(`${currentLocation}/mypage/new`)
};
Here we call our function hey bro you first make e.preventDefault(); and save me a burden and then the most important thing to me is to able to go to the page I want when I press the back button of the browser.We do this by taking the URL of the page, which I will explain in detail in my next article.
var currentLocation = window.location.pathname;
history.push(`${currentLocation}/mypage/new`)
In short, to summarize the situation, we filled the information from the form page and went to the preview stage, then when the user wants to use the browser’s back button instead of the button we put on the page, we direct him to the page we want, I explained it here based on the example of redirecting to the previous page, but you can redirect to the page you want).
