Question

我用它来创建一个新状态：

//state 1
        history.pushState({ reload: true }, 'submodulo', '?submodulo=1');
//state2
        history.pushState({ reload: true }, 'submodulo', '?submodulo=2');
//state3
        history.pushState({ reload: true }, 'submodulo', '?submodulo=3');

我想在用户按下后退按钮时重新加载内容。

window.onpopstate = function(event) {
          if (event.state !== null &amp;&amp; event.state.reload) {

              location.reload(true);

            }               
    };

但是，这样，我将失去状态。这就像点击一个完整的新网址。它没有保持序列。是否有其他方式加载整个页面，但是采用ajax方式？

Answer 1

您需要运行ajax调用，而不是在popstate事件上重新加载页面。

window.onpopstate = function(event) {
   if (event.state !== null && event.state.reload) {
              $.ajax({
                url: 'load-content.php',
                success: function( response ) {
                     $('#main-content').replaceWith( response );      
                  }
              });
   }               
};

在目标PHP文件中，根据网址或给定参数加载内容，并在成功时将内容替换为生成的内容。

Ajax在History＆＃39; onpopsate＆＃39;上加载整个页面。

1 个答案: