在不使用JavaScript加载新页面的情况下更改浏览器中的URL

Question

在不使用JavaScript加载新页面的情况下更改浏览器中的URL我怎么会有JavaScript操作可能会对当前页面产生某些影响，但也会更改浏览器中的URL，因此，如果用户点击、重新加载或标记书签，则使用新的URL？如果Back按钮重新加载原始URL也会很好。我试图在URL中记录JavaScript状态。

Answer 1

对于HTML 5，使用history.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>

还有一个人：

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

---

如果要更改URL而不向后退按钮列表添加条目，请使用history.replaceState相反。

Answer 2

如果您希望它在不支持的浏览器中工作history.pushState和history.popState然而，“旧”方法是设置片段标识符，这不会导致页面重新加载。

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

如果使用jQuery，则有一个哈希变换插件它将使用浏览器支持的任何方法。我相信其他库也有插件。

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

Answer 3

location.href包含当前URL。您可以从中读取，您可以附加到它，您可以替换它，这可能会导致页面重新加载。

如果您想在URL中记录javascript状态，这样就可以在不重新加载页面的情况下将其添加到当前URL的#后面，并让onload事件触发一段javascript，解析当前URL以查看它是否包含已保存的状态。

如果你用的话？而不是一个#，您将强制重新加载页面，但是由于您将在加载时解析保存的状态，这实际上并不是一个问题；这将使前进和后退按钮也能正常工作。