사용자가 JavaScript를 사용하여 탭을 전환할 때 감지
이 문제를 해결하는 방법을 아는 두 가지 방법이 있습니다. 그럼 두 가지 모두 보여드리겠습니다.
방법 - 1
이 방법에서는 두 개의 이벤트 리스너focus(사용자가 웹 사이트 또는 창에 초점을 맞출 때) 및 blur(사용자가 초점을 잃을 때)을 사용합니다.
사용자가 다른 탭에 있을 때 웹사이트 페이지를 볼 수 없기 때문에 실제로 HTML이 필요하지 않습니다. 자바스크립트만 다음을 수행합니다.
// when the user loses focus
window.addEventListener("blur", () => {
document.title = "Breakup";
});
// when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
document.title = "Patch Up";
});
방법 - 2
이 방법에서는 하나의 이벤트 리스너( visibilitychange )만 필요합니다. 창 전환 상태를 감지하는 데 사용할 수 있는
visibilityState
라는 속성이 있습니다.document.addEventListener("visibilitychange", () => {
// it could be either hidden or visible
document.title = document.visibilityState;
});
이를 사용하여 사용자가 포커스를 잃을 때 음악 또는 비디오 중지와 같은 웹 사이트에 많은 기능을 추가할 수 있습니다.
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'visible') {
music.play();
} else {
music.pause();
}
});
직접 사용해 보고 싶다면 LIVE을 확인하십시오.
마무리:
이것이 사용자가 탭을 전환할 때 감지하는 데 필요한 전부입니다. 두 방법 모두 예상대로 작동합니다. 당신은 그들 중 하나를 사용할 수 있습니다. 이 기사가 마음에 드셨다면 ❤️를 잊지 마시고 질문이나 피드백이 있으시면 주저하지 말고 아래 댓글에 남겨주세요. 다음 편에서 볼게요.
🌐 나와 연결:
Github
Newsletter
Website
Buy me a Coffee
Reference
이 문제에 관하여(사용자가 JavaScript를 사용하여 탭을 전환할 때 감지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/j471n/detect-when-users-switch-tabs-using-javascript-3mi3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)