我需要在 URL 中使用锚点 (#) 更新我的页面答案

【问题标题】：I need to update my page using Anchor (#) in URL我需要在 URL 中使用锚点 (#) 更新我的页面
【发布时间】：2013-06-03 11:45:08
【问题描述】：

index.php

<html>
 <head>
  <title>My Title</title>
  <script type="text/javascript">
   function getLink(data) {
    document.getElementById("box").innerHTML="This is "+data;
   }
  </script>
 </head>
 <body>
  <a href="#home" onClick="getLink('Home')">Home</a><br />
  <a href="#profile" onClick="getLink('Profile')">Profile</a><br />
  <a href="#message" onClick="getLink('Message')">Message</a><br />
  <a href="#setting" onClick="getLink('Setting')">Setting</a><br />
  <hr />
  <div id="box"></div>
 </body>
</html>

输出

Home
Profile
Message
Setting

这是家

正如代码所说，当我单击任何link 时，我的Div 内容会更新，但问题是当用户goes back 通过单击Back Button of Browser 时，我的Div 的内容不会改变。
我希望用户Goes Back、Goes Forward 或者他直接将路径放入address bar www.*****/index.php#profile 我的Div 的内容应该更改。

注意
我使用document.location.hash 来获取hash 的值，如下所示：

<head>
 <script>
  var hashValue=document.location.hash;
  alert(hashValue);
 </script>
</head>

但它仅在用户 goes back 然后 refresh the page 时有效

请帮助我如何实现这一点:(

【问题讨论】：

使用hashchange event。
您可以做的一件事是在 DOM 就绪时添加对 getLink() 函数的调用。在 DOM 准备就绪时，检查您的 URL 并检查最后一个 '#' 字符之后的字符串。如果此字符串不为空，请调用getLink(theString)

标签： javascript html ajax hashchange

【解决方案1】：

你需要使用hashchange事件：

function hash_changed() {
    var data = document.location.hash.substr(1);
    var box = document.getElementById("box");

    if (data) {
        // inner page
        box.innerHTML="This is " + data;
    }
    else {
        // homepage
        box.innerHTML = "";
    }
}

window.onhashchange = function () {
    hash_changed();
};

window.onload = function () {
    hash_changed();
};

此外，当您使用hashchange 事件时，还有无需为您的链接设置onclick：

<a href="#home">Home</a>
<a href="#profile">Profile</a>
<a href="#message">Message</a>
<a href="#setting">Setting</a>

当用户点击一个链接时，hash 会自动改变（带有链接的href 属性），和hashchange 事件被触发。

在此处查看DEMO。

第一次

当用户第一次使用哈希访问您的页面时：

http://fiddle.jshell.net/B8C8s/9/show/#message

我们必须显示想要的页面（这里是message），所以我们必须运行hash_changed()函数我们第一次在上面声明。为此，我们必须等待 DOM 就绪或window.onload。

【讨论】：

是的，它可以工作，但它可以在所有主要浏览器中工作，我的意思是只兼容 HTML4 的浏览器？？
@AbarChoudhary 是的，它适用于所有浏览器和 IE8 及更高版本。有趣的是，IE8是第一个引入hashchange事件;)的浏览器。
嗯，最后你给了我解决方案：* :D --

【解决方案2】：

检查 HTML5 历史 API。它允许您使用浏览器历史记录

HTML5 history api

【讨论】：

【解决方案3】：

$(window).on('hashchange', function() {
     alert(location.hash);
});

如果你不想使用 jQuery，或者 window.onhashchange 事件

【讨论】：

【解决方案4】：

如果您打算使用 AJAX，除非您的意图是教育性的，否则您真的想考虑使用 jQuery 而不是原始 javascript。 jQuery 现在只是 Web 的中流砥柱。

如果您必须使用这些哈希...

使用jQuery Special Events，并使用hashchange 事件：

<a href='#home'>Home</a>

脚本：

$(window).on('hashchange', function() {
    $('#box').html("This is "+event.fragment);
});

但是，对于您的场景...

您根本不需要使用那些 # 值，因为您无论如何都根据您提供的代码在函数参数中传递值，只需执行以下操作：

<a href="" onClick="getLink('Home');return false;">Home</a><br />

或者（最好，当您根据标签使用 AJAX 时）您可以使用 jQuery 及其使用 Event Listeners 的内置选择器点击事件：

<a href='javascript:void();' class='divLink' id='home'>Home</a><br/>

脚本就是这么简单：

$('.divLink').click(function(){
    $('#box').html("This is "+$(this).id());
}

【讨论】：

亲爱的，第一种方法会在我点击任何链接时打开同一个页面，第二种方法会将其视为一个 URL，因此不会有之前点击过哪个链接的历史记录
@AbarChoudhary - 更新了第一个答案。试试看。
有一个demo too 使用相同的方法。