Phát hiện nếu tab trình duyệt có tiêu điểm

Có một cách đa trình duyệt đáng tin cậy để phát hiện ra rằng một tab có trọng tâm.

Kịch bản là chúng tôi có một ứng dụng thăm dò ý kiến ​​thường xuyên về giá cổ phiếu và nếu trang không tập trung, chúng tôi có thể dừng bỏ phiếu và tiết kiệm cho mọi người tiếng ồn giao thông, đặc biệt là khi mọi người là người hâm mộ mở một số tab với các danh mục đầu tư khác nhau.

Là window.onblurvà window.onfocusmột lựa chọn cho điều này?

Có, window.onfocusvà window.onblurnên hoạt động cho kịch bản của bạn:

http://www.thefutureoftheweb.com/blog/detect-browser-window-f Focus

Chỉnh sửa quan trọng: Câu trả lời này đã lỗi thời. Kể từ khi viết nó, API khả năng hiển thị ( mdn , ví dụ , spec ) đã được giới thiệu. Đó là cách tốt hơn để giải quyết vấn đề này.

var focused = true;

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

AFAIK, focusvà blurtất cả đều được hỗ trợ trên ... mọi thứ. (xem http://www.quirksmode.org/dom/events/index.html )

Trong khi tìm kiếm về vấn đề này, tôi đã tìm thấy một khuyến nghị rằng nên sử dụng API hiển thị trang . Hầu hết các trình duyệt hiện đại đều hỗ trợ API này theo Tôi có thể sử dụng: http://caniuse.com/#feat=pagevisibility .

Đây là một ví dụ hoạt động (xuất phát từ đoạn trích này ):

$(document).ready(function() {
  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  }

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if(document_hidden != document[hidden]) {
      if(document[hidden]) {
        // Document hidden
      } else {
        // Document shown
      }

      document_hidden = document[hidden];
    }
  });
});

Cập nhật: Ví dụ trên được sử dụng để có các thuộc tính tiền tố cho trình duyệt Gecko và WebKit, nhưng tôi đã loại bỏ việc triển khai đó vì các trình duyệt này hiện đang cung cấp API Hiển thị trang mà không có tiền tố trong một thời gian. Tôi đã giữ tiền tố cụ thể của Microsoft để duy trì khả năng tương thích với IE10.

Ngạc nhiên khi thấy không ai nhắc đến document.hasFocus

if (document.hasFocus()) console.log('Tab is active')

MDN có nhiều thông tin hơn.

Có những người nên làm việc cho bạn. Bạn chỉ cần nhắc tôi về liên kết này, tôi đã bắt gặp khai thác những kỹ thuật đó. đọc thú vị

Tôi sẽ làm theo cách này (Tham khảo http://www.w3.org/TR/page-visibility/ ):

    window.onload = function() {

        // check the visiblility of the page
        var hidden, visibilityState, visibilityChange;

        if (typeof document.hidden !== "undefined") {
            hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
        }
        else if (typeof document.mozHidden !== "undefined") {
            hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
        }
        else if (typeof document.msHidden !== "undefined") {
            hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
        }
        else if (typeof document.webkitHidden !== "undefined") {
            hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
        }


        if (typeof document.addEventListener === "undefined" || typeof hidden === "undefined") {
            // not supported
        }
        else {
            document.addEventListener(visibilityChange, function() {
                console.log("hidden: " + document[hidden]);
                console.log(document[visibilityState]);

                switch (document[visibilityState]) {
                case "visible":
                    // visible
                    break;
                case "hidden":
                    // hidden
                    break;
                }
            }, false);
        }

        if (document[visibilityState] === "visible") {
            // visible
        }

    };  

Giải pháp chéo trình duyệt jQuery! _{Nguyên có sẵn tại GitHub}

Thú vị và dễ sử dụng!

Plugin sau sẽ trải qua bài kiểm tra tiêu chuẩn của bạn cho các phiên bản khác nhau của IE, Chrome, Firefox, Safari, v.v. và thiết lập các phương thức khai báo của bạn theo đó. Nó cũng giải quyết các vấn đề như:

• onblur | .blur / onf Focus | .f Focus " trùng lặp " các cuộc gọi
• cửa sổ mất tập trung thông qua lựa chọn ứng dụng thay thế, như từ
• • Điều này có xu hướng không mong muốn đơn giản bởi vì, nếu bạn mở trang ngân hàng và sự kiện onblur sẽ bảo nó che dấu trang, sau đó nếu bạn mở máy tính, bạn không thể xem trang nữa!
• Không kích hoạt khi tải trang

Sử dụng đơn giản như: _{Cuộn xuống để ' Chạy đoạn trích '}

$.winFocus(function(event, isVisible) {
    console.log("Combo\t\t", event, isVisible);
});

//  OR Pass False boolean, and it will not trigger on load,
//  Instead, it will first trigger on first blur of current tab_window
$.winFocus(function(event, isVisible) {
    console.log("Combo\t\t", event, isVisible);
}, false);

//  OR Establish an object having methods "blur" & "focus", and/or "blurFocus"
//  (yes, you can set all 3, tho blurFocus is the only one with an 'isVisible' param)
$.winFocus({
    blur: function(event) {
        console.log("Blur\t\t", event);
    },
    focus: function(event) {
        console.log("Focus\t\t", event);
    }
});

//  OR First method becoms a "blur", second method becoms "focus"!
$.winFocus(function(event) {
    console.log("Blur\t\t", event);
},
function(event) {
    console.log("Focus\t\t", event);
});

/*    Begin Plugin    */
;;(function($){$.winFocus||($.extend({winFocus:function(){var a=!0,b=[];$(document).data("winFocus")||$(document).data("winFocus",$.winFocus.init());for(x in arguments)"object"==typeof arguments[x]?(arguments[x].blur&&$.winFocus.methods.blur.push(arguments[x].blur),arguments[x].focus&&$.winFocus.methods.focus.push(arguments[x].focus),arguments[x].blurFocus&&$.winFocus.methods.blurFocus.push(arguments[x].blurFocus),arguments[x].initRun&&(a=arguments[x].initRun)):"function"==typeof arguments[x]?b.push(arguments[x]):
"boolean"==typeof arguments[x]&&(a=arguments[x]);b&&(1==b.length?$.winFocus.methods.blurFocus.push(b[0]):($.winFocus.methods.blur.push(b[0]),$.winFocus.methods.focus.push(b[1])));if(a)$.winFocus.methods.onChange()}}),$.winFocus.init=function(){$.winFocus.props.hidden in document?document.addEventListener("visibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="mozHidden")in document?document.addEventListener("mozvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden=
"webkitHidden")in document?document.addEventListener("webkitvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="msHidden")in document?document.addEventListener("msvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="onfocusin")in document?document.onfocusin=document.onfocusout=$.winFocus.methods.onChange:window.onpageshow=window.onpagehide=window.onfocus=window.onblur=$.winFocus.methods.onChange;return $.winFocus},$.winFocus.methods={blurFocus:[],blur:[],focus:[],
exeCB:function(a){$.winFocus.methods.blurFocus&&$.each($.winFocus.methods.blurFocus,function(b,c){this.apply($.winFocus,[a,!a.hidden])});a.hidden&&$.winFocus.methods.blur&&$.each($.winFocus.methods.blur,function(b,c){this.apply($.winFocus,[a])});!a.hidden&&$.winFocus.methods.focus&&$.each($.winFocus.methods.focus,function(b,c){this.apply($.winFocus,[a])})},onChange:function(a){var b={focus:!1,focusin:!1,pageshow:!1,blur:!0,focusout:!0,pagehide:!0};if(a=a||window.event)a.hidden=a.type in b?b[a.type]:
document[$.winFocus.props.hidden],$(window).data("visible",!a.hidden),$.winFocus.methods.exeCB(a);else try{$.winFocus.methods.onChange.call(document,new Event("visibilitychange"))}catch(c){}}},$.winFocus.props={hidden:"hidden"})})(jQuery);
/*    End Plugin      */

// Simple example
$(function() {
	$.winFocus(function(event, isVisible) {
		$('td tbody').empty();
		$.each(event, function(i) {
			$('td tbody').append(
				$('<tr />').append(
					$('<th />', { text: i }),
					$('<td />', { text: this.toString() })
				)
			)
		});
		if (isVisible) 
			$("#isVisible").stop().delay(100).fadeOut('fast', function(e) {
				$('body').addClass('visible');
				$(this).stop().text('TRUE').fadeIn('slow');
			});
		else {
			$('body').removeClass('visible');
			$("#isVisible").text('FALSE');
		}
	});
})

body { background: #AAF; }
table { width: 100%; }
table table { border-collapse: collapse; margin: 0 auto; width: auto; }
tbody > tr > th { text-align: right; }
td { width: 50%; }
th, td { padding: .1em .5em; }
td th, td td { border: 1px solid; }
.visible { background: #FFA; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>See Console for Event Object Returned</h3>
<table>
    <tr>
        <th><p>Is Visible?</p></th>
        <td><p id="isVisible">TRUE</p></td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">Event Data <span style="font-size: .8em;">{ See Console for More Details }</span></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </td>
    </tr>
</table>