브라우저 탭에 포커스가 있는지 감지

Programing

브라우저 탭에 포커스가 있는지 감지

lottogame 2020. 7. 2. 07:49

브라우저 탭에 포커스가 있는지 감지

탭에 포커스가 있음을 감지하는 신뢰할 수있는 브라우저 간 방법이 있습니까?

시나리오는 주가에 대해 정기적으로 설문 조사를하는 애플리케이션을 가지고 있으며, 페이지에 초점이 맞지 않으면 설문 조사를 중단하고 모든 사람들이 교통 소음을 줄일 수 있습니다.

인가 window.onblur및 window.onfocus이에 대한 옵션?

예, window.onfocus그리고 window.onblur당신의 시나리오에 대해 작동합니다 :

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

중요 편집 : 이 답변은 구식입니다. 그것을 작성한 이후 Visibility API ( mdn , example , spec )가 도입되었습니다. 이 문제를 해결하는 더 좋은 방법입니다.

var focused = true;

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

AFAIK, focus그리고 blur모든 것을 지원합니다. ( http://www.quirksmode.org/dom/events/index.html 참조 )

이 문제를 검색하는 동안 Page Visibility API를 사용해야한다는 권장 사항을 찾았습니다 . 대부분의 최신 브라우저는 http://caniuse.com/#feat=pagevisibility에 따라이 API를 지원합니다 .

다음은 실제 예제입니다 ( 이 코드 조각 에서 파생 됨 ).

$(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];
    }
  });
});

업데이트 : 위의 예제는 Gecko 및 WebKit 브라우저의 접두사 속성을 사용했지만 이전에는 접두사가없는 Page Visibility API를 제공했기 때문에 해당 구현을 제거했습니다. IE10과 호환되도록 Microsoft 전용 접두사를 유지했습니다.

네, 당신을 위해 일해야합니다. 당신은 저에게이 기술을 이용하는 링크를 발견했습니다. 재미있는 읽을 거리

아무도 언급하지 않은 것을보고 놀랐습니다. document.hasFocus

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

MDN에 자세한 정보가 있습니다.

나는 이런 식으로 할 것이다 (참조 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
        }

    };

크로스 브라우저 jQuery 솔루션! _GitHub_{에서 제공되는 Raw}

재미 있고 사용하기 쉬운!

다음 플러그인은 다양한 버전의 IE, Chrome, Firefox, Safari 등의 표준 테스트를 거쳐 선언 된 메소드를 설정합니다. 또한 다음과 같은 문제를 다룹니다.

onblur | .blur / onfocus | .focus " 중복 "호출
단어와 같은 대체 앱을 선택하여 초점을 잃는 창
- This tends to be undesirable simply because, if you have a bank page open, and it's onblur event tells it to mask the page, then if you open calculator, you can't see the page anymore!
Not triggering on page load

Use is as simple as: _{Scroll Down to 'Run Snippet'}

$.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>

참고URL : https://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus

'Programing' 카테고리의 다른 글

데이터 프레임 열의 데이터 유형 결정 (0)	2020.07.02
몽고 쉘-콘솔 / 디버그 로그 (0)	2020.07.02
에 jQuery UI 제출 대화 상자 (0)	2020.07.02
백업 장치를 열 수 없습니다. (0)	2020.07.02
NumPy Matrix와 Array 클래스의 곱셈은 어떻게 다릅니 까? (0)	2020.07.02

현재글브라우저 탭에 포커스가 있는지 감지

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

java, 행사, c++, 축제, JQuery, 가족나들이, 놀거리, Spring3, 뮤지컬, c#, spring, 관광, 여행, 볼거리, 무비순위, 공연, 자바, 극장순위, 연극, Javascript,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

lottogame

브라우저 탭에 포커스가 있는지 감지

브라우저 탭에 포커스가 있는지 감지

재미 있고 사용하기 쉬운!

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

브라우저 탭에 포커스가 있는지 감지

브라우저 탭에 포커스가 있는지 감지

재미 있고 사용하기 쉬운!

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바