[英]How to detect if the React app is actually being viewed on mobile menu actions
I have a React app, I've added eventlisteners to the window.我有一个 React 应用程序,我在 window 中添加了事件监听器。 So, this way I can detect if the user actually viewing the page or not.
因此,通过这种方式,我可以检测用户是否实际查看了该页面。 On computer browser, everything works as expected.
在计算机浏览器上,一切都按预期工作。
But I tried this on IphoneX (it's irrelevant but the browser was Safari), and I came across this: If the user holds the bottom of the menu and swipe away all the open ones , then onBlur doesn't work .但是我在 IphoneX 上试过这个(这无关紧要,但浏览器是 Safari),我遇到了这个问题:如果用户按住菜单底部并滑动掉所有打开的菜单,那么onBlur 不起作用。 It stays on the onFocus event.
它停留在 onFocus 事件上。 So actually window.eventlistener not working properly on mobile.
所以实际上 window.eventlistener 在移动设备上无法正常工作。
Also, when I open the browser again (but not clicking anything, just opening the browser and view the page) onFocus event also not working.此外,当我再次打开浏览器(但没有单击任何内容,只是打开浏览器并查看页面)时,onFocus 事件也不起作用。 It waits for me to touch or click somewhere on the page.
它等待我触摸或单击页面上的某个位置。
How to handle user focus/blur completely on mobile side?如何在移动端完全处理用户焦点/模糊?
In the documentation for iOS / Safari supported events, they suggest pageshow
and pagehide
to listen for the kind of activity that I think you're talking about.在 iOS / Safari 支持的事件的文档中,他们建议
pageshow
和pagehide
来监听我认为您正在谈论的那种活动。
You can use requestAnimationFrame
to check if the user is watching the page.您可以使用
requestAnimationFrame
检查用户是否正在观看页面。
function isWatching(){
console.log("watching: " + Date.now());
requestAnimationFrame(isWatching);
}
requestAnimationFrame(isWatching);
See the example here: https://jsfiddle.net/t2r1sp56/ and you should also read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame请参阅此处的示例: https://jsfiddle.net/t2r1sp56/您还应该在此处阅读更多信息: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
you can use window.navigator
to get all OS and browser info您可以使用
window.navigator
获取所有操作系统和浏览器信息
You can use visibilityChange
event and for the complete compatibility, you need to use webkit, ms, etc. prefix.您可以使用
visibilityChange
事件,为了完全兼容,您需要使用 webkit、ms 等前缀。 I hope it helps:)我希望它有帮助:)
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) }
I have solved the issue using below event listeners.我已经使用下面的事件监听器解决了这个问题。
document.addEventListener("visibilitychange", handleActivity);
document.addEventListener("blur", handleActivityFalse);
window.addEventListener("blur", handleActivityFalse);
window.addEventListener("focus", handleActivityTrue);
document.addEventListener("focus", handleActivityTrue);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.