Html 清除 URL 哈希
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15322917/
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
Clearing URL hash
提问by Randomblue
Visit stackoverflow.com/#_=_
and window.location.hash
evaluates to #_=_
. Fine.
访问stackoverflow.com/#_=_
并window.location.hash
评估为#_=_
。美好的。
Now execute window.location.hash = ''
to clear the hash, and the URL becomes stackoverflow.com/#
. (Notice the trailing #
.)
现在执行window.location.hash = ''
清除哈希,URL 变为stackoverflow.com/#
. (注意尾随#
。)
Why is the #
in window.location.hash
inconsistently included or excluded? How can the #
be removed from the URL without reloading the page?
为什么#
inwindow.location.hash
不一致地包括或排除?如何在#
不重新加载页面的情况下从 URL 中删除?
(MDNsays
(MDN说
[the hash is] the part of the URL that follows the # symbol, including the # symbol.
[哈希是] URL 中# 符号后面的部分,包括# 符号。
but that is not true for in the case of an empty hash.)
但对于空散列的情况,情况并非如此。)
回答by Randomblue
To answer the second question (removing the #
without a page refresh):
回答第二个问题(删除#
不刷新页面):
history.pushState('', document.title, window.location.pathname);
回答by ricardohdz
Answering to your first question:
回答你的第一个问题:
According to the window.location docin Mozilla.org: "the part of the URL that follows the # symbol, if there is one, including the # symbol. Empty string if the url does not contain # or has nothing after the #."
根据Mozilla.org 中的window.location 文档:“# 符号后面的URL 部分(如果有的话,包括 # 符号)。 如果 url 不包含 # 或 # 之后没有任何内容,则为空字符串。”
Curiously, that document was just updated on 4/8/2013. Not sure if that was added after you checked the documentation.
奇怪的是,该文件于 2013 年 4 月 8 日刚刚更新。不确定是否在检查文档后添加了它。
By the way (and in reference to the answers), the window.location.hash and pushState are different concepts although close related.
顺便说一句(并参考答案), window.location.hash 和 pushState 是不同的概念,尽管密切相关。
回答by Claude
There are 2 things driving this behaviour:
有两件事推动了这种行为:
- "Setting the hash property navigates to the named anchor without reloading the document." (here)
- "When you set the location object or any of its properties except hash[...]In JavaScript 1.1 and later, the effect of setting location depends on the user's setting for comparing a document to the original over the network." (here)
- “设置哈希属性会导航到命名的锚点,而无需重新加载文档。” (这里)
- “当您设置位置对象或其任何属性时,除了 hash[...] 在 JavaScript 1.1 及更高版本中,设置位置的效果取决于用户通过网络将文档与原始文档进行比较的设置。” (这里)
So basically, setting the hash property should never lead to a reload, setting any other property should lead to a reload (or perhaps an E-Tag/modified-since header check, depending on browser settings).
所以基本上,设置 hash 属性不应该导致重新加载,设置任何其他属性应该导致重新加载(或者可能是 E-Tag/modified-since 标头检查,取决于浏览器设置)。
I would assume that for the sake of consistency, browser builders transform setting an empty hash, to setting '#' as hash. This way the url in the location bar does not lead to a reload. But this latter part is pure speculation.
我认为为了一致性起见,浏览器构建器将设置空散列转换为将“#”设置为散列。这样地址栏中的 url 就不会导致重新加载。但后半部分纯属猜测。
回答by amik
I've been dealing with the same issue about two weeks ago and my conclusion was that there was no good solution. There is no direct solution, removing the hash from URL always forced the browser to reload page, and even if there was an unpretty hack-like solution, I would rather have the hash at the end of url than using obscure solutions.
大约两周前我一直在处理同样的问题,我的结论是没有好的解决方案。没有直接的解决方案,从 URL 中删除散列总是会迫使浏览器重新加载页面,即使有一个不漂亮的类似 hack 的解决方案,我也宁愿将散列放在 url 的末尾而不是使用晦涩的解决方案。