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

标签：使用   数据   os   set   cti   问题   

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

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

记录下鼠标坐标并发送的代码，如下：

// 用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
$a=@$_POST[‘AA‘];

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

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

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

标签：使用   数据   os   set   cti   问题   

原文地址：http://www.cnblogs.com/damade/p/3797004.html