Question

我正在使用AJAX内容。基本上，一堆产品在一个页面上，当您点击产品时，它目前转到产品而根本不需要重新加载页面。产品UPC作为哈希附加。问题是当用户点击后退按钮时，它不起作用。用户当前必须依赖面包屑返回。

我的解决方案是使用一个关于哈希更改功能的窗口，它可以工作，但显然会强制页面在前进时重新加载。有点失败了AJAX的目的。有没有更好的方法导航到页面上的最后一项如果用户通过抓取其哈希值而不是执行我目前在下面使用的内容而单击后退按钮？

$(window).on('hashchange', function() {
  var hash = window.location.hash;
  var fullURL = window.location.href = "http://www.test.com/product-categories/test.php" + hash;
  if (fullURL) {
      location.reload();
  } 
});

Answer 1

以下是使用History API执行此操作的方法

function loadProduct(productid, reload){
   $.ajax({
     ... 
     ...
     data: {productId : productid},
     success:function(){
       if(!reload) {
            History.pushState('productName', { productId : productid }, '#' + productId)
       }
     }
   })
}

 $(product).on('click', function(){
    loadProduct( productId , true )
 });
 $(window).on('popstate', function(){
   loadProduct( e.state.productId, false );
 });

这样，每次用户点击产品时，您都会存储产品ID。当他们回去的时候第四，它将获得存储的产品ID并将重新加载

如果使用AJAX内容检测到散列更改，则更好地重新加载页面？

1 个答案: