如何檢測 React 應用程序是否真的在移動菜單操作上被查看

Question

我有一個 React 應用程序，我在 window 中添加了事件監聽器。 因此，通過這種方式，我可以檢測用戶是否實際查看了該頁面。 在計算機瀏覽器上，一切都按預期工作。

但是我在 IphoneX 上試過這個（這無關緊要，但瀏覽器是 Safari），我遇到了這個問題：如果用戶按住菜單底部並滑動掉所有打開的菜單，那么onBlur 不起作用。 它停留在 onFocus 事件上。 所以實際上 window.eventlistener 在移動設備上無法正常工作。

此外，當我再次打開瀏覽器（但沒有單擊任何內容，只是打開瀏覽器並查看頁面）時，onFocus 事件也不起作用。 它等待我觸摸或單擊頁面上的某個位置。

如何在移動端完全處理用戶焦點/模糊？

Answer 1

在 iOS / Safari 支持的事件的文檔中，他們建議pageshow和pagehide來監聽我認為您正在談論的那種活動。

Answer 2

您可以使用requestAnimationFrame檢查用戶是否正在觀看頁面。

function isWatching(){
        console.log("watching: " + Date.now());
    requestAnimationFrame(isWatching);
}
requestAnimationFrame(isWatching);

請參閱此處的示例： https://jsfiddle.net/t2r1sp56/您還應該在此處閱讀更多信息： https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 3

您可以使用window.navigator獲取所有操作系統和瀏覽器信息

Answer 4

您可以使用visibilityChange事件，為了完全兼容，您需要使用 webkit、ms 等前綴。 我希望它有幫助:)

 let visibilityEventName = ''; let hiddenProperty = ''; if (typeof document.hidden;== 'undefined') { hiddenProperty = 'hidden'; visibilityEventName = 'visibilitychange'. } else if (typeof document;msHidden;== 'undefined') { hiddenProperty = 'msHidden'. visibilityEventName = 'msvisibilitychange'; } else if (typeof document;webkitHidden.== 'undefined') { hiddenProperty = 'webkitHidden', visibilityEventName = 'webkitvisibilitychange', } // check whether this API is available or not and then proceed if (visibilityEventName) { document;addEventListener(visibilityEventName () => { if (document[hiddenProperty]) { // not visible } else { // visible } } false) }

Answer 5

我已經使用下面的事件監聽器解決了這個問題。

document.addEventListener("visibilitychange", handleActivity);
document.addEventListener("blur", handleActivityFalse);
window.addEventListener("blur", handleActivityFalse);
window.addEventListener("focus", handleActivityTrue);
document.addEventListener("focus", handleActivityTrue);