一、效果预览
在牛客网上看到的，效果如下：
即当切换到其它的页面即我们的网页失去焦点的时候，网页的标题就会被改变，当再切换回来的时候，网页标题就会被复原。
二、效果实现
1.借助I-Miss-You.js
有现成的插件叫做I-Miss-You.js，在切换到其它页面的时候会改变当前页面的标题和图标，其github地址：https://github.com/Bahlaouane-Hamza/I-Miss-You
或者将下面的js代码拷走即可（需要注意的是这个插件实依赖于jQuery的。）：
// jquery.IMissYou.js 1.0.0 // (c) 2015 Hamza Bahlaouane // jquery.IMissYou may be freely distributed under the MIT license. // For all details and documentation: // https://github.com/Bahlaouane-Hamza/I-Miss-You // Uses CommonJS, AMD or browser globals to create a jQuery plugin. (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else if (typeof module === 'object' && module.exports) { // Node/CommonJS module.exports = function( root, jQuery ) { if ( jQuery === undefined ) { // require('jQuery') returns a factory that requires window to // build a jQuery instance, we normalize how we use modules // that require this pattern but the window provided is a noop // if it's defined (how jquery works) if ( typeof window !== 'undefined' ) { jQuery = require('jquery'); } else { jQuery = require('jquery')(root); } } factory(jQuery); return jQuery; }; } else { // Browser globals factory(jQuery); } }(function ($) { "use strict"; $.iMissYou = function (options) { // Options var opts = $.extend( {}, $.iMissYou.defaults, options), origTitle = document.title, favicon = $('head').find('link[rel$="icon"]'); var origFavicon = favicon.attr("href"); // Preload favicon if(opts.favicon.enabled) preloadFavicon(); // Watch for visibilitychange event $(document).bind("visibilitychange", function(){ // Change title $(document).prop('title', (document.hidden) ? opts.title : origTitle); // Change favicon too ? if(opts.favicon.enabled){ if($(document).prop('hidden')) changeFavicon(); else revertFavicon(); } }); // Utilities function changeFavicon() { favicon.attr("href", opts.favicon.src); } function revertFavicon() { favicon.attr("href", origFavicon); } function preloadFavicon() { $('<img/>')[0].src = opts.favicon.src; } }; // Default $.iMissYou.defaults = { title: "I Miss you !", favicon: { enabled: true, src:'iMissYouFavicon.ico' } }; }));
简单使用的话只需要在页面中引入jquery.iMissYou.js，然后设定需要改变的标题，注意如果使用favicon的话需要本来就有一个favicon才可以。
一个简单的例子如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>just for practice</title> <link rel="icon" href="imgs/icon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="imgs/icon.ico" type="image/x-icon"/> </head> <body> <!-- 网页内容.... --> <!-- js依赖引入区 --> <script type="text/javascript" src="../../js/jquery-2.2.3.js"></script> <script type="text/javascript" src="js/jquery.iMissYou.js"></script> <script type="text/javascript"> $(function(){ $.iMissYou({ //当前网页被隐藏的时候要显示的标题 title:"I Miss You.", //是否要切换icon， enabled布尔值设定是否开启，src用来设定使用的icon favicon: { enabled: true, src:'iMissYouFavicon.ico' } }); }); </script> </body> </html>
效果如下：
2. 自己造一个轮子
对于看上去并不是很难的总是想重复造轮子，所以就尝试着写了一个不依赖jQuery的，代码如下：
/** * Author:CC11001100 * * Funny title * * 用于网页失去焦点时改变成有趣的标题 * */ (function(){ var vendorPrefix=getBrowserPrefix(); var eventName=visibilityEvent(vendorPrefix); document.addEventListener(eventName,visibilityEventCallback); var oldTitle=document.title; function visibilityEventCallback(){ if(document.hidden){ oldTitle=document.title; document.title="(●—●)"+oldTitle; }else{ document.title=oldTitle; } } /*------------------------ 下面的代码来自网络，用于解决浏览器兼容性问题 ----------------------------------*/ // Get Browser-Specifc Prefix function getBrowserPrefix() { // Check for the unprefixed property. if ('hidden' in document) { return null; } // All the possible prefixes. var browserPrefixes = ['moz', 'ms', 'o', 'webkit']; for (var i = 0; i < browserPrefixes.length; i++) { var prefix = browserPrefixes[i] + 'Hidden'; if (prefix in document) { return browserPrefixes[i]; } } // The API is not supported in browser. return null; } // Get Browser Specific Hidden Property function hiddenProperty(prefix) { if (prefix) { return prefix + 'Hidden'; } else { return 'hidden'; } } // Get Browser Specific Visibility State function visibilityState(prefix) { if (prefix) { return prefix + 'VisibilityState'; } else { return 'visibilityState'; } } // Get Browser Specific Event function visibilityEvent(prefix) { if (prefix) { return prefix + 'visibilitychange'; } else { return 'visibilitychange'; } } })();
使用的时候只需要将上面的js文件另存为，然后引入即可。
这一句即是设定当前网页“被隐藏”的时候网页标题显示的东西：
document.title="(●—●)"+oldTitle;
github地址： https://github.com/BenDanChen/FunnyTitle
三、总结
优点：增加了网页的趣味性。
缺点：当同时打开了很多网页的时候，就会出现这种情况：
这可就尴尬了...
一个简单的解决办法是在本网站上只变化刚刚失去焦点的那部分，关于多个网页之间怎么协同，也许用cookie设定一个标志可以实现吧，只是一个设想，就不去实现了...