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

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

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

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

// 用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页面代码如下:

$a=@$_POST['AA'];

if($a){echo $a;

}else{

echo "no data";

}

?>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值