Question

浏览器和我的应用程序的“后退”按钮出现问题。 webapp使用ajax和标准请求。这一切都是这样发生的：

我向list.jsp页面发出GET请求 - 如果你查看我在下面提供的临时链接，它就是你在应用程序中看到的第一页。现在我们在第1页（整个页面已重新加载）
我发出Ajax请求（点击链接 - 即页码）到页面4。只重新加载了页面的部分 - 一切正常。现在我们在第4页
我发出Ajax请求（点击链接 - 即页码）到页面5。只重新加载了页面的部分 - 一切正常。现在我们在第5页
现在我按下浏览器“后退”按钮（退回历史记录） - 没有发生了。浏览器控制台不会显示任何更改。
此步骤我再次按下浏览器“后退”按钮。事实证明，这一步骤正确执行。 GET请求发生了。

发生了什么事？为什么浏览器不记得第3步中出现的变化？如何指示浏览器对{jjax请求所做的更改进行step back to history？

您可以temp link在线查看。试着去看看页面。粉红色正方形是当前页面指示符。

更新1：

此代码在加载器完成加载资源后初始化。

$(function() {

    $(window).on('hashchange', refreshByHash);

    refreshByHash();

    function refreshByHash() {              
        var hash = window.location.hash; 
        console.log("hash = " + hash.substring(1));

        /* $.ajax({

               url : 'paginator.action?page=' + hash, // action
               type : 'GET', //type of posting the data
                dataType : 'html',
                async: true,
                success : function(htmlData) {
                    $('#paginator').html(htmlData);
                },
                error : function(xhr, ajaxOptions, thrownError) {
                    alert('An error occurred! ' + thrownError);
                },

            }); */

       }

 });

Answer 1

当用户点击#idPage时（顺便说一句，改为使用类，现在你有多个具有相同ID和that's not good的元素），因为href属性为空，浏览器将加载{ {1}}（并将显示在页面顶部）。

当用户点击链接时，您应该防止默认行为，例如

标签（$('body').on('click', '#idPage', function(e) { // some code goes here e.preventDefault(); });）对后退/前进按钮有效。如果您追加主题标签并单击＆＃34;返回＆＃34;，浏览器将返回到应用主题标签之前的状态。

Answer 2

我建议你在url中放入一个hash参数，这样浏览器就可以正确处理历史记录，并监听hashchange事件。在大多数情况下，您可以直接将页面状态存储在那里，因此您不必实现自己的历史记录处理。我把一个小小的MCVE放在一起：

$(function() {

  // setup some pagination bar
  for (var i = 1; i < 11; i++) {
    $('#pages').append(
        $('<a/>').text(i).attr('href','#'+i)
    );
    $('#pages').append($('<span/>').text('.'));
  }

  // load contents of page i
  function _uiPage(i) {
      // imitate some XHR
      setTimeout(function() {
          $('#page-content').text('This is page ' + i);
      }, 200);
  }
  
  // load contents of current page based on hash
  function refreshByHash() {
      var hash = window.location.hash;
      _uiPage(hash ? +hash.substring(1) : 1);
  }
  
  // refresh on hash change
  $(window).on('hashchange', refreshByHash);
  // initial state on page load
  refreshByHash();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pages"></div>
<div id="page-content"></div>

注意：Chrome的后退按钮将返回活动的iframe，因此在您点击某些页面后，您可以按后退按钮来测试行为，而外框，StackOverflow本身不会更改。

另请查看thoe问题：How to manage browser “back” and “forward” buttons when creating a javascript widget

EDIT1

$(function() {
  $(window).on('hashchange', refreshByHash);
  refreshByHash();

  function refreshByHash() {              
    var hash = window.location.hash; 
    // ----- strip the hashmark here -----
    hash = hash ? hash.substring(1) : '';
    console.log("hash = " + hash);

    $.ajax({
      url : 'paginator.action?page=' + hash, // action
      type : 'GET', //type of posting the data
      dataType : 'html',
      async: true,
      success : function(htmlData) {
        $('#paginator').html(htmlData);
      },
      error : function(xhr, ajaxOptions, thrownError) {
        alert('An error occurred! ' + thrownError);
      },
    });
  }
});

如何向浏览器解释以记住Ajax请求？

2 个答案: