Question

我对javascript和历史API相当陌生。

我正在发出AJAX GET请求以加载网站的下一页或上一页。

function ajax_get_update(url)
    {
    $.ajax({
        async: true,
        type: "GET",
        url: url,
        cache: true,
        success: function(result){
              sessionStorage.setItem("result", result);
              update_content(result);
            }
    });
    history.pushState(url, url, url)
}

AJAX部分和更改页面内容可以很好地工作。如您所见，我正在使用history.pushState(url, url, url)将下一页添加到历史记录中，以便可以使用“后退”按钮返回到该页面。

url看起来像这样http://127.0.0.1:8000/?page=2

问题是，如果我先从page3继续page2，然后再回到page3，依此类推，那么历史记录将包含所有这些过渡，并且当我单击后退按钮我会在page2和page3之间来回切换几次，直到最终到达page1。我想要的是page3 -> page2 -> page1，依此类推。

您将如何解决这个问题？

Answer 1

这未经测试，但可以满足您的需求。这里的想法是仅为新添加的网址更新window.history。

对于每个成功的请求，我们都会检查当前的URL是否在myState中。如果没有，我们可以假设一个新页面并更新历史记录，并将URL放入我们的专用缓存myState。

这将使您的网址保持秩序，并防止重复的历史记录条目。

请注意，此代码正在使用ES2015。您可以在网上搜索polyfills：）

// it is probably not a good idea to keep your own history
let myState = [];

function ajax_get_update(url) {
  $.ajax({
    async: true,
    type: "GET",
    url: url,
    cache: true,
    success: function(result) {
      sessionStorage.setItem("result", result);
      update_content(result);
      update_history(url);
    }
  });
}

function update_history(url) {
  // window.history is only updated when the current url is not
  // saved in our private history
  if (!myState.includes(url)) {
    history.pushState(url, url, url);
    myState.push(url);
  }
}

使用AJAX时history.pushState出现问题

1 个答案: