0

I want to know when my website is hidden on iOS. I tried using event listener for visibilitychange event:

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    console.log('visible')
  }else {
    console.log('hidden')
  }
})

which works if I switch tabs.

But it doesn't work if I lock the device or minimizing the browser, the visibilitychange is fired twice after the device is unlocked, once for hidden and once for visible.

I also tried using blur and pagehide but they also didn't work.

Thanks

Daniel Muñoz
  • 547
  • 1
  • 7
  • 23
Schor
  • 121
  • 8
  • What is it that you are trying to achieve. There are different solutions to this problem posted on stackoverflow, but its only relevant for certain cases. Do you need to do something on your website when the screen is locked? this sounds very unusal – Simon McLoughlin Nov 20 '19 at 15:29
  • @SimonMcLoughlin I want to measure the time spent on my website. I planned on using ```visibilitychange``` event for that. Resume counting when ```document.visibilityState === 'visible'``` otherwise pausing the count. I noticed that if I lock the screen on my iphone 6+ the ```visibilitychange``` is caught only after I unlock the phone, and the same when I minimize the browser. Thanks – Schor Nov 21 '19 at 07:20
  • 1
    Looks like your question is a duplicate of the above. The second answer talks about a workaround to use javascript with a timer to check every second if the screen is open. When the screen is unlocked you can check the difference – Simon McLoughlin Nov 21 '19 at 10:48

0 Answers0