We Keep Coding

PushState requires two "go back" but then "go forward" will stop working

I have a very rudimentary SPA built in vanilla JS. There are two buttons that the user can use to navigate between pages, for example:
buttonProfile.addEventListener("click", function () {
window.history.pushState({}, "", "profile/");
var updatePage = new Event("update-page");
dispatchEvent(updatePage);
});
Somewhere in the app, I have an event listener that listens to update-page to refresh the content that needs to be refreshed (without ever reloading the page) based on the current URL. Everything works fine.
However, I noted two odd behaviours:
If the user starts on Page A and then moves to Page B, the user will need to go back twice (button on the browser) in order to go back to Page A.
If the user goes back from Page B to Page A, once they are back to Page A the "forward" button on the browser will become greyed out.
EDIT
In case it helps, I noted I have the same issue when I use other people's SPAs that have a similar implementation. See this simple demo for example: DEMO | CODE
Steps to reproduce:
Click on About, then Contact, then again About, then again Contact.
Now, if you press Back once you'll go back to About. However, if you press it again you'll stay on About. You'll have to press it again to move to Contact and once you do, the Forward button will be disabled.
EDIT 2
I just realize that both my site and the site I posted above work fine when I run my browser in Incognito. There must be some other problem with my Chrome (though I have no idea what).

Okay, I found it. It was the Matter official Chrome extension. Not sure what exactly caused the issue though.

Detect when back button was used to navigate to page

I have a heavily interactive page that, while it does not use a form, does have objects that maintain state. This state is completely messed up when someone navigates away from the page and then comes back to it again with the back button. So, I'd like to be able to detect when someone uses the "back" button to navigate to my page, and have it reset the content at that point. How can I accomplish this?
I found one other question that addressed this issue, but it is very out-of-date (from 2011), doesn't mention anything about support for Chrome, and I'd rather not use JQuery if I don't have to (I'm not using it anywhere else at the moment).

Alternatives to disabling / disable back button in firefox and IE

Our application forbids going back for several reasons.
Basically because that's just how our application works (JSF with facelets as GUI)
You always have to enter on the welcome site, once you chose an application-flow you can only leave / abort when you tell the application (e.g. press a button). If you just browse away e.g. enter "example.com" in the address bar the state of your flow gets saved and once you relogin, you can resume the work. Going back is only possible when it was specifically designed like this with a 'back' submit - button.
Of course users keep pressing the 'back' button (i would do so as well) and they keep getting 'error: session out of synch'. This is a learning process and a couple years ago we just disabled the back-button to make things clear. Sadly this is no longer supported.
So instead of teaching the user the hard way and forcing him to relogin, are there some good alternatives I'm missing?
i found this link which should offer 3 methods to disable the back button - but in reality it just further confirms the fact that it is impossible to do it in a semi-nice way.

when the user tries to go to a previous page you can redirect him to the page he should be at in other words catch the "out of sync" and redirect him

You might find a workable solution here How do I insert an entry into browsing history via JavaScript
by inserting an extra step into the browser's history (perhaps a link to the current page with query string parameters that result in a nice big red box message to the user), or you could try attaching an event handler to the OnBeforeUnload event so the user gets a confirmation dialog when trying to leave the page (you'd want to remove the handler when the submit button was clicked).

JavaScript - detect browser stop button click

I have a form that disables submit button, when it is clicked.
But what if the user clicks browser "Stop" button.
Then he will not be able to resubmit the form.
Is there any way to handle such cases, possibly detecting Stop button press?

What is the reason for disabling the submit button?
You are trying to avoid double-clicks? -> you can disable the submit button for only a brief period of time, re-enabling it again on a timeout.
You are trying to avoid impatient reload-clicking? -> the same, but with a longer inactivity period.
You are trying to stop a form being submitted twice causing duplicate actions to occur? -> you can't fight this just with button disabling, as going back/forward will cause the page to be reloaded, likely keeping old form content but not the disabledness state, unless short-circuited by bfcache. In this case you must create a one-use token or new item ID that cannot be used more than once, and put it in a hidden field in the form. The server can check for it and disallow duplicates.
possibly detecting Stop button press?
Avoid onstop, it's not really reliable. Apart from browser support issues, it can't catch all possible combinations of navigation and stop/reload/etc. You'll never know how far the server script got, whether it performed an action.

Your best bet would be to detect the submit button on the server, so it can only be submitted once. This way, no matter what happens (firebug etc), the form is only submitted once. There is an OnStop() event, but it is IE only, and I would not recommend using it.

document.onstop
You can find documentation for it here:
http://www.codeguru.com/forum/archive/index.php/t-437967.html
https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/document

JavaScript problem toolbar=no

I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?

It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.

I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.

This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.

This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript