js 怎樣判斷使用者是否在瀏覽當前頁面

^Mao^發表於2024-09-03
JS

需求

有的時候我們需要防止使用者對應用進行截圖。

思路

window.onfocus 和window.onblur 可以監聽當前頁面被其他應用覆蓋的情況，而visibilitychange無法監測到

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // document.addEventListener('visibilitychange', function () {
      //   // 使用者離開了當前頁面
      //   if (document.visibilityState === 'hidden') {
      //     document.title = '頁面不可見'
      //   }

      //   // 使用者開啟或回到頁面
      //   if (document.visibilityState === 'visible') {
      //     document.title = '頁面可見'
      //   }
      // })

      window.onfocus = function () {
        document.title = '頁面聚焦'
      }
      window.onblur = function () {
        document.title = '頁面失去焦點'
      }
    </script>
  </body>
</html>

參考

https://www.cnblogs.com/csuwujing/p/10315309.html

相關文章