微信中对页面后退进行监听

在实际开发中经常会遇到这样的需求,在本页面做了某一些操作,去往下一个页面进行了一些修改,改变了本页面的某些状态,但是用户并没有按照你的指引前往了下一个页面,而是返回了上一个页面,这样子如何对这个页面进行操作呢.

对不同移动端的微信浏览器进行了一番测试 ,发现安卓只要点击后退按钮页面就会刷新,而ios端点返回页面则不会刷新,因此如果要在判断返回的时候 做一些操作,可以使用如下代码:

var isPageHide = false;
window.addEventListener('pageshow', function () {
  if (isPageHide) {
    // your action here
  }
});
window.addEventListener('pagehide', function () {
  isPageHide = true;
});

在页面添加了pageshowpagehide事件,前往另一个页面时,会触发pagehide事件,这样就把isPageHide设置为true,当你回到这个页面时,就可以做一些刷新页面或者其他的操作

XHR缓存

在页面做登陆判断的时候,经常会有后端重定向回某个页面等,但是如果你切换了账号,由于某些AJAX请求获取的状态经常会被缓存,这样回到这个页面的时候,由于先前的XHR已经发起过,浏览器会判断不需要再次发起请求,所以这里需要禁用AJAX缓存

$.ajax({
  type:"GET"
  url:'test.html',
  cache:true,
  dataType:"html",
  success:function(msg){

  }
});

其中的cache即表示缓存,jquery中ajax缓存其实是在发起请求的时候加入一个”_={timestamp}”,保证每个请求都是不一样

移动端new date 时区问题

接手前人项目时,发现他在订单过期的判断逻辑用的居然是客户端时间,是在是难以理解这样写的逻辑,同时前后端时间传递的逻辑,居然是字符串的时间格式,诸如此类2018-1-20 12:00:00,这样我们拿到的时候,还需要转换一次,然而,就在这样子转换的时候,发现了移动端的一个天坑,在浏览器端,就算你把你的电脑时间写成了东京时间(北京时间+1),但是你new Date('2018-1-20 12:00:00')的时候,他会把手机的时区带上,所以输出的是

Sat Jan 20 2018 12:00:00 GMT+0900 (JST)

随后如果你想要计算和后端传过来的订单过期时间的时间差来进行倒计时的话,应该要调用getTime()方法,但是时间戳指的是

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数

因此计算时间戳的时候,就会有偏差.

解决方案1

首先从后端传过来的是北京时间的时间字符串,所以我们需要计算一下客户端的时间时区,和北京时间的时间差,这边可以用到getTimezoneOffset()方法,该方法返回的是时区间隔*分钟数,比如东京返回的是-540,随后我们减去北京时间-480,得到的就是-60,之前得到的时间戳加上-60*60,就得到了正确的北京时间描述间隔,随后再进行订单过期判断,就ok啦.

解决方案2

直接让后端传时间戳,这才是一劳永逸的方法!!时间字符串真的是邪道!