반응형
브라우저 탭에 포커스가 있는지 탐지
탭에 포커스가 있는지 확인할 수 있는 신뢰할 수 있는 교차 브라우저 방법이 있습니까?
시나리오는 주가에 대해 정기적으로 투표하는 애플리케이션이 있으며, 페이지에 포커스가 없으면 투표를 중지하고 모두의 트래픽 소음을 줄일 수 있습니다. 특히 사람들이 서로 다른 포트폴리오로 여러 탭을 여는 것을 좋아하는 경우입니다.
아이즈window.onblur그리고.window.onfocus이것에 대한 옵션?
네.window.onfocus그리고.window.onblur시나리오에 적합해야 합니다.
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
아무도 언급되지 않은 것을 보니 놀랍습니다.document.hasFocus
if (document.hasFocus()) console.log('Tab is active')
중요 편집:이 대답은 구식입니다.작성 이후 Visibility API(mdn, 예제, 사양)가 도입되었습니다.이것이 이 문제를 해결하는 더 좋은 방법입니다.
var focused = true;
window.onfocus = function() {
focused = true;
};
window.onblur = function() {
focused = false;
};
AFAIK,focus그리고.blur모두가... 모든 것에 지지를 받고 있습니다.(http://www.quirksmode.org/dom/events/index.html 참조)
이 문제에 대해 검색하던 중 페이지 가시성 API를 사용해야 한다는 제안을 발견했습니다.대부분의 최신 브라우저는 Can I Use: http://caniuse.com/ #module= 페이지 가시성에 따라 이 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 브라우저에 대한 접두사 속성을 가지고 있었지만, 한동안 이 브라우저들이 접두사 없이 페이지 가시성 API를 제공했기 때문에 저는 그 구현을 제거했습니다.IE10과 호환되도록 Microsoft 전용 접두사를 유지했습니다.
승인된 답변에서 버그를 발견하여 이 답변을 게시합니다.
버그는 포커스가 있는 창에서 개발자 콘솔을 열고 아무 곳이나 클릭할 때 개발자 콘솔이 포커스가 있는 이 시점의 창.onfocus 또는 window.onblur에는 아무런 영향이 없습니다.
그래서 여기 제 해결책이 있습니다.
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
console.log('has focus');
} else {
console.log('lost focus');
}
});
더 읽어보기 https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
저는 이런 식으로 할 것입니다(참고 자료 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에서 사용 가능한 원시 데이터
재미있고 사용하기 쉽습니다!
다음 플러그인은 다양한 버전의 IE, Chrome, Firefox, Safari 등에 대한 표준 테스트를 거칩니다.그에 따라 선언된 방법을 설정합니다.또한 다음과 같은 문제도 다룹니다.
- onblur|.volution/onfocus|집중적인 "전화" 통화
- 단어와 같은 대체 앱을 선택하여 초점을 잃는 창
-
- 이것은 단순히 은행 페이지가 열려 있고, 그것이 흐릿한 이벤트에 의해 페이지가 가려지고, 계산기를 열면 더 이상 페이지가 보이지 않기 때문에 바람직하지 않은 경향이 있습니다!
- 페이지 로드 시 트리거되지 않음
사용법은 다음과 같이 간단합니다.
$.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>이 아이는 10살입니다.탭 전환 시 CSS 애니메이션 일시 중지/재개
기본적으로 Mozillas Javascript https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event 를 사용합니다.
function pause() {
//Do something
}
function play() {
//Do something
}
window.addEventListener('blur', pause);
window.addEventListener('focus', play);
위의 모든 훌륭한 신사들의 답변을 바탕으로 한 리액트 훅 버전:
import { useEffect, useState } from 'react';
const EVENT_NAME = 'visibilitychange';
export const useTabFocus = () => {
const [hasFocus, setHasFocus] = useState(isVisible());
useEffect(() => {
const onVisibilityChange = () => {
setHasFocus(isVisible());
};
document.addEventListener(EVENT_NAME, onVisibilityChange);
return () => {
document.removeEventListener(EVENT_NAME, onVisibilityChange);
};
}, []);
return hasFocus;
};
const isVisible = () => document.visibilityState === 'visible';
언급URL : https://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus
반응형
'programing' 카테고리의 다른 글
| 선택된 행 사용 위치UITableView에 대한 IndexPath 또는 prepareForSegue 메서드를 선택하시겠습니까? (0) | 2023.08.10 |
|---|---|
| 여러 Github 프로젝트에 동일한 배포 키 사용 (0) | 2023.08.10 |
| 컨테이너 요소에 부유 요소가 포함되어 있으면 높이가 증가하지 않는 이유는 무엇입니까? (0) | 2023.08.10 |
| 날짜 시간에서 하루가 아닌 1시간 빼기 (0) | 2023.08.10 |
| [App\Post]에서 대량 할당을 허용하도록 채우기 가능한 속성에 [제목] 추가 (0) | 2023.08.10 |