history.pushstate not updating title

Question

I am using AJAX to load main content of the page. Using history.pushstate(Object:State, String:Title, String:URL) - I am able to update the URL in the address bar and navigate back in the history.

However the title parameter appears to have no effect. Neither does the window title change nor the title of the entries in the 'history list' (perhaps both of them are same anyway).

What am I doing wrong?

Update: title param is simply ignored in chrome. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-June/026827.html

Bullring

I am work-around this simply by using: document.title = "NEW_TITLE" before a call to history.pushstate but why does it not work the way its supposed to? – Bullring

You're not doing anything wrong, that's the way it works. The history API changes the URL and you have to do the rest, like change the documents contents, including the title. – Gaillardia

then does it mean - the title param is a dummy? – Bullring

No, the title param is not a dummy, it just does'nt change the documents title automagically, as those are just two different things with a similar name. – Gaillardia

okay, but then what is the use of the title param? – Bullring

It adds a title to the record in the windows history, it's not the document title. – Gaillardia

Best description of the issue and two good answers are here: #26325490 – Dipole

Answer 1

The title parameter is not the window title.
It may be used as a title of the state but some browsers like Chrome simply ignore it.

Helbona

if title of the state - is the string i see in the history list (by pressing and holding the Back button in chrome - then well even that seems to be unaffected by histroty.pushstate:title – Bullring

Some browsers (such as FF) ignore the parameter, yes. – Helbona

What is the intended use of the title param then - in the browsers that do support them? – Bullring

As far as I can tell by the spec there is no intended use. It just says "The title is purely advisory. User agents might use the title in the user interface." – Helbona

In reality, currently (see date of my comment) all browsers ignore the title parameter and do not use it for the title bar or history list. The intended use was to only update the history list – not the document title, but browser developers decided not to implement it this way, probably because it would be confusing if the history list showed something else than the document.title at that time. See lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-June/… – Palmar

@Blaise, In reality Safari and Opera supports it: https://mcmap.net/q/66025/-how-to-set-quot-default-quot-value-for-history-pushstate-and-replacestate/632951 . And this feature is importantly useful, see https://mcmap.net/q/66026/-title-of-history-pushstate-is-unsupported-what-39-s-a-good-alternative/632951 . Without this feature all the history entries will show the same title even when we replace pages with pushState. – Muttonchops

Answer 2

As @ujjwal-singh has already written in his answer the 2nd parameter title may be used as a label for the entry in the history but it is optional and the browser can ignore it and decide to use a different source for the title. The note below bullet point 8 at chapter 5.5.2 of the HTML 5 specification states

The title is purely advisory. User agents might use the title in the user interface.

This is how Chrome and Firefox work. Hence, the following code should lead to a consistent user experience among all major browsers

document.title = myTitle;
history.pushState( myState, myTitle, myURL );

This code also updates the title of the document and Chrome and Firefox are supposed to use this one.

However, it does not work as expected and you will experience a weird off-by-one bug. (This is at least true for FF up to version 45 and Chrome 51.) The problem is that the UI is not updated immediately but only after the JS call stack becomes empty. Hence, pushState will still use the old (out-dated) title, because the new title of the document is not yet applied to the DOM. On the next call of this code snippet pushState uses the previously changed title and so on.

If the user picks an item from the history, the user is mislead to a different page than the user expects, because the labels of each history entry and the actual destination of the history entry are out-of-sync by one.

However, this looks like a bug in Chrome and Firefox to me. Although the UI is only updated after JS terminates pushState should already use the new title. I have filed a bug report both to Chromium and Mozilla.

Adaxial

I have window.history.pushState(myStateObject, myNewTitle, myNewURL); document.title = myNewTitle; working in Firefox 72 in Jan 2020. I have no idea how it's never occurred to me before that a document.title can be reset live. Excellent heads up. – Oleomargarine

Answer 3

I doesn't know why that works like that, but because of comment of Rounin which are next:

I have window.history.pushState(myStateObject, myNewTitle, myNewURL); document.title = myNewTitle; working in Firefox 72 in Jan 2020. I have no idea how it's never occurred to me before that a document.title can be reset live. Excellent heads up.

I've suddenly found that in Firefox 91.0b9 you have to put pushState firstly, and secondly you have to change title. And then history manager in Ff 91.0b9 changing exact page that pushed state and not simular closer page with slightly different uri. In my case if document.title changed first, history management thing changes last two records with simular links of the site.

For example if some /page will be changed to /page/2, and you change title and then will make pushState, then both records titles will be changed to that one that you specified in document title or may be it's related to title in pushState. So when document.title called secondly it is works normally

Example (works):

window.history.pushState(myStateObject, myNewTitle, myNewURL);
document.title = myNewTitle;

And not like it is probably suppose to be (not works):

document.title = myNewTitle;
window.history.pushState(myStateObject, myNewTitle, myNewURL);

Thank you to the Rounin!

Amadeus