JS 返回上一頁並刷新，但不用從新加載整個頁面（ajax實現）

需求

有三個頁面A、B、C，點擊A=>B，點擊B=>C，在C中添加內容，點擊肯定返回到B，此時B頁面需從新加載新的內容。再次點擊B的返回按鈕，但願返回到A而不是C。

===== 2017/5/10 更新 ======

IOS 瀏覽器的詭異表現：history.go(-1)返回上一頁後，頁面內容並不會刷新。在C頁面添加的內容，返回到B時並無更新新的內容，必須手動刷新。

通過debug，發如今ios瀏覽器中，返回上一頁後，頁面的 JS 代碼並未執行。咱們猜想多是緩存引發的，因而使用 meta 禁止了緩存，但仍然沒有效果。因而進一步猜想多是瀏覽器內部機制致使——ios爲了提高瀏覽網頁的效率，可能給已瀏覽過的網頁添加一個相似快照的東西，當點擊返回按鈕後，直接調用快照展現給用戶，省去了執行JS這一步驟（純靜態文件依然被緩存）。

因而想到一個hack方法：

//C頁面
sessionStorage.setItem('isHistory', 'true');

// B頁面
if(navigator.userAgent.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ )) {
        var timer = setInterval(function(){
            if(sessionStorage.getItem('isHistory') == 'true') {
                sessionStorage.setItem('isHistory', 'false');
                timer = null;
                location.reload();
            }
        },30);
    }

===== end =====

分析需求

顯然，此需求有兩個功能：

• 頁面中的返回上一頁功能
• C中添加內容，返回B後刷新頁面，同時保證B頁面返回功能的正常使用

解決方案

針對第一個問題，咱們很容易想到history.back()或者history.go(-1)

難點在第二個問題，最開始我是這樣解決的：loacation.href = document.referrer，此時，B頁面內容正確顯示，但點擊返回按鈕卻到了C。

分析緣由，原來是loacation.href至關於從新加載了一次B頁面，那麼當前B頁面的上一頁天然就是C了。

有沒有辦法使得B頁面不從新加載，但更新內容呢？

使用Ajax！！！瀏覽器加載頁面後，會緩存HTML，每次加載頁面都會執行一遍JS

一、C 頁面點擊肯定後使用history.go(-1)，返回到B頁面

二、在 B 頁面經過$.ajax()獲取內容

var xhr = $.ajax({
  type: 'GET',
  url: '/api/xxx/xx',
  timeout: 5000,
  dataType: 'json',
  beforeSend: function(XHR){
    // todo
  },
  success: function(json){
    //
  },
  error: function(){},
  complete: function(xhr,status){}
})

三、重點，使用自執行函數渲染頁面

<script>
    function B(){};
    B.prototype.getData(){
      var xhr = $.ajax({...})
    };
    B.prototype.renderPage(){
      this.getDate();
      // render...
    };
    !function(window){
      var b = new B();
      b.renderPage();
    }(window)
</script>

這下應該成了吧。NO! C點擊肯定後返回到B，B內容依然沒有更新。。。

這是爲何呢？

百度搜索無果，情急之下只有求救大神

大神說，多是GET請求發出後，因爲URL沒有變化，瀏覽器可能會從緩存中讀取數據而致使內容更新失敗。

• 使用POST請求，強制從服務器獲取數據
• 仍然使用GET，改變當前頁面的url，方法是在url末尾添加一段隨機字符串

兩種方法都能實現需求，這裏再說說方法二：

var xhr = $.ajax({
  type: 'GET',
  url: '/api/xxx/xx',
  timeout: 5000,
  dataType: 'json',
  data: {flag: new Date().getTime().toString(36)}, // 在GET方法內添加一個任意key，隨機字符串改變
  beforeSend: function(XHR){
    // todo
  },
  success: function(json){
    //
  },
  error: function(){},
  complete: function(xhr,status){}
})