[웹개발] 사용자가 다른 탭 볼때 웹페이지 탭 타이틀 바꾸기

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)
}