最新消息:因从typecho切换到wordpress, 由于转换导入问题,文章可能存在部分乱码或者排版问题,逐个排查修复中...

如何在浏览器页面关闭前保存数据且不弹框?

懒得分类 admin 1281浏览 0评论

近期团队成员在我们的网站页面加了用户访问信息的记录,比如什么时间访问的,访问的是什么页面,期间提交了哪些参数,还有就是什么时候离开的。简单说来就是用来追踪访客行为的,也还顺带可以监测性能(比如访问什么资源时需要花时多久等等)

不过有个小问题就是每次访问页面在关闭页面时都会弹一个对话框。提示是否确认离开的。包括刷新页面也会提示。个人感觉体验上还有增强的空间。

如果你曾经做过个人站点,要追踪访客信息的话,个人站长最常用的就是会在网站各个页面底部添加一些统计代码,这样就可以在统计网站后台看到一些访客信息。但是在我们部署这些代码后,我们的访客并不会在访问我们网站后在要关闭时收到一个弹框提示TA是否要保存。

另外从技术上来说,这其实就是监听浏览器的DOM事件而已。既然能监听到用户的关闭行为并在这之间做一些事情 ,比如后台提交数据 ,比如弹了一个框(来自浏览器本身)。那么当然也可以直接提交数据即可,我们不要额外的恼人的弹框。

最后,翻了下同事的代码,找到相关的JS 代码,简单修改了下(2处),可以完美解决恼人的弹框问题。

直接放上关键代码

window.onbeforeunload = function() {

$.ajax({
	type: 'POST',
	data: {the_data_you_want_to_post},
	url: '/log_info',
	async:false
	});
return underfined;
}

几个说明:

  • 监听的事件是 beforeunload
  • ajax 默认是异步,这里设置为False也就是关闭异步,不然可能在页面关闭后你的数据并没有上传。在关闭页面时比关闭其它页面能感觉到一丝丝停顿。因为毕竟要post数据到后端嘛。
  • return underfined 避免弹框

转载请注明:Linc Hu » 如何在浏览器页面关闭前保存数据且不弹框?

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址