在前端开发中，有时候我们需要对当前页面的URL地址进行一些操作，比如删除URL中的哈希部分。本文将介绍如何使用JavaScript在不刷新页面的情况下删除URL中的哈希部分。
window.location
在JavaScript中，window.location对象代表了当前页面的URL地址。它包含了许多属性和方法，比如href、protocol、host、pathname等等，这些属性和方法允许我们对URL进行各种操作。
删除哈希部分
如果想要删除URL中的哈希部分，我们可以使用window.location.hash属性来实现。该属性返回URL中的哈希部分，例如：http://example.com/#section1，则window.location.hash的值为#section1。
要删除URL中的哈希部分，我们只需要将window.location.hash的值设为空字符串即可。示例代码如下：
-- ---------------------- - -------------------- - --- -
上面的代码首先检查当前URL是否有哈希部分，如果有，则将其赋值为空字符串，这样就可以删除哈希部分了。
不刷新页面
上面的示例代码虽然可以删除URL中的哈希部分，但是会造成页面的刷新。如果我们想要实现在不刷新页面的情况下删除哈希部分，该怎么做呢？
实际上，我们可以使用history.pushState()方法来实现这个功能。该方法可以修改当前页面的URL地址，但是不会刷新页面。示例代码如下：
-- ---------------------- - ----------------------- --- ------------------------ - ------------------------ -
上面的代码首先检查当前URL是否有哈希部分，如果有，则调用history.pushState()方法将URL中的哈希部分替换成空字符串。其中，第一个参数为状态对象，第二个参数为新的URL地址，第三个参数为可选的URL片段。
总结
本文介绍了如何使用JavaScript在不刷新页面的情况下删除URL中的哈希部分。通过使用window.location.hash和history.pushState()方法，我们可以轻松地实现这个功能。
需要注意的是，在使用history.pushState()方法时，我们需要确保浏览器支持HTML5的history API。此外，修改URL地址可能会对SEO产生一定的影响，因此应该谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8902