Javascript 如何在不离开页面的情况下更改浏览器中的 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8560617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change URL in browser without navigating away from page?
提问by Thomas Denney
I am writing a complex AJAX application at the moment and the entire site has clean URLs. At the moment PHP creates the basic layout for each page however I don't want to have to navigate away from each page when the user clicks on a link, and I don't want to have a hash in the URL because it won't fit with the rest of the site. I know that this has cropped up loads before on the site and it seems to be quite commonly asked but I was wondering if there was a neat HTML5 way of just appearing to change the URL in the address bar even if it technically remains on the same page.
我目前正在编写一个复杂的 AJAX 应用程序，整个站点都有干净的 URL。目前，PHP 为每个页面创建基本布局，但是我不想在用户单击链接时离开每个页面，而且我不想在 URL 中包含哈希值，因为它不会t 适合网站的其余部分。我知道这之前在网站上突然出现了负载，这似乎很常见，但我想知道是否有一种简洁的 HTML5 方式来更改地址栏中的 URL，即使它在技术上保持不变页。
回答by Tilman Potthof
You can do it with history.pushState, but only in browsers that support it. Just try the following line in your browsers JavaScript-Console.
您可以使用history.pushState，但仅限于支持它的浏览器。只需在您的浏览器 JavaScript-Console 中尝试以下行。
history.pushState({},"URL Rewrite Example","https://stackoverflow.com/example")
More on that in The pushState() method (Mozilla Developer)
更多关于pushState() 方法的内容（Mozilla 开发人员）
Similar question How do I, with JavaScript, change the URL in the browser without loading the new page?
回答by Sunday Ironfoot
As others have stated, HTML5's history.pushstate is the way to go. Try browsing a repo on github to see it in action (https://github.com/visionmedia/express).
正如其他人所说，HTML5 的 history.pushstate 是要走的路。尝试在 github 上浏览一个 repo 以查看它的实际效果（https://github.com/visionmedia/express）。
Trouble is the only version of IE that supports history.pushstate is IE10, which kinda sucks.
麻烦的是 IE 的唯一支持历史记录的版本。pushstate 是 IE10，这有点糟糕。
Plenty of sites use hashbang #! URL's such as Twitter (e.g. https://twitter.com/#!/Sironfoot). The hashbang is a URL pattern agreed on by search engines so that they can still trawl and index a heavily Ajax powered website (more info here http://code.google.com/web/ajaxcrawling/docs/specification.html), so you could go that route.
很多网站都使用 hashbang #! URL 之类的 Twitter（例如https://twitter.com/#!/Sironfoot）。hashbang 是搜索引擎同意的 URL 模式，因此它们仍然可以对一个使用大量 Ajax 的网站进行拖网和索引（更多信息在这里http://code.google.com/web/ajaxcrawling/docs/specification.html），所以你可以走那条路。
The only other approach is to use history.pushstate for browsers that support it, and fall back to full-page refreshes for non-supporting browsers.
唯一的另一种方法是对支持它的浏览器使用 history.pushstate，并为不支持的浏览器回退到整页刷新。
