Javascript 位置。哈希在Chrome中不更新

我正在尝试将页面的状态存储在哈希中。 这在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中是否存在阻止我更新哈希的怪癖？是否有更好的方法来保存页面状态？只有后退按钮需要保存。

我建议您使用，它可以为您管理哈希

$.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);
});

---

虽然烧烤很不错，但它并没有完全解决我的问题。要使其在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);

---

这并不能保证没有bug，我对我为Safari所做的黑客行为感到不满。我只是想在我忘记之前发布这篇文章。

如果您的软件需要在具有旧版支持的地方运行，请小心@user257493:这实际上适用于您在答案中链接到的HTML5

history.pushState（）

。jQuery BBQ插件与IE 6+、FF 2+、Safari 3+、Chrome 4+和Opera 9.6+配合使用，因此该插件没有任何遗留问题。在这种情况下，有一个插件可以做到这一点，真的很酷。pushState这个词对我来说意味着它使用了HTML5中的原生功能+1表示很棒的插件。jQuery BBQ插件似乎也不适用于Chrome，不幸的是，至少是我使用的版本（10.0.642.2）。@Ted Ballou:我刚刚在Chrome 10.0.648.0中试用过，效果很好。在浏览器中试试，看看是否有效（单击鸡肉/烤肉串/等链接）。如果是这样的话，你的页面上就有点不对劲了。