ios返回页面不重新调接口的问题

1.理解visibilitychange以及pageshow

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息,通过document的hidden属性可以判断标签是否可见。true时代表标签不可见

pageshow/pagehide会在页面跳转前后触发，而visibilitychange会在页面被隐藏或显示时(如浏览器tab切换、窗口被最小化等)触发

假设页面a中间有跳转去游戏，返回之后需要重新调用接口,考虑到兼容性问题，可用以下的组件实现

2.ios返回页面不重新调接口的问题

<script>
// 自定义isShowPage状态
export default {
  data() {
    return {
      isShowPage: true
    }
  },

  created() {
    document.addEventListener('visibilitychange', this._visibilityChange, false);
    window.addEventListener("pageshow", this.pageShow, false);
  },

  beforeDestroy() {
    document.removeEventListener('visibilitychange', this._visibilityChange, false);
    window.removeEventListener("pageshow", this.pageShow);
  },

  methods: {
    // 切换应用或者主界面(按需保留)
    _visibilityChange: (function () {
      let hidden;
      if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
        hidden = "hidden";
      } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
      }
      // 先判断浏览器是否存在hidden/webkitHidden属性, 通过document.hidden属性,可判断页面是否可见。
      // 如果不可见，则document.hidden为true. 如果可见,则为false。
      // 所以是否显示刚好为hidden取反
      return function () {
        this.isShowPage = !document[hidden]
      }
    })(),
    pageShow() {
      this.isShowPage = true
    }
  }
}
</script>

3.使用

import visibilitychange from 'xxxx'
export default {
  mixins: [visibilitychange],
  watch: {
    isShowPage(val) {
      val && this.init();
    },
  },
}