清除URL哈希

Question

访问 stackoverflow.com/#_=_，window.location.hash 的计算结果为#_=_。没问题。

现在执行window.location.hash = '' 来清除哈希值，URL就变成了stackoverflow.com/#。（注意结尾的#）

为什么window.location.hash中的#有时会包含在内，有时又不包含呢？如何在不重新加载页面的情况下从URL中删除#？

(MDN 说：

【哈希值】是紧随着井号（#）后面的 URL 部分，包括井号。

但在空哈希的情况下，这并不正确。)

- Randomblue

---

你用哪个浏览器观察到这种行为的？ - Gumbo

访问 stackoverflow.com/# 也会导致 window.location.hash === ''，因此它是一致的行为。 - dev-null-dweller

你说使用 JavaScript 操作 hash 会导致 URL 中出现 # 符号以及空的 hash 属性。现在，只有 # 符号存在于 URL 中，访问页面也会导致空的 hash 属性。只有在 # 符号后面还有其他字符时，hash 属性才会被填充，在所有浏览器中这都是一致的行为。 - dev-null-dweller

我记得IE不会将“#”作为location.hash的一部分，只是指出其他不一致之处... - Claude

当在URL末尾添加#时，IE似乎会在开头添加'file///'。 - 124697

可能是重复的问题，与此类似： 如何使用JavaScript从window.location (URL)中删除哈希而不刷新页面？ - PayteR

Answer 1

回答第二个问题（在不刷新页面的情况下删除 #）：

history.pushState('', document.title, window.location.pathname);

- Randomblue

---

注意：pushState 适用于 IE10 及以上版本。 - Jay Kyburz

我更喜欢使用 replaceState 来实现这个目标。 - Banago

有没有IE9的解决方案？我尝试了window.location.href.replace( /#.*/, "");但它会重新加载页面。 - Pankit Kapadia

Answer 2

回答你的第一个问题：

根据Mozilla.org上的window.location文档：“URL中跟随#符号的部分（如果有），包括#符号。如果URL不包含#或#后面没有任何内容，则为空字符串。”

有趣的是，该文档于2013年4月8日刚刚更新。不确定这是否是在您查看文档之后添加的。

顺便提一下（和答案相关），window.location.hash和pushState是不同的概念，尽管它们非常相似。

- ricardohdz

Answer 3

这种行为有两个驱动因素：

• “设置哈希属性会导航到命名锚点，而不重新加载文档。”（此处）
• “当您设置位置对象或其任何属性，除了哈希[...]在JavaScript 1.1及更高版本中，设置位置的效果取决于用户对比网络上的原始文档的设置。”（此处）

所以基本上，设置哈希属性不应该导致重新加载，设置任何其他属性都应该导致重新加载（或者根据浏览器设置进行E-Tag/modified-since头检查）。

我认为出于一致性考虑，浏览器构建者将设置空哈希转换为设置'#'作为哈希。这样，位置栏中的URL就不会导致重新加载。但后面这部分纯属猜测。

- Claude