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.
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![Create an Animated Sliding Button Using MooTools]()
Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...
![NSFW Blocker Using MooTools and CSS]()
One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away.
Since...
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
getElementsByTagNameandinnerHTML, 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.titlebefore document gets completely loaded has unfixed behavior (document.titlemight 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!