Question

我正在尝试使用History API来允许我在动态加载内容时使用后退和前进按钮。这是我正在使用的代码，以及我正在使用的状态对象的一个示例。

我如何使用状态对象和pushstate()

  var stateObj = {Content : homeSection.innerHTML, "Product" : detail.Name, Title : title.innerHTML, Section:"dynamicArticle"};
  window.history.pushState(stateObj, "", detailName);

  window.addEventListener('popstate', function(event) {
    updateContent(event.state);
  });

使用的功能：

function updateContent(stateObject) {
  if (stateObject){
    homeSection = document.getElementById(stateObject.Section);
    homeSection.innerHTML = stateObject.Content;
    title.innerHTML = stateObject.Title;

    var items = document.querySelectorAll(".homeItem");
    if(items){
      for(i=0; i<items.length; i++){
        items[i].addEventListener("click", selectedProduct);
      }
    }

    checkoutButton = document.getElementById('checkoutButton');
    if(checkoutButton){
      checkoutButton.addEventListener('click', function(){
          displayCheckout();
        });
    }

    basketButton = document.getElementById("basketButton");
    quantityInput = document.getElementById("productQuantity");
    if(basketButton){
      basketButton.addEventListener('click', clicked);
      basketButton.addEventListener('click', updateBasketNumber);
      quantityInput.value = "1";
    }

    searchSort = document.getElementById("sort");
    if(searchSort){
      var items = document.querySelectorAll(".searchResult");
      for(i=0; i<items.length; i++){
        items[i].addEventListener("click", selectedProduct);
      }

      searchSort.addEventListener("change", function(){
        sort = searchSort.value;
        searchItem(e, sort);
      });
    }
  }
  else{
    return;
  }
}

我正在努力的是，如果我使用pushState()导航到其中一个页面，并尝试重新加载页面，就像您预期的那样找不到页面。

我在问是否有办法允许重新加载或有人导航到网址而不会出错，并提供正确的内容

Answer 1

就像@ jon-koops在评论中指出的那样，您需要配置服务器以将请求重定向到您链接所有链接的同一页面。

如果您使用的是apache 2.2.16+，它就会变得如此简单：

FallbackResource /index.html

这会将所有网址重写为index.html页面的单个入口点。

其他解决方案取决于您运行的服务器。

如何在实现History API时重新加载页面

1 个答案: