jquery：更改 URL 地址而不重定向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6478485/
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
jquery: change the URL address without redirecting?
提问by laukok
Possible Duplicate:
Modify Address Bar URL in AJAX App to Match Current State
How can I change the URL address without redirecting the page?
如何在不重定向页面的情况下更改 URL 地址？
For instance, when I click on this link below:
例如，当我点击下面的链接时：
<a href="http://mysite.com/projects/article-1" class="get-article">link</a>
I will grab the URL from the link:
我将从链接中获取 URL：
var path = object.attr('href');
If I do this below, the page will be redirected:
如果我在下面这样做，页面将被重定向：
window.location = path;
I want to do something like this site, when you click on the image, the ajax call will fetch the requested page and the URL address on the window will be changed too, so that it has a path for what you click.
我想做类似这个网站的事情，当你点击图片时，ajax 调用将获取请求的页面，并且窗口上的 URL 地址也将被更改，以便它具有你点击的路径。
采纳答案by david
NOTE: history.pushState()is now supported - see other answers.
注意：history.pushState()现在支持 - 查看其他答案。
You cannotchange the whole url without redirecting, what you can do instead is change the hash.
您不能在不重定向的情况下更改整个 url，您可以做的是更改hash。
The hashis the part of the url that goes after the # symbol. That was initially intended to direct you (locally) to sections of your HTML document, but you can read and modify it through javascript to use it somewhat like a global variable.
该散列是＃符号后进入的URL的一部分。这最初是为了将您（本地）定向到 HTML 文档的各个部分，但您可以通过 javascript 读取和修改它，以将其用作有点像全局变量。
If applied well, this technique is useful in two ways:
如果应用得当，此技术在两个方面很有用：
- the browser history will remember each different step you took (since the url+hash changed)
- you can have an address which links not only to a particular html document, but also gives your javascript a clue about what to do. That means you end up pointing to a state inside your web app.
- 浏览器历史记录会记住你采取的每一个不同的步骤（因为 url+hash 改变了）
- 您可以拥有一个地址，该地址不仅可以链接到特定的 html 文档，还可以为您的 javascript 提供有关该做什么的线索。这意味着您最终会指向您的网络应用程序中的一个状态。
To change the hash you can do:
要更改哈希，您可以执行以下操作：
document.location.hash = "show_picture";
To watch for hash changes you have to do something like:
要查看哈希更改，您必须执行以下操作：
window.onhashchange = function(){
var what_to_do = document.location.hash;
if (what_to_do=="#show_picture")
show_picture();
}
Of course the hash is just a string, so you can do pretty much what you like with it. For example you can put a whole object there if you use JSON to stringifyit.
当然，散列只是一个字符串，所以你可以用它做任何你喜欢的事情。例如，如果您使用 JSON 对其进行字符串化，则可以将整个对象放在那里。
There are very good JQuery libraries to do advanced things with that.
有非常好的 JQuery 库可以用它来做高级的事情。
回答by Brendan
See here - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402
见这里 - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402
Essentially:
本质上：
history.pushState('data', '', 'http://your-domain/path');
You can manipulate the history object to make this work.
您可以操作历史对象来完成这项工作。
It only works on the same domain, but since you're satisfied with using the hash tag approach, that shouldn't matter.
它仅适用于同一个域，但由于您对使用哈希标记方法感到满意，因此这无关紧要。
Obviously would need to be cross-browser tested, but since that was posted on the Opera forum I'm safe to assume it would work in Opera, and I just tested it in Chrome and it worked fine.
显然需要进行跨浏览器测试，但由于这是在 Opera 论坛上发布的，我可以放心地假设它可以在 Opera 中运行，而且我只是在 Chrome 中对其进行了测试，并且运行良好。
回答by Richard H
That site makes use of the "fragment" part of a url: the stuff after the "#". This is not sent to the server by the browser as part of the GET request, but can be used to store page state. So yes you can change the fragment without causing a page refresh or reload. When the page loads, your javascript reads this fragment and updates the page content appropriately, fetching data from the server via ajax requests as required. To read the fragment in js:
该站点使用了 url 的“片段”部分：“#”之后的内容。这不会作为 GET 请求的一部分由浏览器发送到服务器，但可用于存储页面状态。所以是的，您可以更改片段而不会导致页面刷新或重新加载。当页面加载时，您的 javascript 读取此片段并适当更新页面内容，根据需要通过 ajax 请求从服务器获取数据。在 js 中读取片段：
var fragment = location.hash;
but note that this value will include the "#" character at the beginning. To set the fragment:
但请注意，此值将在开头包含“#”字符。设置片段：
location.hash = "your_state_data";
回答by Jon
You can't do what you ask (and the linked site does not do exactly that either).
你不能做你所要求的（而且链接的网站也没有完全做到这一点）。
You can, however, modify the part of the url after the #sign, which is called the fragment, like this:
但是，您可以修改 url#符号后面的部分，称为片段，如下所示：
window.location.hash = 'something';
Fragments do notget sent to the server (so, for example, Google itself cannot tell the difference between http://www.google.com/and http://www.google.com/#something), but they can be read by Javascript on your page. In turn, this Javascript can decide to perform a different AJAX request based on the value of the fragment, which is how the site you linked to probably does it.
碎片也不会获取发送到服务器（因此，举例来说，谷歌本身不能告诉之间的差异http://www.google.com/和http://www.google.com/#something），但他们可以通过使用Javascript在网页上阅读。反过来，这个 Javascript 可以根据片段的值决定执行不同的 AJAX 请求，这就是您链接到的站点可能会这样做的方式。
回答by bevacqua
This is achieved through URL rewriting, not through URL obfuscating, which can't be done.
这是通过 URL 重写来实现的，而不是通过 URL 混淆来实现的，这是无法做到的。
Another way to do this, as has been mentioned is by changing the hashtag, with
如前所述，另一种方法是更改主题标签，使用
window.location.hash = "/2131/"
回答by vcsjones
No, because that would open up the floodgates for phishing. The only part of the URI you can change is the fragment (everything after the #). You can do so by setting window.location.hash.
不，因为这会打开网络钓鱼的闸门。您可以更改的 URI 的唯一部分是片段（在 之后的所有内容#）。您可以通过设置来实现window.location.hash。
回答by Max
You cannot really change the whole URL in the location bar without redirecting (think of the security issues!).
如果不重定向，您就无法真正更改地址栏中的整个 URL（想想安全问题！）。
However you can change the hashpart (whats after the #) and read that: location.hash
但是，您可以更改hash部分（在 之后#）并阅读：location.hash
ps.prevent the default onclickredirect of a link by something like:
附：通过以下方式阻止onclick链接的默认重定向：
$("#link").bind("click",function(e){
doRedirectFunction();
e.preventDefault();
})
