HTML5 Event 之 visibilitychange

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript.

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome,
Firefox, IE10等。

这个事件可以满足一些用户需求，比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

虽然这只是一个简单的功能，但是能够广大的采用HTML5开发游戏的开发者提供方便，比如用户正在玩游戏时，突然切换到后台去发一条短信或打一个电话，再切换到游戏，那么开发者就需要捕捉对这些突发情形进行处理，当游戏切换到后台时就暂停游戏，从后台切换回来时，又能允许用户继续游戏。

下面介绍一个该事件的应用实例，一个JavaScript工具：I miss you。

这个工具的功能是当切换浏览器的tab以后，会触发visibilitychange事件，然后改变HTML Head里的title属性值。

这个功能最早是在一个叫饿了么的外卖平台发现的，当切换tab以后，页面的标题会变成记得回来点单哟，感觉很有趣，就找了一个实现。

下面详细介绍一下。

首先定义一个miss.js

(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:'kiss_sweet.ico'
        }
    };

}));

然后定义一个HTML文件miss.html,引入jquery库和前面的miss.js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script src="miss.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready(function($){
        $.iMissYou({
            title: "I Miss you ! 等你回来哟~~~",
            favicon: {
                enabled: true,
                src:'kiss_sweet.ico'
            }
        });
});

</script>

<title>Welcome dear friend!</title>
</head>
<body>

</body>
</html>

点击 miss.html，打开后切换tab查看效果.