我有一个在 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
如果我单击菜单，例如download，它将加载 div "content-right"idmypagedownload.html
在这两种情况下，window.location都会将页面设置为哈希版本，mypage.html#about并将mypage.html#download它们注册到历史记录中。
如果我按以下顺序单击菜单；license , about ,屏幕然后点击浏览器的返回按钮，地址栏将显示；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>