Question

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

但是当我使用后退按钮时，URL在浏览器地址字段中更新正确，但页面永远不会被加载。如果我关注地址字段并按Enter键，则会加载。

这是位于mypage.html标题中的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，并使用"content-right"加载div mypageabout.html

如果我点击菜单，例如下载，它会加载带有"content-right"

的div mypagedownload.html

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

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

网址显然在历史记录中，但不会加载。这里可能有什么问题的任何线索？

//谢谢

编辑 - 解决方案

感谢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

在仅在其哈希值上有所不同的页面之间导航时，这是正常行为。您有两种选择：

使用hashchange事件或其仿真来检测用户何时通过向后或向前导航更改哈希值并相应地更新页面
使用HTML5 history API。

Answer 2

您可以尝试使用hashchange

$(function(){
    $(window).hashchange(function(){
       // some event
    })
})

Answer 3

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

此外，我的文章还解释了如何在链接中传递参数以使javascript做特殊事情

以下是文章http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

的链接

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

Javascript：历史记录未加载页面

3 个答案: