個人JavaScript會按期進行活動。 當用戶不查看站點時(即窗口或選項卡沒有焦點),最好不要運行。 php
有沒有辦法使用JavaScript作到這一點? html
個人參考點:若是您使用的窗口未激活,Gmail聊天會播放聲音。 web
自從最初編寫此答案以來,因爲有了W3C,新的規範已達到推薦狀態。 如今, 頁面可見性API (在MDN上 )使咱們可以更準確地檢測頁面什麼時候向用戶隱藏。 ajax
document.addEventListener("visibilitychange", onchange);
當前的瀏覽器支持: 瀏覽器
如下代碼會退回到不兼容瀏覽器中不太可靠的模糊/聚焦方法: app
(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"; } // set the initial state (but only if browser supports the Page Visibility API) if( document[hidden] !== undefined ) onchange({type: document[hidden] ? "blur" : "focus"}); })();
對於IE 9及更低版本的IE 9,須要 onfocusin
和onfocusout
,而除iOS使用onpageshow
和onpagehide
iOS以外,全部其餘功能都須要使用onfocus
和onblur
。 ide
稍微複雜一點的方法是使用setInterval()
檢查鼠標位置並與上一次檢查進行比較。 若是鼠標沒有在設定的時間內移動,則用戶可能處於空閒狀態。 ui
這具備告訴用戶是否空閒的附加優勢,而
不單單是檢查窗口是否處於活動狀態。
this
正如許多人指出的那樣,這並非檢查用戶或瀏覽器窗口是否空閒的好方法,由於用戶甚至可能沒有使用鼠標或正在觀看視頻等。 我只是建議一種檢查空閒狀態的可能方法。 url
這是對Andy E的回答的改編。
這將執行一項任務,例如,每30秒刷新一次頁面,但前提是該頁面可見且聚焦。
若是沒法檢測到可見性,則僅使用焦點。
若是用戶將頁面聚焦,那麼它將當即更新
直到任何ajax調用後30秒,頁面纔會再次更新
var windowFocused = true; var timeOut2 = null; $(function(){ $.ajaxSetup ({ cache: false }); $("#content").ajaxComplete(function(event,request, settings){ set_refresh_page(); // ajax call has just been made, so page doesn't need updating again for 30 seconds }); // check visibility and focus of window, so as not to keep updating unnecessarily (function() { var hidden, change, vis = { hidden: "visibilitychange", mozHidden: "mozvisibilitychange", webkitHidden: "webkitvisibilitychange", msHidden: "msvisibilitychange", oHidden: "ovisibilitychange" /* not currently supported */ }; for (hidden in vis) { if (vis.hasOwnProperty(hidden) && hidden in document) { change = vis[hidden]; break; } } document.body.className="visible"; if (change){ // this will check the tab visibility instead of window focus document.addEventListener(change, onchange,false); } if(navigator.appName == "Microsoft Internet Explorer") window.onfocus = document.onfocusin = document.onfocusout = onchangeFocus else window.onfocus = window.onblur = onchangeFocus; function onchangeFocus(evt){ evt = evt || window.event; if (evt.type == "focus" || evt.type == "focusin"){ windowFocused=true; } else if (evt.type == "blur" || evt.type == "focusout"){ windowFocused=false; } if (evt.type == "focus"){ update_page(); // only update using window.onfocus, because document.onfocusin can trigger on every click } } function onchange () { document.body.className = this[hidden] ? "hidden" : "visible"; update_page(); } function update_page(){ if(windowFocused&&(document.body.className=="visible")){ set_refresh_page(1000); } } })(); set_refresh_page(); }) function get_date_time_string(){ var d = new Date(); var dT = []; dT.push(d.getDate()); dT.push(d.getMonth()) dT.push(d.getFullYear()); dT.push(d.getHours()); dT.push(d.getMinutes()); dT.push(d.getSeconds()); dT.push(d.getMilliseconds()); return dT.join('_'); } function do_refresh_page(){ // do tasks here // e.g. some ajax call to update part of the page. // (date time parameter will probably force the server not to cache) // $.ajax({ // type: "POST", // url: "someUrl.php", // data: "t=" + get_date_time_string()+"&task=update", // success: function(html){ // $('#content').html(html); // } // }); } function set_refresh_page(interval){ interval = typeof interval !== 'undefined' ? interval : 30000; // default time = 30 seconds if(timeOut2 != null) clearTimeout(timeOut2); timeOut2 = setTimeout(function(){ if((document.body.className=="visible")&&windowFocused){ do_refresh_page(); } set_refresh_page(); }, interval); }
您可使用:
(function () { var requiredResolution = 10; // ms var checkInterval = 1000; // ms var tolerance = 20; // percent var counter = 0; var expected = checkInterval / requiredResolution; //console.log('expected:', expected); window.setInterval(function () { counter++; }, requiredResolution); window.setInterval(function () { var deviation = 100 * Math.abs(1 - counter / expected); // console.log('is:', counter, '(off by', deviation , '%)'); if (deviation > tolerance) { console.warn('Timer resolution not sufficient!'); } counter = 0; }, checkInterval); })();
var visibilityChange = (function (window) { var inView = false; return function (fn) { window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) { if ({focus:1, pageshow:1}[e.type]) { if (inView) return; fn("visible"); inView = true; } else if (inView) { fn("hidden"); inView = false; } }; }; }(this)); visibilityChange(function (state) { console.log(state); });