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

Returning to last seen position on an ajax result page

本文关键字：位置 ajax 结果 返回      更新时间：2023-09-26

对于我的项目，我希望能够点击后退按钮并返回到我上次所在的页面位置。首先，发生了什么？用户所在的搜索页面每次点击页面底部时都会加载 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 似乎没有启动。我有足够的经验来判断设置间隔、设置超时或回调是否会以某种方式帮助我。总的来说，这似乎是一个非常糟糕的主意。

:(

  1. 确保 ajax 搜索脚本在用户浏览页面时不会覆盖值，以防在每个页面上运行的搜索脚本提供某种唯一标识符以及最后一个位置值。 EX ( 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);
    }
相关文章：