未返回多个后退按钮单击

Question

我正在使用history.pushState来保存SPA上的状态，但是当我按回按钮时它只会第一次执行，然后始终执行到同一页面。

在下面的链接中，我点击关于，然后点击网络，然后点击投资组合。

我现在正在投资组合，当我点击后退按钮时，它会回到 Web ，当我再次点击后退按钮时，它会停留在 Web < / strong>，它不会回到关于 - 应该吗？可以吗？

HTML：

<ul>
  <li><a href="#" onclick="loadPage('about'); return false;">About</a></li>                             
  <li><a href="#" onclick="loadPage('web'); return false;">Web</a></li>
  <li><a href="#" onclick="loadPage('portfolio'); return false;">Portfolio</a></li> 
</ul>

当用户点击其中一个链接时，内容加载并保存状态。

JS

function loadPage(page){

    // clear DIV and load new content
    var el = document.getElementById('main-block');
    el.innerHTML = '';
    $( "#main-block" ).load( page+'.html #main-block' );

    // change URL and save state
    history.pushState( {
      pageHistory: page 
    }, null, "/"+page );

  }

  // back button
  window.onpopstate = function (event) {  
    var content = "";
    if(event.state) {
      content = event.state.pageHistory;
    }
    loadPage(content);
  }

Answer 1

单击“上一步”时，无法将新状态添加到历史记录中：

function loadPage(page, back){

    // clear DIV and load new content
    var el = document.getElementById('main-block');
    el.innerHTML = '';
    $( "#main-block" ).load( page+'.html #main-block' );

    // change URL and save state
    if (true !== back) {
        history.pushState( {
          pageHistory: page
        }, null, "/"+page );
    }

  }

  // back button
  window.onpopstate = function (event) {
    var content = "";
    if(event.state) {
      content = event.state.pageHistory;
    }
    loadPage(content, true);
  }