Question

我有一个使用JavaScript生成的页面。我想将$(window).scrollTop()值存储在哈希值（如#position=xxx）中，这样当刷新页面并再次生成项目时，用户可以继续从中断的位置滚动。

我正在尝试修改beforeunload上的哈希，这似乎不起作用。下面函数的第一部分尝试更改散列，第二部分负责在页面加载时修改scrollTop。第二部分工作正常，我只是坚持第一部分。

$(window).on('beforeunload',function(){
    window.location.hash = "position="+$(window).scrollTop();
}).on('load hashchange',function(){
    var scrollregex = /^position=(\d+)$/,
        hash = window.location.hash.substring(1);
    if (scrollregex.test(hash)) $(window).scrollTop(parseInt(hash.match(scrollregex)[1]));
});

是否存在不同的事件，或者在用户触发刷新时如何更改哈希？

Answer 1

我最终放弃了哈希的想法并采用基于sessionStorage的方法。我为会话/本地存储写了my own wrapper，我在下面的例子中使用了它。

$(window).on('beforeunload',function(){
    var scrltop = $(window).scrollTop();
    if (scrltop > 0) SStorage.set('position',scrltop);
    else SStorage.del('position');
}).on('load',function(){
    if (SStorage.has('position')){
        var pos = parseInt(SStorage.get('position'));
        if (!isNaN(pos) && $(window).scrollTop() === 0) $(window).scrollTop(pos);
    }
});

Answer 2

Chrome似乎不允许您更新onbeforeunload事件中的哈希值。我有一个类似的问题。我将代码移动到卸载事件，该事件有效但引入了其他问题。要解决它们，我必须强制重新加载，注意重新加载将无法在没有setTimeout的情况下工作。

$(window).on('unload', function(){ 
    /* Do hash change here */

    setTimeout(function () { window.location.reload(true); }, 0); 
});

在onbeforeunload上更改location.hash

2 个答案: