带有history.pushState和popstate的Ajax - 当popstate state属性为null时，我该怎么办？

6 回答

• -1

  这是一个较旧的问题，但使用本机javascript解决此问题的答案要简单得多 .

  对于初始状态，您不应该使用 history.pushState 而是使用 history.replaceState .

  两种方法的所有参数都相同，唯一的区别是 pushState 创建了一条新的历史记录，因此是您的问题的根源 . replaceState 仅替换该历史记录的状态，并将按预期运行，即返回初始起始页 .

  回复于 2024-04-24T05:43:55+08:00
• 1

  我遇到了与原始问题相同的问题 . 这条线

  var initialPop = !popped && location.href == initialURL;
  

  应改为

  var initialPop = !popped;
  

  这足以捕捉最初的流行音乐 . 然后您不需要将原始页面添加到 pushState . 即删除以下内容：

  var home = 'index.html';
  history.pushState({page:home}, null, home);
  

  最终代码基于AJAX选项卡（并使用Mootools）：

  if ( this.supports_history_api() ) {
      var popped = ('state' in window.history && window.history.state !== null)
      ,   changeTabBack = false;
  
      window.addEvent('myShowTabEvent', function ( url ) {
         if ( url && !changingTabBack )
             setLocation(url);
         else
             changingTabBack = false;
         //Make sure you do not add to the pushState after clicking the back button
      });
  
     window.addEventListener("popstate", function(e) {
         var initialPop = !popped;
         popped = true;
         if ( initialPop )
             return;
  
         var tabLink = $$('a[href="' + location.pathname + '"][data-toggle*=tab]')[0];
         if ( tabLink ) {
             changingTabBack = true;
             tabLink.tab('show');
         }
     });
  }
  

  回复于 2024-04-24T05:43:55+08:00
• 6

  我仍然认为浏览器很乐意退回到正常请求创建的条目 . 也许当您使用pushState插入其他条目时，历史记录将以正常方式停止运行 . 但我发现了一种让我的代码更好的方法 . 您不能始终依赖包含要返回的URL的state属性 . 但是，回溯历史会改变地址栏中的URL，正如您所期望的那样，因此基于window.location加载内容可能更可靠 . 在这之后great example我改变了我的popstate处理程序，因此它根据地址栏中的URL加载内容，而不是在state属性中查找URL .

  您需要注意的一件事是，当您最初点击某个页面时，某些浏览器（如Chrome）会触发一个popstate事件 . 当发生这种情况时，你会不必要地进行内容 . 所以我从优秀的pjax添加了一些代码来忽略那个初始的pop .

  $(document).ready(function(){
  
      // Used to detect initial (useless) popstate.
      // If history.state exists, pushState() has created the current entry so we can
      // assume browser isn't going to fire initial popstate
      var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;
  
      var content = $('#content');
  
      var ajaxLoadPage = function (url) {
  
          console.log('Loading ' + url + ' fragment');
          content.load(url + '?fragment=true');
  
      }
  
      // Handle click event of all links with href not starting with http, https or #
      $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){
  
          e.preventDefault();
          var href = $(this).attr('href');
          ajaxLoadPage(href);
          history.pushState({page:href}, null, href);
  
      });
  
      $(window).bind('popstate', function(event){
  
          // Ignore inital popstate that some browsers fire on page load
          var initialPop = !popped && location.href == initialURL;
          popped = true;
          if (initialPop) return;
  
          console.log('Popstate');
  
          // By the time popstate has fired, location.pathname has been changed
          ajaxLoadPage(location.pathname);
  
      });
  
  });
  

  您可以对此JS进行的一项改进只是在浏览器支持历史记录API时附加click事件处理程序 .

  回复于 2024-04-24T05:43:55+08:00
• 1

  我实际上发现自己今天有类似的需求，并发现你提供的代码非常有用 . 我遇到了你所遇到的同样问题，我相信你所缺少的就是将你的索引文件或主页推送到历史记录中，就像你所有后续页面一样 .

  这是我为解决这个问题所做的一个例子（不确定它是否是正确答案，但它很简单且有效！）：

  var home = 'index.html';
  history.pushState({page:home}, null, home);
  

  希望这可以帮助！

  回复于 2024-04-24T05:43:55+08:00
• 12

  我意识到这是一个老问题，但在尝试轻松管理状态时像这样，采取以下方法可能更好：

  $(window).on('popstate',function(e){
      var state = e.originalEvent.state;
      if(state != null){
          if(state.hasOwnProperty('window')){
              //callback on window
              window[state.window].call(window,state);
          }
      }
  });
  

  这样，您可以在添加到历史记录时在状态对象上指定可选的回调函数，然后在触发 popstate 时，将使用状态对象作为参数调用此函数 .

  function pushState(title,url,callback)
  {
      var state = {
          Url : url,
          Title : title,
      };
      if(window[callback] && typeof window[callback] === 'function')
      {
          state.callback = callback;
      }
      history.pushState(state,state.Title,state.Url);
  }
  

  您可以轻松扩展它以满足您的需求 .

  回复于 2024-04-24T05:43:55+08:00
• 4

  And Finally 说：

  我以为浏览器很乐意回到正常请求创建的条目 .

  我找到了一个奇怪的浏览器行为的解释here . 解释是

  您应该在第一次加载网站时保存状态，之后每次更改状态时保存状态

  我测试了这个 - 它有效 .

  这意味着无需基于window.location加载您的内容 .

  我希望我不要误导 .

  回复于 2024-04-24T05:43:55+08:00