如何删除 URL 中的参数并将其显示在地址栏中，而不会导致 Javascript 中的重定向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8510755/
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 remove parameters in URL and display it in address bar without causing redirect in Javascript?
提问by B Seven
I have found numerous answers on how to extract the URL without the parameters.
我找到了很多关于如何在没有参数的情况下提取 URL 的答案。
How do you rewrite the URL in the address bar without causing the page to reload with the new URL?
如何在地址栏中重写 URL 而不导致页面使用新 URL 重新加载？
shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect
The goal is to extract the parameters in Javascript but not display them in the address bar.
目标是在 Javascript 中提取参数但不在地址栏中显示它们。
回答by jfriend00
In modern browsers with support for the History object, you can use either history.replaceState()or history.pushState()to change the current URL without changing the current page. There are limitations on what you can change (for example, you cannot change the domain/origin this way for security reasons).
在支持 History 对象的现代浏览器中，您可以使用history.replaceState()或history.pushState()来更改当前 URL，而无需更改当前页面。您可以更改的内容存在限制（例如，出于安全原因，您不能以这种方式更改域/来源）。
See herefor a summary of these methods.
有关这些方法的摘要，请参见此处。
The browser history is a recording of where you have been in your browsing session. .replaceState()allows you to replace the current item in the history list with a different one. .pushState()adds a new item to the browser history and both change the URL displayed in the browser URL bar without reloading the page. You select which method to use depending upon how you want the browser's "back" button to behave for this particular page entry.
浏览器历史记录记录了您在浏览会话中的位置。 .replaceState()允许您用不同的项目替换历史列表中的当前项目。 .pushState()在浏览器历史记录中添加一个新项目，并且都更改浏览器 URL 栏中显示的 URL，而无需重新加载页面。您可以根据您希望浏览器的“后退”按钮对此特定页面条目的行为来选择要使用的方法。
Note: These APIs are supported in IE 10 and later.
注意：IE 10 及更高版本支持这些 API。
In older browser versions without support for the history API, the only part of the URL you can change without reloading the page is the hash tag (the part after a #symbol) at the end of the URL.
在不支持历史 API 的旧浏览器版本中，您可以在不重新加载页面的情况下更改 URL 的唯一部分是 URL#末尾的哈希标记（符号后面的部分）。
回答by Amir Ali Akbari
In html5, rewriting url without reloading the page is possible (still you can not change the domain name for security reasons), using history api you can write:
在html5中，可以在不重新加载页面的情况下重写url（出于安全原因您仍然不能更改域名），使用history api可以编写：
history.replaceState("object or string", "title", "/another-new-url");
in which the first two parameters are somehow arbitrary, and the third parameter is the new url (not including domain name). If you want to enable back button for returning to previous url, use pushStateinstead of replaceStateabove. Read more about these functions in this blog post.
其中前两个参数在某种程度上是任意的，第三个参数是新的 url（不包括域名）。如果要启用返回按钮以返回上一个网址，请使用pushState而不是replaceState上面。在此博客文章中阅读有关这些功能的更多信息。
Regarding browser support, it is supported in recent Firefox and Chrome versions, but only in IE10+, which is not very common yet. For details see compatibility matrixor browser implementation details.
关于浏览器支持，最近的 Firefox 和 Chrome 版本都支持，但仅在 IE10+ 中支持，目前还不是很常见。有关详细信息，请参阅兼容性矩阵或浏览器实现详细信息。
回答by Richard JP Le Guen
You can't change the value in the address bar without redirecting. That would be a phishing scammer's dream come true!
您不能在不重定向的情况下更改地址栏中的值。那将是网络钓鱼诈骗者的梦想成真！
You can, however, change the fragment identifier: (in JavaScript, the window.location.hashvalue)
但是，您可以更改片段标识符：（在 JavaScript 中，该window.location.hash值）
<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<script>
window.onload = function() {
window.location.hash = "Loaded!";
document.getElementById("click-me").onclick = function() {
window.location.hash = "Click!";
document.getElementById("click-me").onclick = function() {
window.location.hash = "Clicked AGAIN!";
};
};
}
</script>
<body>
<div>
<input type="button" id="click-me" value="click me!" />
</div>
</body>
</html>
But changing the query string will redirect the page.
但是更改查询字符串将重定向页面。
回答by varfoo
You might be able to use the new pushstate that is part of the HTML 5 history API, which allows you to change the URL without actually reloading the browser.
您或许可以使用作为 HTML 5 历史 API 一部分的新 pushstate，它允许您更改 URL，而无需实际重新加载浏览器。
Check http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstatefor a quick example, and http://diveintohtml5.info/history.htmlfor more in depth examples and limitations:
检查http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate以获取快速示例，并查看http://diveintohtml5.info/history.html以获取更深入的示例和限制：
回答by mas-designs
I don't think that there is a possibility for that, I mean you probably could rewrite the URL after its loaded and add return false, so you prevent the reload but otherwise you would have to do a form POST on the url to achieve that no parameter is shown.
我不认为有这种可能性，我的意思是您可能可以在加载后重写 URL 并添加 return false，因此您可以防止重新加载，但否则您必须在 url 上执行表单 POST 才能实现没有显示参数。
