zoukankan      html  css  js  c++  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页面代码如下:

    <?php
    $a=@$_POST['AA'];

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

  • 相关阅读:
    Sharding-JDBC多数据源动态切换
    U 盘安装 CentOS 7 时出现 No Caching mode page found 问题的解决
    sudo 密码直接添加到命令行以方便实现脚本自动化
    Python3 Windows 虚拟环境的若干问题
    20 张图让你彻底弄懂 HTTPS 原理!
    全网写得最好的分库分表之 Sharding-JDBC 中间件介绍
    以为线程池很简单,结果第一道题就被干趴下了!
    以为线程池很简单,没想到第一问就被干趴下了
    分布式事务,看这篇就够了!
    我是一个线程池
  • 原文地址:https://www.cnblogs.com/damade/p/3797004.html
Copyright © 2011-2022 走看看