CODEWITHSUNDEEP
javascripthtmlgoogle-chromedom
spuentep
spuentep

Reputation: 131

Setting document.title doesn't change the tab's text after pressing back in the browser

In a single page application I'm in routeA with document.title set to "titleA".

I then get an in-app notification so the app sets document.title to "titleB", and it's reflected in the Chrome browser tab.

I then press the notification and the app goes to routeB, still with "titleB".

I mark the notification as read and change document.title back to "titleA". This changes correctly.

The problem is when I press the browser's back button: it goes to routeA, but it shows "titleB" on the tab. If I read document.title on Chrome devtools, it shows "titleA" (the correct title). The tab doesn't seem to be reflecting document.title.

Is there any solution for this? It seems to be a Google Chrome bug, since it doesn't happen in Firefox. Maybe cache or service worker related?

Even if I set the document.title manually in devtools, the tab's text doesn't change anymore unless I refresh the page.

Upvotes: 5

Views: 1513

Answers (1)

spuentep
spuentep

Reputation: 131

I was able to solve the issue by settings document.title to something else right before setting the document.title to what I want, like so:

document.title = "";
document.title = "My title";

and also calling this code after the browser completed the "history back" operation (so I listen to the history and set the title again).

It seems to be a bug in Chrome, that for some reason reverts back to the document.title, so still no idea why it happens and why there's nothing online about this.

Upvotes: 5

Related Questions