Javascript:历史记录未加载页面

Javascript: history not loading page

本文关键字：加载 记录 历史 Javascript      更新时间：2023-09-26

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

但是当我使用后退按钮时，浏览器地址字段中的 URL 更新正确，但页面永远不会加载。如果我聚焦地址字段并按回车键，则会加载。

这是位于 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并加载带有div id "content-right" mypageabout.html

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

在这两种情况下，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>

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

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

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

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

这是在

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

  1. 使用 hashchange 事件或其模拟来检测用户何时通过向后或向前导航来更改哈希，并相应地更新页面
  2. 使用 HTML5 历史记录 API。

你可以尝试使用hashchange

$(function(){
    $(window).hashchange(function(){
       // some event
    })
})
相关文章：