반응형
HTML+JS에 사용할 수 있다.
<script>
window.onblur = function () { document.title = 'you went?'; }
window.onfocus = function () { document.title = 'you came back'; }
</script>
가장 간단히 위의 문을 사용할 수 있다.
const getBrowserHiddenProps = () => {
let hidden, visibilityChange
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
return {
hidden,
visibilityChange
}
}
return {
hidden: hidden,
visibilityChange: visibilityChange
}
const { hidden, visibilityChange } = getBrowserHiddenProps()
if (typeof document.addEventListener !== "undefined" && typeof hidden !== "undefined") {
// We can continue
document.addEventListener(visibilityChange, () => {
}, false)
}
const { hidden, visibilityChange } = getBrowserHiddenProps()
if (typeof document.addEventListener !== "undefined" && typeof hidden !== "undefined") {
// We can continue
document.addEventListener(visibilityChange, () => {
if (document[hidden]) {
document.title = "😭 PLEASE COME BACK!!"
} else {
document.title = "😍 YAY!"
}
}, false)
}
반응형
'🌔Developers > JavaScript \ HTML' 카테고리의 다른 글
[HTML/CSS] 자바스크립트로 랜덤 구현하는 여러 방법 + 랜덤한 속도로 타이핑 효과 구현 (0) | 2023.07.03 |
---|---|
[HTML/JS] 특정 단어 또는 욕설 필터링하기 (0) | 2023.07.02 |
[HTML /JS] 이미지를 드래그 앤 드롭으로 업로드, 이미지 이름과 크기 변경하기 (0) | 2023.06.30 |
[JS] 입력된 줄바꿈 저장하기 (0) | 2023.02.19 |