如何判斷使用者正在操作頁面？當頁面一個小時沒有操作時跳轉到指定頁面如何做？

王铁柱6發表於2024-12-08

要判斷使用者是否正在操作頁面，並在一小時無操作後跳轉到指定頁面，你可以使用 JavaScript 的事件監聽器和定時器。以下是一種實現方法：

// 設定超時時間（以毫秒為單位）
let inactivityTimeout = 60 * 60 * 1000; // 1小時

// 設定定時器
let timeoutTimer;

// 重置定時器
function resetTimer() {
  clearTimeout(timeoutTimer);
  timeoutTimer = setTimeout(redirect, inactivityTimeout);
}

// 跳轉到指定頁面
function redirect() {
  window.location.href = "your_redirect_url.html"; // 替換為你的目標URL
}

// 監聽使用者活動事件
document.addEventListener('mousemove', resetTimer);
document.addEventListener('keydown', resetTimer);
document.addEventListener('click', resetTimer);
document.addEventListener('scroll', resetTimer);
// 可以根據需要新增其他事件，例如 'touchstart' 用於觸屏裝置

// 頁面載入時啟動定時器
resetTimer();


// 可選：提供一個方法讓使用者手動停止計時，例如在一個暫停按鈕的點選事件中呼叫：
function stopTimer() {
    clearTimeout(timeoutTimer);
}

// 可選：當使用者返回到頁面時重新啟動計時器
window.addEventListener('focus', resetTimer);


// 可選：當使用者離開頁面時停止計時器，避免在使用者離開頁面後仍然跳轉
window.addEventListener('blur', stopTimer);

程式碼解釋：

  1. inactivityTimeout: 設定超時時間，單位為毫秒。這裡設定為 1 小時。
  2. timeoutTimer: 儲存定時器物件，以便清除和重置。
  3. resetTimer(): 清除當前定時器，並重新設定一個新的定時器。這確保了每次使用者活動都會重新計時。
  4. redirect(): 執行跳轉操作，將頁面重定向到指定的 URL。 記住替換 your_redirect_url.html 為你的目標 URL。
  5. 事件監聽器: 使用 addEventListener 監聽使用者的各種活動，例如滑鼠移動、鍵盤按下、點選和滾動。每次使用者執行這些操作時，都會呼叫 resetTimer() 函式重置定時器。
  6. 頁面載入啟動: 在頁面載入時呼叫 resetTimer()，啟動初始計時器。
  7. stopTimer() (可選): 提供一個停止計時器的方法，可以繫結到按鈕等元素上，讓使用者手動控制計時器的停止。
  8. focus 和 blur 事件監聽 (可選): 透過監聽 focus (視窗獲得焦點) 和 blur (視窗失去焦點) 事件，可以更精確地控制計時器，避免在使用者離開頁面後仍然進行跳轉。

關鍵改進和最佳實踐：

  • 更全面的事件監聽: 新增了 scroll 事件，以及對觸屏裝置的 touchstart 事件的建議，以覆蓋更廣泛的使用者互動場景。
  • focus 和 blur 事件處理: 新增了對 focus 和 blur 事件的處理，使計時器更加精確，只在使用者實際瀏覽頁面時計時。
  • stopTimer() 函式: 提供了停止計時器的功能，增加了靈活性。
  • 清晰的註釋: 對程式碼進行了更詳細的註釋，方便理解和維護。

使用方法：

將這段 JavaScript 程式碼新增到你的 HTML 檔案的 <script> 標籤中，或者放在一個單獨的 .js 檔案中，然後在 HTML 中引用它。 確保將 your_redirect_url.html 替換為你想要跳轉的頁面的 URL。

這個改進後的版本更加健壯和使用者友好，可以更準確地判斷使用者是否正在操作頁面，並提供更靈活的控制。

相關文章