浏览器窗口焦点监控.md

#浏览器窗口焦点监控

##方法一

(function() {  
    var hidden = "hidden";
    // Standards:
    if (hidden in document)  
        document.addEventListener("visibilitychange", onchange);  
    else if ((hidden = "mozHidden") in document)  
        document.addEventListener("mozvisibilitychange", onchange);  
    else if ((hidden = "webkitHidden") in document)  
        document.addEventListener("webkitvisibilitychange", onchange);  
    else if ((hidden = "msHidden") in document)  
        document.addEventListener("msvisibilitychange", onchange);  
    // IE 9 and lower:
    else if ('onfocusin' in document)  
        document.onfocusin = document.onfocusout = onchange;  
    // All others:
    else  
        window.onpageshow = window.onpagehide   
            = window.onfocus = window.onblur = onchange;  
  
    function onchange (evt) {
    	var v = 'visible', h = 'hidden',  
            evtMap = {   
                focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h   
            };  
  
        evt = evt || window.event;  
        if (evt.type in evtMap)  
            document.body.className = evtMap[evt.type];  
        else          
            document.body.className = this[hidden] ? "hidden" : "visible";
    //pageData.isPageFocus = this[hidden] ? false : true;
    }  
})();

##方法二

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

var titleInit = document.title, isShine = true;

setInterval(function() {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) {
            document.title = '【你有新消息】';    
        } else {
            document.title = '【　　　　　】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

window.onfocus = function() {
    isShine = false;
};
window.onblur = function() {
    isShine = true;
};

// for IE
document.onfocusin = function() {
    isShine = false;
};
document.onfocusout = function() {
    isShine = true;
};

浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法。