How to find the current location index in the browser history

Question

Browsers provide a list of the pages visited within a client session through the window.history object. With this, client code can navigate forwards and backwards through the list (using history.back(), history.forward(), and history.go()).

But how can the client code determine where in the history the current page is located? For example, if the client visits pages A, B, and C, the history will contain three items, and the current history item (or state) will be for page C. If the user then clicks the 'back' button, the current page is now B. However, the history.length is still 3, reflecting the fact that three pages were visited in total. How do we determine that the client is currently at item 2 in the history?

A more specific problem is that I want to determine if I am positioned at the first item in the history, so that I can display a 'Close' button which will close the page (assuming that window.opener is not null); at any other position in the history, I want to display a 'Back' button instead which will navigate to the previous page.

This seems to be a curious omission that there is no 'current index' into the history object.

Note: This is similar to question #12895940, but differs in that I really only need to know if I am positioned at the first location in the history.

Answer 1

The only thing I came up with (which only works in HTML5+ browsers) is something along the lines of this:

// Onload {     if (!history.state  &&  typeof(history.replaceState) == "function")         history.replaceState({ page: history.length, href: location.href }, "foo"); } 

This pushes a state object onto the history stack when the page first loads. (The typeof check is needed to ensure that the browser supports the HTML5 replaceState() method.)

Later, I can check if the current history object is the first one in the list that got replaced:

if (history.state  &&  history.state.page == 1) {     // It appears that we are positioned at the first history item     ... } 

This seems to be adequate for what I need.