Search code examples
javascriptangularjsgoogle-chromebrowser-history

Reliably change page title in browser history via JavaScript

Is it possible to change title of the page in the browser history via JavaScript after the page is loaded? Should be cross-browser (of course) and work on browsers that don't support the HTML5 History API, my primary target browser is Chrome.

I've tried a number of approaches, but none of them seem to work reliably. Here is what I've tried last (history.js):

<html>
    <head>
        <title>Standard title</title>
        <script src="https://rawgit.com/browserstate/history.js/master/scripts/bundled-uncompressed/html4%2Bhtml5/native.history.js"></script>
    </head>
    <body>
        <script>
            window.setTimeout(function(){
                document.title = "My custom title";
                History.replaceState({}, "My custom title", window.location.href);
            }, 3000);
        </script>
    </body>
</html>

If I load the history page in Chrom within 3 seconds after page load, I see Standard title, after 3 seconds I get My custom title.

Why I need this: I have a JavaScript-only app (Angular 1) which runs on different environments (dev, test, production). I'd like to display a title like MyApp (<environmentName>), but I don't want to build separate versions of my app per environment. Instead, the app could request the environment info from the backend via AJAX and update the title of the page. All of this works fine (the page title gets updated), but browser history still shows "standard" title.

Is there a way to change title of the page in the browser history as well?

Solution

  • Short answer: there seems no way you can keep different title records for the same url in Chrome.

    Disclaimer: I just stumbled upon this question and had no prior experience about it. Nonetheless, the question was so clear and interesting that I couldn't help but do some experiment:

    First of all, I agree that the history records (i.e., the page titles) shown in the history tab are NOT so reliable (maybe a bug or cache).

    So I decide that I will look into the database file for Chrome history, for example, using DB Browser for SQLite.

    To my surprise, Chrome history keeps only one version (the latest) of title for each url. And when I do History.replaceState({}, "My custom title", window.location.href);, the title does get updated in the database.

    However, @Bekim's method wouldn't change the title in the database.