【问题标题】:Javascript event for mobile browser re-launch or device wake用于移动浏览器重新启动或设备唤醒的 Javascript 事件
【发布时间】:2012-11-27 17:20:39
【问题描述】:

早上好,我正在寻找某种 Javascript 事件,可用于检测移动浏览器窗口何时重新获得焦点,在用户关闭/最小化其浏览器(返回主屏幕/其他应用程序)之后,或者如果设备从睡眠状态恢复(用户将其关闭,或者在屏幕超时后进入睡眠状态)。

我希望能够找到一个适用于所有事情的单一事件,但我知道这不太可能! pageshow 事件适用于 iOS 设备,但它与其他所有设备一起使用时相当粗略。我试过focusDOMActivate,但似乎都没有达到预期的效果。

页面上可能并不总是有表单元素,我真的不希望用户必须再次触摸页面才能触发事件。

此类事件的要求是由我们的代码通过发出 XHR 请求定期检查新内容引起的。当浏览器处于睡眠状态时,这些永远不会发送,因此我们永远不会获得新的内容来重新启动超时。

感谢你们提供的任何帮助!

【问题讨论】:

    标签: javascript android ios mobile


    【解决方案1】:

    我们遇到了类似的问题并解决了这个问题:

    var lastSync = 0;
    var syncInterval = 60000; //sync every minute
    
    function syncPage() {
      lastSync = new Date().getTime(); //set last sync to be now
      updatePage(); //do your stuff
    }
    
    setInterval(function() {
      var now = new Date().getTime();
      if ((now - lastSync) > syncInterval ) {
        syncPage();
      }
    }, 5000); //check every 5 seconds whether a minute has passed since last sync
    

    这样,如果您的页面处于活动状态,您将每分钟同步一次,并且如果您将浏览器置于空闲模式超过一分钟,则在再次打开浏览器时最多会经过 5 秒的同步。短时间间隔可能会比您想要的更多地消耗电池,因此在根据您的需要调整时间时请记住这一点。

    【讨论】:

    • 智能。如果它已经睡着了,lastSync 会过时,然后你刷新或要求被推送(如果使用 websockets)?
    • 如果我正确理解你的问题,答案是“是”:) 你可以在我调用 updatePage() 函数的地方做任何你需要的事情。就我而言,我向服务器询问状态并相应地更新客户端。如果它们仍处于相同状态,则更新不会执行任何操作。
    • 2019 年更新:如果您像我一样偶然发现这个(优秀且仍在工作的)答案,您还可以查看最近在 Safari、Firefox 和 Chrome 上为我工作的 Page Visibility API iOS 12.4(*编辑:格式化)
    【解决方案2】:

    比间隔更好的是添加一个窗口模糊侦听器和一个窗口焦点侦听器。在模糊时,记录当前时间。在焦点上,验证您是否仍然登录/同步/您需要做的任何事情。

    基本上完全一样,但它只在必要时运行,而不是在一段时间内减慢整个页面的速度。

    更新

    var $window = $(window),
      $window.__INACTIVITY_THRESHOLD = 60000;
    
    $window.add(document.body);  //necessary for mobile browsers
    
    $window.declareActivity = function () { $window.__lastEvent = new Date(); };
    
    $window.blur($window.declareActivity);
    $window.focus(function(){
      var diff = (new Date()) - $window.__lastEvent;
      if (diff > $window.__INACTIVITY_THRESHOLD) { 
         $window.trigger("inactivity"); 
      }
    });
    
    $window.on("inactivity", "", null, function () {
      //your inactivity code
    });
    

    虽然如果手机关机,模糊事件似乎很粗略,我不知道我会在所有情况/移动设备上信任它。所以我可能会抛出这样的东西:

    $(document.body).on("click scroll keyup", "", null, $window.declareActivity);
    

    这样我的不活动计时器也适用于用户刚刚走开的情况。根据您的站点,您可能需要调整该确切的事件列表 - 或简单地输入 $window.declareActivity();到响应用户输入的现有脚本中。

    【讨论】:

    • 您能否提供一些示例代码来说明您的解决方案?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-08
    • 1970-01-01
    • 2017-03-11
    • 2012-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多