Location.Hash在Chrome中不更新

Question

我正试图在散列中存储页面的状态。 这在IE和FF，但在Chrome它似乎并没有做任何事情

$(document).ready(function() 
{ 
    window.onbeforeunload = savePageState; 
}); 

function savePageState() 
{ 
    var currentTab = _tabbing.getCurrentTab(); 

    var mapState = _mapAdapter.getMapState(); 
    window.location.hash = 
     'reload=' + currentTab + 
     '&mapType=' + mapState.MapType.getName() + 
     '&lat=' + mapState.Latitude + 
     '&long=' + mapState.Longitude + 
     '&zoom=' + mapState.ZoomLevel; 

    return; 
} 

有没有在Chrome浏览器怪癖，阻止我更新哈希？有没有更好的方式来保存页面状态？它只适用于需要保存的后退按钮。

Answer 1

虽然烧烤是不错的，但它并不能完全解决我的问题。为了在Chrome/Safari中工作，您需要在onbeforeunload事件之前更新散列。然而，部分需求使得这是唯一可以保存页面状态的实时。

我想出了一个解决方案，使用pushState和BBQ这两个其他答案。我以为我会发表任何其他人有我遇到的同样的问题。

function BackButtonState(saveStateCallback, pageLoadCallback) 
{ 
    var executePopStateCounter = null; 
    var myData = {}; 
    var browserCanPushState = history.pushState ? true : false; 

    window.onbeforeunload = saveStateCallback; 

    if (browserCanPushState) 
    { 
     //The version of safari this was tested on (5.0.3) uses an outdated version of 
     //Webkit that has a bug where popstate is not called on the first page load. 
     //This is a hacky work around until the problem is fixed. 
     var agt = navigator.userAgent.toLowerCase(); 
     if (agt.indexOf("safari") != -1) 
     { 
      executePopStateCounter = setTimeout(pageLoadCallback, 500); 
     }; 

     window.onpopstate = function(popEvent) 
     { 
      clearTimeout(executePopStateCounter); 
      if (popEvent.state != null) 
      { 
       myData = popEvent.state; 
      } 
      pageLoadCallback(); 
     } 
    } 
    else 
    { 
     $(document).ready(pageLoadCallback); 
    } 

    this.savePageState = function(state) 
    { 
     if (browserCanPushState) 
     { 
      history.pushState(state, 'BackButtonState'); 
     } 
     else 
     { 
      $.bbq.pushState(state); 
     } 
    } 

    this.getState = function(item) 
    { 
     if (browserCanPushState) 
     { 
      return myData[item]; 
     } 
     else 
     { 
      return $.bbq.getState(item); 
     } 
    } 

    this.deserializeSortList = function(sortArrays) 
    { 
     var sortList = []; 

     $.each(sortArrays, function(index, pair) 
     { 
      sortList.push([parseInt(pair[0]), parseInt(pair[1])]); 
     }); 

     return sortList; 
    } 
} 

要使用这个，你做这样的事情：

function saveState() 
{ 
    var myData = { bananas: 'are tasty' }; 
    _backButton.saveState(myData); 

} 

function pageSetup() 
{ 
    //Do normal $(document).ready() stuff here 
    var myOpinionOnFruit = _backButton.getState('bananas'); 
} 

var _backButton = new BackButtonState(saveState, pageSetup); 

这是不保证的广告是免费的错误，我不满意劈我有Safari浏览器做。我只是想在我忘记之前发布这篇文章。

Answer 2

我推荐你使用jQuery BBQ plugin，它为你管理散列。

$.bbq.pushState({ 
    reload: currentTab, 
    mapType: mapState.MapType.getName(), 
    lat: mapState.Latitude, 
    long: mapState.Longitude, 
    zoom: mapState.ZoomLevel 
}); 

BBQ句柄合并散列，所以它不会覆盖其他参数。例如，#fun=yes成为#fun=yes&reload=tab&...

接下来，您可以监听对哈希：

$(window).bind('hashchange', function(e) { 
    var params = e.getState(); 
    doStuff(params.lat, params.long); 
});