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

Question

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

我怎么会有JavaScript操作可能会对当前页面产生某些影响，但也会更改浏览器中的URL，因此，如果用户点击、重新加载或标记书签，则使用新的URL？

如果Back按钮重新加载原始URL也会很好。

我试图在URL中记录JavaScript状态。

Answer 1

对于HTML 5，使用history.pushState功能..例如：<script&nbsp;type="text/javascript">var&nbsp;stateObj&nbsp;=&nbsp;{&nbsp;foo:&nbsp;"bar"&nbsp;};function&nbsp;change_my_url(){ &nbsp;&nbsp;&nbsp;history.pushState(stateObj,&nbsp;"page&nbsp;2",&nbsp;"bar.html");}var&nbsp;link&nbsp;=&nbsp;document.getElementById('click');link.addEventListener('click',&nbsp; &nbsp;&nbsp;&nbsp;change_my_url,&nbsp;false);</script>还有一个人：<a&nbsp;href="#"&nbsp;id='click'>Click&nbsp;to&nbsp;change&nbsp;url&nbsp;to&nbsp;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以查看它是否包含已保存的状态。如果你用的话？而不是一个#，您将强制重新加载页面，但是由于您将在加载时解析保存的状态，这实际上并不是一个问题；这将使前进和后退按钮也能正常工作。