在浏览器中更改URL而不使用JavaScript加载新页面

本文翻译自：Change the URL in the browser without loading the new page using JavaScript

How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark the new URL is used?

我将如何执行一个JavaScript动作，该动作可能会对当前页面产生一些影响，但同时也会更改浏览器中的URL，因此，如果用户点击重新加载或添加书签，则会使用新的URL？

It would also be nice if the back button would reload the original URL.

如果“后退”按钮将重新加载原始URL，那也很好。

I am trying to record JavaScript state in the URL.

我正在尝试在URL中记录JavaScript状态。

#1楼

参考：https://stackoom.com/question/ZUw/在浏览器中更改URL而不使用JavaScript加载新页面

#2楼

I would strongly suspect this is not possible, because it would be an incredible security problem if it were.

我强烈怀疑这是不可能的，因为如果存在的话，那将是一个令人难以置信的安全问题。

For example, I could make a page which looked like a bank login page, and make the the URL in the address bar look just like the real bank !

例如，我可以制作一个看起来像银行登录页面的页面，并使地址栏中的URL看起来像真实的银行 ！

Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...

也许如果您解释了为什么要这样做，那么人们也许可以建议其他方法...

[Edit in 2011: Since I wrote this answer in 2008, more info has come to light regarding an HTML5 technique that allows the URL to be modified as long as it is from the same origin]

[2011年编辑：自从我在2008年撰写此答案以来，关于HTML5技术的更多信息就曝光了，只要该URL来自同一来源，就可以对其进行修改。]

#3楼

If you want it to work in browsers that don't support

history.pushState

and

history.popState

yet, the "old" way is to set the fragment identifier, which won't cause a page reload.

如果您希望它在不支持

history.pushState

和

history.popState

浏览器中运行，则“旧”方法是设置片段标识符，这不会导致页面重新加载。

The basic idea is to set the

window.location.hash

property to a value that contains whatever state information you need, then either use the window.onhashchange event , or for older browsers that don't support

onhashchange

(IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using

setInterval

for example) and update the page.

基本思想是将

window.location.hash

属性设置为包含所需状态信息的值，然后使用window.onhashchange事件 ，或者对于不支持

onhashchange

旧版浏览器（IE <8，Firefox < 3.6），定期检查哈希值是否已更改（例如，使用

setInterval

）并更新页面。

You will also need to check the hash value on page load to set up the initial content.

您还需要检查页面加载时的哈希值以设置初始内容。

If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports.

如果您使用的是jQuery，则有一个hashchange插件将使用浏览器支持的任何一种方法。

I'm sure there are plugins for other libraries as well.

我确定还有其他库的插件。

One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.

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

#4楼

Browser security settings prevent people from modifying the displayed url directly.

浏览器安全设置可防止人们直接修改显示的URL。

You could imagine the phishing vulnerabilities that would cause.

您可以想象会导致网络钓鱼的漏洞。

Only reliable way to change the url without changing pages is to use an internal link or hash.

更改url而不更改页面的唯一可靠方法是使用内部链接或哈希。

eg: http://site.com/page.html becomes http://site.com/page.html#item1 .

例如： http : //site.com/page.html变为http://site.com/page.html#item1 。

This technique is often used in hijax(AJAX + preserve history).

此技术通常用于hijax（AJAX +保存历史记录）中。

When doing this I'll often just use links for the actions with the hash as the href, then add click events with jquery that use the requested hash to determine and delegate the action.

这样做时，我通常只会使用哈希作为href的动作链接，然后使用jquery添加单击事件，这些事件使用请求的哈希来确定和委托动作。

I hope that sets you on the right path.

我希望这能使您走上正确的道路。

#5楼

window.location.href contains the current URL.

window.location.href包含当前URL。

You can read from it, you can append to it, and you can replace it, which may cause a page reload.

您可以阅读它，可以添加到它，也可以替换它，这可能会导致页面重新加载。

If, as it sounds like, you want to record javascript state in the URL so it can be bookmarked, without reloading the page, append it to the current URL after a # and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state.

如果听起来，您想要在URL中记录javascript状态以便可以将其添加为书签，而无需重新加载页面，请在＃之后将其附加到当前URL，并通过onload事件触发一段javascript来解析当前查看是否包含保存状态的URL。

If you use a ?

如果使用？

instead of a #, you will force a reload of the page, but since you will parse the saved state on load this may not actually be a problem;

代替＃，您将强制重新加载页面，但是由于您将在加载时解析保存的状态，因此这实际上可能不是问题；

and this will make the forward and back buttons work correctly as well.

这样一来，前进和后退按钮也将正常工作。

#6楼

有一个Yahoo YUI组件（浏览器历史记录管理器）可以处理此问题： http : //developer.yahoo.com/yui/history/