方法1，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script> <script> /*** 切换浏览器tab，判断当前tab是否活跃 ***/ (function(g, h, $, b) { var e, i, f = 'onfocusin' in h && 'hasFocus' in h ? 'focusin focusout' : 'focus blur', d = ['', 'moz', 'ms', 'o', 'webkit'], c = $.support, a = $.event; while ((i = e = d.pop()) != b) { i = (e ? e + 'H' : 'h') + 'idden'; if (c.pageVisibility = typeof h[i] == 'boolean') { f = e + 'visibilitychange'; break } } $(/blur$/.test(f) ? g : h).bind(f, function(m) { var l = m.type, j = m.originalEvent, k = j.toElement; if (!/^focus./.test(l) || (k == b && j.fromElement == b && j.relatedTarget == b)) { a.trigger((i && h[i] || /^(?:blur|focusout)$/.test(l) ? 'hide' : 'show') + '.visibility') } }) }(this, document, jQuery)); var o={} o.$tabFlag = true; /** 切换页卡 **/ var changeTab=function() { console.log(333) $(document).bind({ 'show.visibility': function() { // 当前活跃 o.$tabFlag = true; console.log(222) }, 'hide.visibility': function() { // 失去当前状态 o.$tabFlag = false; console.log(11111) } }); } changeTab(); </script> </head> <body> </body> </html>
方法2
var o={}; // 找到当前浏览器支持的hidden属性名和visibilitychange事件名 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } $(document).bind(visibilityChange,function(){ if (document[hidden]) { console.log(1111) o.$tabFlag = false; // videoElement.pause(); } else { console.log(222) o.$tabFlag = true; // videoElement.play(); } })