Javascript:历史记录未加载页面

Question

我有一个菜单，可以在 div 中加载新的 html 文件。加载是通过附加到菜单的 <a> 的单击事件完成的。标签。加载效果很好，我通过使用哈希标签构造新的 href 将新加载添加到历史记录中。

但是当我使用后退按钮时，浏览器地址字段中的 URL 会正确更新，但页面从未加载。如果我聚焦地址字段并按 Enter 键，它就会加载。

这是位于 mypage.html header 中的 JavaScript。

<script type="text/javascript">
  $(document).ready(function() {

    // replace menu link click
    $(".right-menu a").live('click', function(ev) {
      ev.preventDefault();
      ev.stopPropagation();
      window.location.href = $(this).attr('href');
      $("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
      return false;
    });

    // If page loads, load the content area according to the hash.
    var hrtag = window.location.hash.substring(1);
    if(hrtag=="")
      hrtag='about';
    $("#content-right").load('mypage'+hrtag+'.html');
    window.location.hash = hrtag;
  });
</script>

这是菜单

<ul class="right-menu">
  <li><a href="mypage.html#about">About</a></li>
  <li><a href="mypage.html#screens">Screens</a></li>
  <li><a href="mypage.html#license">License</a></li>
  <li><a href="mypage.html#download">Download</a></li>
  <li><a href="mypage.html#donate">Donate</a></li>
</ul>

如果我将页面加载为 mypage.html ，javascript 将附加哈希 #about并加载div id "content-right"与 mypageabout.html

如果我点击菜单，例如下载，它将加载div id "content-right"与 mypagedownload.html

在这两种情况下，window.location将被设置为页面的哈希版本，mypage.html#about和mypage.html#download将它们注册到历史记录中。

如果我按以下顺序单击菜单； 许可证，关于，屏幕，然后单击浏览器的后退按钮，将显示地址字段； mypage.html#about , mypage.html#license但它不会加载页面!？!

这些 URL 显然在历史记录中，但无法加载。有什么线索可以说明这里可能出了什么问题吗？

//谢谢

编辑 - 解决方案

感谢 Andres Gallo 的文章，我想出了这个解决方案:

<script type="text/javascript">
  $(document).ready(function() {

    // Make sure the page always load #about
    LoadIDWithURL('#content-right','myPageAbout.html');

    window.addEventListener('hashchange',function() {

      if (window.location.hash != "") {
        // We have a hash, use it!
        LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
      } else {
        // We do not have a hash, force page reload!
        window.history.go(0);
      }

    });

  });

  // Load the targetID with the URL loadURL.
  function LoadIDWithURL(targetID,loadURL) {
    $(targetID).load(loadURL);
  }
</script>

Answer 1

我就这个主题写了一篇非常详细的文章。它解释了如何准确地构建您想要做的事情。

此外，我的文章还解释了如何在链接中传递参数以使 javascript 执行特殊操作

这里是文章 http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/ 的链接

最好的方法是将您的功能附加到哈希更改而不是单击事件。这使得历史记录中的任何更改都可以利用您的 JavaScript 功能。