判断当前页面离开后处理数据

做一个项目,涉及到记录下当前页面的鼠标坐标,并发送给后台。

有两个步骤,一步是记录下鼠标坐标并发送后台,二步是当鼠标离开页面时停止发送数据。

记录下鼠标坐标并发送的代码,如下:

// 用sta字符串记录下鼠标的坐标

var sta = ‘‘;
function changeXY(){
$(window).bind(‘mousemove‘,function(e){
var x = e.pageX;
var y = e.pageY;
sta += ‘(‘ + x +‘:‘ + y + ‘),‘;
});
}
changeXY();

//使用post()异步发送数据,创建dataXY.php接受数据,设置AA为接收的key值,document.write(data)返回写入当前页面
function dataXY(){
$.post(‘dataXY.php‘,{AA : sta},function(data){
document.write(data);
});
sta = ‘‘;
}

难点在于第二步,由于要记录下的数据会很大,不能时刻请求服务器,所以要设置个计时器请求服务器,本例子为了测试,时间设置为5S,

还要判断用户鼠标如果不停留在当前页面下,关闭或切换到别的地方时,将停止发送数据给服务器(考虑到设计时器的时间过长时,离开页面后的最后一次数据也要发送给后台)。

我的思路是当获取页面焦点时开始传送数据,失去焦点后取消计时器,代码如下:

document.onblur = function(){
dataXY();
clearInterval(ad);
};
document.onfocus = function(){
ad = setInterval(dataXY,5000);
};

这样测试了下,发现了一个问题,如果用户刷新页面时,最后一次的数据不能提交给后台,这里可以用js的onbeforeunload方法实现,onbeforeunload方式是当前页也改变时发生的事件,如页面后退,前进,关闭,刷新,链接地址改变。可能有人会觉得直接用onbeforeunload方法就可以实现上述说的问题了,我测试了下,比如浏览器打开了几个页面,相互切换是不触发onbeforeunload事件的,还有Tab+Alt切换程序也不触发。代码如下:

window.onbeforeunload = function(){
dataXY();
clearInterval(ad);
}

不过Opera浏览器是不兼容onbeforeunload 事件的。

整个代码就实现了,dataXY.php页面代码如下:

<?php
[email protected]$_POST[‘AA‘];

if($a){echo $a;
}else{
echo "no data";
}
?>

判断当前页面离开后处理数据,布布扣,bubuko.com

时间: 2024-11-05 00:47:47

判断当前页面离开后处理数据的相关文章

HTML5中window.postMessage,在两个页面之间的数据传递

HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage.关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递. 应用场景 我只

Java中如何判断一个double类型的数据为0?

Java中如何判断一个double类型的数据为0 其实这个问题很简单,只是很多时候考虑复杂了,直接用==判断即可.下面给出测试例子: /**  * 如何判断一个double类型的数据为0  *  * @author leizhimin 2014/8/27 10:31  */ public class Test4 {     public static void main(String[] args) {         double x = 0.00000000000000000;       

PHP 页面中实现数据的增删改查

main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>姓名</td> <td>性别</td> <td>民族</td> <td>生日</td> &l

react-router 页面离开 url错误

以前项目使用 react-router2.0, 业务层面页面离开的时候需要弹出自己的弹出框,根据用户的操作,进行是否可以离开 试了几种方式都存在问题,实现的并不完美,没办法对用户点击浏览器后退支持的很好,除非是显示系统默认的confirm,同步处理 1.setRouteLeaveHook setRouteLeaveHook没有callback机制,只能是修改了变化标志位,再push一遍,但是这个在实际情况也是有问题的,因为history就一直是push了,跟用户点后退不是一个交互了 2.onCh

页面刷新vuex数据消失问题解决方案 之 vuex中间件

之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用  store.subscribe , 当时还有点觉得不可能,仔细再去看vuex官方文档. 这个还真的是可行,但当然也是存在不方便的地方的. 此方案现在已经应用我基于vue开发的音乐web app VBOX 上,欢迎大家给star. 基本方案和步骤如下 1. 简单的按照键复制对象 2. localStorage存储的封装

22SpringMvc_jsp页面上的数据传递到控制器的说明

假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下: 输入信息后点击确定,把这些信息保存到后台. 点击确定后.来到这里: 这就是效果. ----------------------------------------------------------------------------------------------------------------------------------- 我们给出具体的案例然后给出分析: 1.jFactoryCreate.j

js 判断 当页面无法回退时(history.go(-1)),关闭网页

在做一个Web项目时遇到一个需求,当页面没有前驱历史记录时(就是当前为新弹出的页面,没法做goback操作即history.go(-1)),点击返回按钮时直接关闭页面,否则就退回到前一页. 遇到的问题就是如何判断 是否有history可以回退,这个非常麻烦,因为没有这样的函数直接能获取到,只能通过history.length这个变量做变通的处理,但是对于IE,和非IE的length的返回值不同,ie: history.length=0, 非IE的为1,因此写了一个函数实现前面所需求的这个功能.分

Android页面之间进行数据回传

Android页面之间进行数据回传 要求:页面1跳转到页面2,页面2再返回页面1同时返回数据 页面1添加如下代码: Intent intent = new Intent(); intent.setClass(页面1.this, 页面2.class); Bundle bundle = new Bundle(); intent.putExtras(bundle);//将Bundle添加到Intent,也可以在Bundle中添加相应数据传递给下个页面,例如:bundle.putString("abc&

获取同一个页面里的数据

获取同一个页面里某数据之属性法 html代码: <a id=<s:property value="id" /> onlinearea="<s:property value="online_area" />" notlinearea="<s:property value="notline_area" />" onclick="updatep(this)&qu