一、效果預覽
在牛客網上看到的，效果如下：
即當切換到其它的頁面即我們的網頁失去焦點的時候，網頁的標題就會被改變，當再切換回來的時候，網頁標題就會被復原。
二、效果實現
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設定一個標志可以實現吧，只是一個設想，就不去實現了...