如果你想让它在不支持历史记录的浏览器中工作。pushState和history。popState，“旧的”方法是设置片段标识符，这不会导致页面重新加载。

基本思想是将window.location.hash属性设置为一个包含所需状态信息的值，然后使用窗口。onhashchange事件，或者对于不支持onhashchange的旧浏览器(IE < 8, Firefox < 3.6)，定期检查哈希是否已经改变(例如使用setInterval)并更新页面。您还需要检查页面加载时的哈希值，以设置初始内容。

如果你使用的是jQuery，有一个hashchange插件可以使用浏览器支持的任何方法。我相信也有其他库的插件。

需要注意的一件事是与页面上的id发生碰撞，因为浏览器将滚动到具有匹配id的任何元素。

jQuery有一个很棒的插件，可以改变浏览器的URL，叫做jQuery-pusher。

JavaScript pushState和jQuery可以一起使用，比如:

历史。pushState(null, null， $(this).attr('href'));

例子:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

只使用JavaScript history.pushState()，它会更改引用器，在更改状态后创建的XMLHttpRequest对象的HTTP报头中使用它。

例子:

window.history。pushState("object"， "Your New Title"， "/ New -url");

pushState()方法:

pushState()接受三个参数:一个状态对象、一个标题(当前被忽略)和一个URL(可选)。让我们更详细地分析这三个参数:

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage. title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving. URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

在HTML 5中，使用历史记录。pushState函数。举个例子:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

和href:

<a href="#" id='click'>Click to change url to bar.html</a>

如果您希望在不向后退按钮列表添加条目的情况下更改URL，请使用历史记录。replaceState代替。

我成功地做到了:

location.hash="myValue";

它只是将#myValue添加到当前URL。如果需要在page Load上触发事件，可以使用相同的位置。哈希来检查相关的值。只要记住从location返回的值中删除#即可。散列。

var articleId = window.location.hash.replace("#","");

我强烈怀疑这是不可能的，因为如果是的话，这将是一个令人难以置信的安全问题。例如，我可以制作一个看起来像银行登录页面的页面，并使地址栏中的URL看起来像真正的银行!

也许如果你解释一下为什么你想这样做，人们可能会建议其他的方法……

[2011年编辑:自从我在2008年写了这个答案以来，更多关于HTML5技术的信息浮出了出来，该技术允许修改URL，只要它来自同一个来源]

我给出了一个更简单的答案，

window.history.pushState(null, null, "/abc")

这将在浏览器URL的域名后面添加/abc。只需复制这段代码并将其粘贴到浏览器控制台，就可以看到URL更改为“https://stackoverflow.com/abc”