getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
getButterfly

How to Change Page Title Using JavaScript

This JavaScript will modify the text of the browser tab when a visitor focuses or un-focuses the tab. You can display one title when a visitor is focused on the tab and a different title when they toggle to a different tab or window.

The code below will modify the title of the browser tab on the tab blur event and change it back to the original on the tab focus event.

/**
 * The following code will modify the title of the browser tab on the "blur" event
 * and change it back to the original on the "focus" event.
 */

// Store the original tab title
// Consider storing it in localStorage if you need it across the site
let origTitle = document.title;

// Change title when focusing on tab
function oldTitle() {
    document.title = origTitle;
}

// Function to change title when un-focusing on tab
function newTitle() {
    document.title = 'Please come back!';
}

// Bind functions to blur and focus events
window.onblur = newTitle;
window.onfocus = oldTitle;

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Friday, August 30, 2019 in JavaScript

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

Related Articles

My Battle Tested Recommendations
Disclaimer: These recommendations contain affiliate links.

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush
SEMrush

Privacy Policy