Menu
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?
772
Use the querySelector() Method to Change the Page Title in JavaScript. We can use the document. querySelector() method to pick elements in a document. The title element can be chosen by giving the title element a selector parameter and retrieving the page's main title element.
The textContent property of an element returns the text content of a specific node. The title of the page can be changed by assigning the required new title as a string to the textContent property. This will change the title of the website to the preferred title.
Changing the Title Tag in your Website's Control Panel You would edit your title tags through the control panel you use for creating and editing website pages. Look for the section in which you can change meta tags; for more information, refer to your CMS provider's support.
Browser history is not accessible from JavaScript. If you're building your own browser, you may expose the history in whatever way you find meaningful, and then it'll be up to you what custom javascript code you support in order to extract such information.
To change the page title with JavaScript, we can set the document.title property. to set the page title to ‘New Title’. To change the page title with JavaScript, we can set the document.title property.
The textContent property of an element returns the text content of a specific node. The title of the page can be changed by assigning the required new title as a string to the textContent property.
The window.history object can be written without the window prefix. To protect the privacy of the users, there are limitations to how JavaScript can access this object. The history.back () method loads the previous URL in the history list.
Method 2: Using querySelector () Method: The document.querySelector () method is used to select elements in the document. The title element can be selected by specifying the title element in the selector as a parameter. This will return the current title element of the page.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
