Change Content Of Title Tag, When Switching To Other Open Tab In The Browser

I just recently saw this on two different websites, does anyone know how it is done? If you have multiple tabs open, and you leave the current one, the title in the tab is changed.

Solution 1:

This works by registering Handlers on the onfocus and onblur events of window.

jQuery-Style:

$(window).on('blur', function() { ... });

Without jQuery:

window.onblur = function() { ... }

If that was not clear: the pages title can be read/written via document.title

Solution 2:

$(function() {
  var message = "Don't forget us";
  var original;

  $(window).focus(function() {
    if (original) {
      document.title = original;
    }
  }).blur(function() {
    var title = $('title').text();
    if (title != message) {
      original = title;
    }
    document.title = message;
  });
});

Solution 3:

Originally Coded by: https://flintobox.com/blog/

  $(function () {
    var message = "Hey, come back!";
    var original;

    $(window).focus(function() {
      if(original) {
        document.title = original;
      }
    }).blur(function() {
      var title = $('title').text();
      if(title != message) {
        original = title;
      }
      document.title = message;
    });
  });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>