Change Tab Title with JavaScript
Changing the tab (or window) title is an age old practice. Gmail does it to notify the user of a new chat message and this blog does it to update the tab title after a new page loads via AJAX. How is it done? By setting a property on the document
object, of course:
That property, of course, is document.title
:
document.title = 'Hello!'; // New title :)
One common misconception is that you change the window.title
property, but you must use the document
object, otherwise you'll see no effect. You'll oftentimes see a setInterval
used with document.title
to quickly change title to get the user's attention.
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0
and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...
This is great – in 15 years of working in web design the thought of changing page title never crossed my mind. Could be useful though, cheers!
If you want to be evil about it change it to:
And see how many people wonder what is unread :)
If that’s not in evil.js, it should be added immediately
Thats pure evil.
That’s really nice – I always did that via
getElementsByTagName
andinnerHTML
, but this solution’s way more convenient.Of-course this is tricky. It also affects DOM document ( element in HTML). Also In XUL, retrieving
document.title
before document gets completely loaded has unfixed behavior (document.title
might pull an empty result or may effect-less.)I’m happy to be corrected on this, but if you change the tab title after a screen reader initially caches the page, they are not informed of this change. So, if you are changing the page for a relevant reason, could this be a problem? The page title is the first thing screen readers hear when a page loads, and it is like a road map to where they are, where they want to be.
This is such a simple tweak and can make us look our website state of the art!