javascript - 返回 ajax 结果页面上上次看到的位置

Question

对于我的项目，我希望能够点击后退按钮并返回到我上次所在的页面位置。首先，发生了什么？用户所在的搜索页面每次点击页面底部都会加载 50 个结果。

发生了什么:我有一个搜索页面，首先显示 50 个结果，然后当用户到达页面底部时通过 ajax 调用加载接下来的 50 个结果。

问题:用户希望在返回浏览器时位于上次离开的页面上。

我正在尝试做的事情:

首先

$(window).on('beforeunload', function () {
    var lastScrollPosition = $(window).scrollTop() + $(window).height();
    document.cookie = "lastPageLoadCount=" + lastPageLoadCount + ";";
    document.cookie = "lastScrollPosition=" + lastScrollPosition + ";";
    //$(window).scrollTop(0);
});

当用户离开搜索页面时，我会保存他们在页面上的位置以及 ajax 被触发的次数的 cookie。我认为在进入下一页之前滚动到顶部是有意义的，但这似乎给了我一个不正确的滚动位置。

当用户点击“返回”返回搜索结果时，我想读取这些 cookie 并执行必要的操作来恢复页面。如果用户之前触发了 ajax 两次，那么我想在尝试向下滚动到位之前自动再次执行该操作。

var lastPageLoadCount = 0;

$(document).ready(function () {

    var prevLastPageLoadCount = getCookie("lastPageLoadCount");
    if (prevLastPageLoadCount != '') {

        // below is where the problem starts

        while (lastPageLoadCount < parseInt(prevLastPageLoadCount)) {
            // manually triggering the ajax call here
            loadMoreResults(); // increment lastPageLoadCount when ajax returns success

        }
        // then scroll down into position
        // ...

        // then delete this cookie
        document.cookie = "lastPageLoadCount=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }

这并不完全有效。似乎在页面准备好之前就遇到了循环，这没有任何意义。 while 循环可能被无休止地调用，而 ajax 似乎没有启动。我有足够的经验来判断 setinterval、settimeout 或回调是否会以某种方式帮助我。总的来说，这似乎是一个非常糟糕的主意。

:(

Answer 1

1. 确保 ajax 搜索脚本在用户浏览页面时不会覆盖值，以防每个页面上运行的搜索脚本给出某种唯一标识符以及最后一个位置值(value)。例如(setCookie({ id : my-unique-page-name , offset : 0, limit : 50 }))

2. 当用户点击“加载更多结果”时，跟踪位置并增加 LIMIT 和 OFFSET 值(如果您从 50 开始，那么您的 SQL 查询将类似于 SELECT * FROM blah WHERE blah LIMIT 0, 50 )下一个将是 SELECT * FROM blah WHERE blah LIMIT 50, 100等等。

3. 从你的代码中我看到 //increment lastPageLoadCount when ajax returns success这是没用的。只需从第 2 点开始跟踪即可。

4. 从你的代码中我看到 while (这是不需要的

5. 还考虑跟踪 DOM 位置偏移 $(document).on( 'scroll',因为卸载窗口事件不太可靠。

伪代码看起来像这样:

   defaultLimit = 50, defaultOffset = 0;

    on(beforeWindowUnload){
        setCookie({ DOMOffsetPosFromCoockie : ($(window).scrollTop() + $(window).height()) });
    }

    // when user click more results
    if (userClickMoreResults) {

        var offset = offsetFromCoockieNotSet ? defaultOffset : offsetFromCoockie;
        var limit = limitFromCoockieNotSet ? defaultLimit : limitFromCoockie;

        setCookie({
            id: myUniquePageName,
            // if your code is designed to load results not replacing the previous loaded content
            // ( ex.: you load all the results from 0 to a max viewed in a certain moment)
            // offset: offset + 50, otherwise offset is always 0
            offset: offset,
            limit: limit + 50
        });
    }    
    // when page load
    if (myUniquePageName == myUniquePageIDFromCoockie){    
        if (limitFromCoockieNotSet && offsetFromCoockieNotSet) {
            loadAjaxResults(defaultLimit, defaultOffset);
        } else {
            loadAjaxResults(limitFromCoockie, offsetFromCoockie);
        }
       setInterval(function(){
         $('html, body').animate({scrollTop: DOMOffsetPosFromCoockie}, 2000);
       },200);
    }