javascript - AJAX 内容和浏览器导航按钮

Question

您好，有以下 jQuery 事件:

listItems.on('click', function(ev) {
  ev.preventDefault();
  reload = true;
  var url = jQuery(this).attr('data-url');
  history.pushState({}, '', url);
  ...
}

它通过 AJAX 加载动态内容并推送历史状态以修改浏览器中的 URL 从 www.domain.com 到 www.domain.com/page-x。我通过 AJAX 加载内容的唯一原因是我需要动画页面转换。如果您转到 www.domain.com/page-x，您将获得普通的 HTML 页面。

如果在单击 listItem 后用户单击其浏览器上的后退按钮，则会出现问题。网址从 www.domain.com/page-x 变回 www.domain.com，但页面没有重新加载。这就是我添加此事件的原因:

window.onpopstate = function() {
  if (reload == true) {
    reload = false;
    location.reload();
  }
}

如果当前页面是通过 AJAX 加载的，它会在 url 更改后重新加载页面。它工作正常，但现在我遇到了其他问题:

1. 用户在首页点击列表项；
2. 浏览器 URL 发生变化，内容通过 AJAX 和动画加载；
3. 用户点击 BACK 浏览器按钮；
4. 浏览器 URL 更改为上一个，页面重新加载；
5. 用户单击 FORWARD 浏览器按钮，URL 更改但没有任何反应；

任何想法/解决方案将不胜感激。

Answer 1

而不是使用 reload=true你应该依靠event.state这样当popstate发生这种情况时，您会得到您为该 URL 记录的内容的快照。

Manipulating the browser history (MDN)

例如:

listItems.on('click', function(ev) {
  ev.preventDefault();
  var url = jQuery(this).attr('data-url');
  history.pushState({ action: 'list-item-focused' }, '', url);
  ...
}

然后:

window.onpopstate = function(e) {
  /// this state object will have the action attribute 'list-item-focused'
  /// when the user navigates forward to the list item. Meaning you can
  /// do what you will at this point.
  console.log(e.state.action);
}

您可能应该避免在用户返回时重新加载整个页面，而是将您的内容动画化回原来的位置，这样您就不会破坏页面。然后，您可以通过检查 event.state.action 来区分登录页面和列表页面。并相应地对您的回答进行编码。

window.onpopstate = function(e) {
  if ( e.state.action == 'list-item-focused') {
    /// a list item is focused by the history item
  }
  else {
    /// a list item isn't focused, so therefore landing page
    /// obviously this only remains true whilst you don't
    /// make further pushed states. If you do, you will have to
    /// extend your popstate to take those new actions into account.
  }
}

我相信你知道这一点，但是 pushState不完全跨浏览器，因此您还应该预料如果不支持这些方法，用户可能会遇到什么情况。

进一步增强

此外，由于您使用的是 jQuery，因此您可以很容易地在状态对象中存储更多有用的信息，这可以帮助您增强对 popstate 的 react 。 :

history.pushState({
  action: 'list-item-focused',
  listindex: jQuery(this).index()
});

您必须记住，您存储的任何数据都是序列化的，这意味着它很可能会转换为某种形式的非交互式字符串或二进制数据。这意味着您不能存储对元素或其他“事件”实例的引用；因此我存储的是列表项索引。

有了上面的内容，你现在知道发生了什么 Action 以及在什么列表项上，你可以在另一端使用以下方法检索:

listItems.eq(event.state.listindex)

onload 做什么？

MDN 有关于你应该做什么的说法 onload .

Reading the current state

When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts her browser. When your page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

简单地说，他们只是建议您应该注意当前的 history.state当页面加载时，并根据您的 state.action 采取相应行动描述。这样您就可以支持在页面生命周期内触发的两个事件，即 popstate以及当用户直接跳转到导致页面加载的历史记录状态时。

因此，考虑到上述情况，最好的结构可能是这样的:

window.onpopstate = function(e) {
  reactToState(e.state);
}

window.onload = function(){
  history.state && reactToState(history.state);
}

var reactToState = function(state){
  if ( state.action == 'list-item-focused') {
    /// a list item is focused by the history item
  }
  else {
    /// a list item isn't focused, so therefore landing page
    /// obviously this only remains true whilst you don't
    /// make further pushed states. If you do, you will have to
    /// extend your popstate to take those new actions into account.
  }
}

为了简单起见，我使用了内联事件监听器，因为您的示例也是如此，但是建议使用 addEventListener和 attachEvent (仅限 IE)方法...或者更好，因为您使用的是 jQuery。

jQuery(window)
  .on('popstate', function(e) {
    reactToState(e.originalEvent.state);
  }
  .on('load', function(){
    history.state && reactToState(history.state);
  }
;

切换状态

显然，为了在两种状态之间移动，您需要知道这两种状态是什么；这意味着有一些方法可以记录你当前的状态——这样你就可以与新状态进行比较并采取相应的行动。由于您只有两种状态，因此这可能不是必须的，但我敦促您始终考虑比目前更复杂的可能性。

我不知道你的代码布局，所以很难推荐你应该在哪里放置变量和其他类似的项目。但是，无论您如何存储信息，都不会改变这样一个事实:如果您这样做，它会让您的生活和代码更轻松:

var reactToState = function(state){
  var currentState = reactToState.currentState || {};
  if ( !currentState.action ) { currentState.action = 'start'; }
  if ( state.action == 'list-item-focused') {
    if ( currentState.action == 'start' ) {
      /// here we know we are shifting from the start page to list-item
    }
  }
  else {
    if ( currentState.action == 'list-item-focused' ) {
      /// here we know we are shifting from the list-item to the start
    }
  }
  /// as the state will be global for your application there is no harm
  /// in storing the current state on this function as a "static" attribute.
  reactToState.currentState = state;
}

更好的是，如果您不反对 switch 语句，您可以使上面的代码更具可读性:

var reactToState = function(state){

  /// current state with fallback for initial state
  var currentState = reactToState.currentState || {action: 'start'};

  /// current to new with fallback for empty action i.e. initial state
  var a = (currentState.action||'start');
  var b = (state.action||'start');

  switch ( a + ' >> ' + b ) {
    case 'start >> list-item-focused':
      /// animate and update here
    break;
    case 'list-item-focused >> start':
      /// animate and update here
    break;
  }

  /// remember to store the current state again
  reactToState.currentState = state;
}