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

我如何使用可能对当前页面产生一些影响的JavaScript操作,但也会更改浏览器中的URL,以便在用户点击重新加载或书签时使用新URL？

如果后退按钮会重新加载原始URL也会很好.

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

1> Matthew Crum..：

---

如果你想让它在不支持的浏览器工作history.pushState和history.popState呢,"老字号"的方法是设置片段标识符,这将不会导致页面重新加载.

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

如果您正在使用jQuery,那么将使用一个hashchange插件,该插件将使用浏览器支持的任何方法.我确信其他库也有插件.

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

---

现在有一项建议让搜索引擎看到哈希:http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

---

而不是使用`setInterval`来检查`document.location.hash`,可以使用`hashchange`事件,因为它更加被采用.[在此处查看哪些浏览器支持每个标准](http://caniuse.com/#search=hash|pushstate).我目前的方法是在支持它的浏览器上使用push/popState.在其他我设置哈希,只在支持浏览器中观看`hashchange`.这使IE <= 7没有历史记录支持,但有用永久链接.但谁关心IE <= 7历史？

---

@Drew,据我所知,搜索引擎无法将页面的一部分视为单独的结果.

---

搜索引擎不会忽略这些内部链接(哈希)吗？在我的场景中,我希望蜘蛛能够接收这些链接.

---

@gabeDel是的,虽然我认为Google Analytics不会记录哈希,但它会有相同的网址.更好的方法是使用新页面的"真实"URL手动调用`_trackPageview`.

2> clu3..：

---

使用HTML 5,使用该history.pushState功能.举个例子:

和一个href:

Click to change url to bar.html

---

如果要在不向后退按钮列表中添加条目的情况下更改URL,请history.replaceState改用.

---

示例代码是从https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history剪切并粘贴的.在这种情况下,实际上很难解释foo和bar的含义.

---

很棒的提示!适用于chrome,但不适用于FF":/

---

@Paul:是的,上面的文章提供了这个信息.

---

foo和bar并不意味着什么,它是一个任意定义的状态对象,你可以稍后再回来.

---

发布此评论时,它适用于firefox chrome和safari.虽然在ipad或iphone上的移动野生动物园没有运气:(

3> moonshadow..：

---

window.location.href包含当前URL.你可以从它读取,你可以附加它,你可以替换它,这可能会导致页面重新加载.

如果,听起来像,你想在URL中记录javascript状态,以便它可以被加入书签,而不重新加载页面,在#之后将它附加到当前URL并且有onload事件触发的一段javascript解析当前用于查看其是否包含已保存状态的URL.

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

---

在URL中记录javascript状态正是我正在尝试做的事情

4> Paul Dixon..：

---

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

也许如果你解释为什么要这样做,人们可能会建议替代方法......

[编辑于2011年:自从我在2008年撰写此答案以来,有关HTML5技术的更多信息已经曝光,只要它来自同一个来源,就可以修改URL]

---

如果非重新加载更改仅限于路径,查询字符串和片段(即不是权限(域等)),那么问题就不那么严重了.

---

http://www.youtube.com/user/SilkyDKwan#p/u/2/gTfqaGYVfMg是一个可能的例子,尝试切换视频:)

---

你用Facebook吗？Facebook使用`history.pushState()`更改URL _without_ reloading.

5> Jethro Larso..：

---

浏览器安全设置可防止用户直接修改显示的URL.您可以想象可能导致的网络钓鱼漏洞.

只有在不更改页面的情况下更改URL的可靠方法是使用内部链接或散列.例如:http://site.com/page.html成为http://site.com/page.html#item1.这种技术通常用于hijax(AJAX +保存历史).

执行此操作时,我通常只使用带有散列的操作的链接作为href,然后使用jquery添加单击事件,使用请求的散列来确定和委派操作.

我希望这会让你走上正确的道路.

6> Ilia Rostovt..：

---

jQuery有一个很棒的插件,用于更改浏览器的URL,称为jQuery-pusher.

JavaScript pushState和jQuery可以一起使用,例如:

history.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;
});

仅使用 history.pushState()更改引用者的JavaScript,在更改状态后创建的XMLHttpRequest对象的HTTP头中使用.

例:

window.history.pushState("object", "Your New Title", "/new-url");

pushState()方法:

pushState()采用三个参数:状态对象,标题(当前被忽略)和(可选)URL.让我们更详细地研究这三个参数中的每一个:

state对象 - state对象是一个JavaScript对象,它与创建的新历史记录条目相关联pushState().每当用户导航到新状态时,都会触发popstate事件,并且事件的state属性包含历史记录条目的状态对象的副本.

状态对象可以是任何可以序列化的对象.因为Firefox将状态对象保存到用户的磁盘,因此可以在用户重新启动浏览器后恢复它们,因此我们在状态对象的序列化表示上强加了640k字符的大小限制.如果传递序列化表示形式大于此值的状态对象pushState(),则该方法将引发异常.如果您需要更多空间,建议您使用sessionStorage和/或localStorage.

title - Firefox目前忽略了这个参数,虽然它可能在将来使用它.在此处传递空字符串应该可以安全地防止将来对方法进行更改.或者,您可以为您要移动的州通过一个简短的标题.

URL - 此历史记录条目的URL由此参数指定.请注意,浏览器在调用后不会尝试加载此URL pushState(),但可能会稍后尝试加载URL,例如在用户重新启动浏览器之后.新URL不一定是绝对的; 如果是相对的,则相对于当前URL进行解析.新URL必须与当前URL的源相同; 否则,pushState()将抛出异常.此参数是可选的; 如果未指定,则将其设置为文档的当前URL.