从IOS的back问题中说起 (关于pageshow、pagehide、document.referrer)

IOS中，网页的前进后退操作(包括history.go()、history.back()等)是直接进入其离开时的快照，不会重新触发页面的load事件。此时js从上次离开时的状态继续往下执行。

解决方案

1.使用document.referrer代替history.back()进行返回

location.href = document.referrer;

document.referrer是一个字符串，内容为上一页面的URL

• 以下情况document.referrer会为空字符串""
  1. 跨域
  2. http与https之间跳转
  3. 使用location.reload()、location.href、location.replace()更新页面
  4. 从浏览器、书签等打开一个新页面
  5. a标签设置rel="noreferrer"
  6. iframe

浏览器支持情况

• 缺点
  1. 存在以上限制
  2. 本质上是一次跳转而非返回，如 a-b-c-d ，d页面通过window.location.href=document.referrer返回到c页面，对于c页面来说b不是他的上一级页面了、上一级页面变成了d;

2. 使用pageshow、pagehide事件

• onpageshow 事件在用户浏览网页时触发。
  类似于 onload 事件，但onload只在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件当页面从浏览器缓存中读取时不触发。
• onpagehide 事件在用户离开网页时触发。

第一次进入时，触发pageshow，此时isPageHide为false。离开页面时触发pagehide，isPageHide变为true。第二次进入时再次触发pageshow，此时isPageHide为true，成功触发页面刷新。

  $(function () {
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
      if (isPageHide) {
        window.location.reload();
      }
    });
    window.addEventListener('pagehide', function () {
      isPageHide = true;
    });
  })