记一次onbeforeunloadbody的页面关闭卸载触发处理

tech2023-05-21  103

需求背景:

    同一个后台编辑页面,A编辑的时候B访问此页面,给出提示“A正在编辑”。

思路:

    结合操作人、操作文章做一个键值对存进redis做标识位,过期时间为半小时,文章第一个操作的会被记录,后续操作的会提示,当第一个操作的人关闭页面时,释放redis标识。 

实施:

    后台加载编辑页时获取当前操作人,若是第一个则记录,前端js使用window.onbeforeunloadbody方法监听编辑页关闭/卸载,触发释放redis标识的ajax

问题:

    运营、开发、产品会有一个操作是,打开页面后,不进行交互即对编辑页无操作,然后关闭页面,由于onbeforeunloadbody方法想要在页面关闭/卸载时触发,前提是,必须要对页面进行交互,比如点击等,否则不会触发,不触发就会产生一个异常,用户打开页面会被记录,但是无交互关闭,会无法释放redis标识,也就是说,A操作后,B在标识到期之前访问这个编辑页,将总是会被提示A在编辑。

解决:

    由于onbeforeunloadbody的特殊性(只有页面交互后才会触发),那我就要把存放标识位的动作单独拿出来,不是在后台加载编辑页面时就存储标识位,而是,当用户有过页面交互行为时,再进行标识位的存储。

    那么我们怎么判别一个用户是否对页面进行过页面交互呢?我的想法是,既然是个编辑页面,那么他只有在编辑的时候才算交互,编辑就需要进行点击,所以我在编辑页的body上加了一个全局的点击事件,这里要注意的是,每有一次点击就会触发一次,所以我们要做好次数控制,只要有一次点击就够, 避免对标识重复存储。

    存储时机解决了,那么当用户打开页面并有交互行为时我们就会对标识位进行唯一的一次存储,也会触发关闭/卸载事件,对标识位进行关闭,这样就能保证一篇文章标识资源的获取与释放,就不会出现明明已经关闭了,但其他人打开的时候还会提示正在编辑。

坑外闲话:

    由于对前端生僻方法不熟知和此问题不能本机多账号测,所以onbeforeunloadbody让我头疼了好一阵,网上对这个方法的细节介绍也不多,尤其是必须要有交互行为才能触发这一点,这点踩了一个坑,这里还是得记录一下。

最新回复(0)