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. Very nice trick!

http://blog.invisionapp.com/

http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/

回答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

回答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;
  });
});

回答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;
    });
  });

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

来源：https://stackoverflow.com/questions/23878277/change-content-of-title-tag-when-switching-to-other-open-tab-in-the-browser