Javascript 在不触发刷新的情况下更改 window.location
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2494213/
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
changing window.location without triggering refresh
提问by jdwyah
I have an AJAX form that submits GET requests. Because these are all GET requests these should be easily bookmark-able. Preferably I'd make my Ajax request, update the screen and then update window.location.href to be the URL for the new page.
我有一个提交 GET 请求的 AJAX 表单。因为这些都是 GET 请求，所以它们应该很容易加入书签。我最好发出 Ajax 请求，更新屏幕，然后将 window.location.href 更新为新页面的 URL。
Unfortunately this reloads the page. Is there any way I can get around this? Basically I'd like the URL bar to be a permalink bar, but it needs to be able to change to keep up with the state of the page.
不幸的是，这会重新加载页面。有什么办法可以解决这个问题吗？基本上我希望 URL 栏是一个永久链接栏，但它需要能够改变以跟上页面的状态。
window.location.hash is no good because that doesn't get sent to the server.
window.location.hash 不好，因为它不会发送到服务器。
采纳答案by jhurshman
The hash is the way to go. Because, as you point out, changes to the hash don't get sent to the server, you have to send an async request to the server as well as updating the hash.
哈希是要走的路。因为，正如您所指出的，对哈希的更改不会发送到服务器，所以您必须向服务器发送异步请求并更新哈希。
As a simple example, if your URL is http://server.com/page?id=4, when the user triggers the action you send an AJAX request for http://server.com/page?id=4, and set the page URL to http://server.com/page#id=4.
举个简单的例子，如果你的 URL 是http://server.com/page?id=4，当用户触发操作时，你发送一个 AJAX 请求http://server.com/page?id=4，并将页面 URL 设置为http://server.com/page#id=4。
Furthermore, you have to have something to restore the state if the user reloads. This would usually be done by reading the hash value client-side and sending an async request to the server based on the state represented by the hash value.
此外，如果用户重新加载，您必须有一些东西来恢复状态。这通常是通过读取散列值客户端并根据散列值表示的状态向服务器发送异步请求来完成的。
回答by vsync
window.history.replaceState( {} , title, new_URL );
This will update the current page URL with a new one without refreshing.
这将使用新的 URL 更新当前页面 URL，而无需刷新。
Arguments:
参数：
- Data object (must be one that could be serialized to text)
- The new title of the changed window URL
- The URL to change to (without refreshing)
- 数据对象（必须是可以序列化为文本的对象）
- 更改后的窗口 URL 的新标题
- 要更改的 URL（不刷新）
The you could use the window.onpopstate = function(event){...}to listen to events when a user goes back or forward in the browser history and change things however you wish.
window.onpopstate = function(event){...}当用户在浏览器历史记录中后退或前进并根据需要更改内容时，您可以使用来侦听事件。
回答by Mathieu
if you want to do which works in current browser, you can't change window.location.hrefwithout reloading the page
如果您想做在当前浏览器中有效的操作，则不能在window.location.href不重新加载页面的情况下进行更改
your only option is to to change window.location.hash.
你唯一的选择就是改变window.location.hash。
you can do that each time you make an ajax call. if you're using jquery, you can bind a function which update the hash each time an ajax call is made. if you choose that you'll have to look for the hash on page load (actually don't know/think you can do that server side) and make that call to have your page on the state corresponding to the hash.
每次进行ajax调用时都可以这样做。如果您使用 jquery，您可以绑定一个函数，该函数在每次进行 ajax 调用时更新哈希。如果您选择，您将不得不在页面加载时查找散列（实际上不知道/认为您可以在服务器端执行）并进行该调用以使您的页面处于与散列对应的状态。
-- update
- 更新
there is now an API which provide this functionality look for history.pushState, history.replaceState and window.onpopstate : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
现在有一个提供此功能的 API，用于查找 history.pushState、history.replaceState 和 window.onpopstate ：https: //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
it's not availlable everywhere yet ( http://caniuse.com/#feat=history), there is a few polyfill that you can use for the moment that will use this API if it's available and fall back using the url hash
它尚未随处可用（http://caniuse.com/#feat=history），您暂时可以使用一些 polyfill，如果可用，将使用此 API 并使用 url 哈希回退
回答by Dmitry Minkovsky
Consider this JavaScript library: https://github.com/browserstate/history.js
考虑这个 JavaScript 库：https: //github.com/browserstate/history.js
回答by NebNeb
Use jquery. It can do ajax requests. You cant use window.location because that is made to change the url.
使用jQuery。它可以做ajax请求。你不能使用 window.location 因为它是用来改变 url 的。
