我有以下网址:http://example.com#something
,如何删除#something
而不导致页面刷新?
我尝试了以下解决方案:
window.location.hash = '';
但是,这不会#
从URL中删除哈希符号。
我有以下网址:http://example.com#something
,如何删除#something
而不导致页面刷新?
我尝试了以下解决方案:
window.location.hash = '';
但是,这不会#
从URL中删除哈希符号。
Answers:
最初的问题:
window.location.href.substr(0, window.location.href.indexOf('#'))
要么
window.location.href.split('#')[0]
两者都将返回不带哈希或其后的任何内容的URL。
关于您的编辑:
对的任何更改window.location
都会触发页面刷新。您可以在window.location.hash
不触发刷新的情况下进行更改(尽管如果您的哈希值与页面上的ID相匹配,则窗口会跳转),但是您不能摆脱哈希符号。选哪个更差...
最新的答案
在不牺牲(完全重新加载或在其中保留哈希符号)的情况下如何正确执行操作的正确答案就在这里。不过,就2009年的原始版本而言,此答案留在这里,而1.5年后才给出了利用新浏览器API的正确答案。
如今,解决此问题的能力远远超过了。在HTML5历史API可以让我们操纵地址栏当前域范围内显示任何URL。
function removeHash () {
history.pushState("", document.title, window.location.pathname
+ window.location.search);
}
工作演示:http : //jsfiddle.net/AndyE/ycmPt/show/
在Chrome 9,Firefox 4,Safari 5,Opera 11.50 和 IE 10中都可以使用。对于不受支持的浏览器,您始终可以编写一个优雅的降级脚本,并在可用时使用它:
function removeHash () {
var scrollV, scrollH, loc = window.location;
if ("pushState" in history)
history.pushState("", document.title, loc.pathname + loc.search);
else {
// Prevent scrolling by storing the page's current scroll offset
scrollV = document.body.scrollTop;
scrollH = document.body.scrollLeft;
loc.hash = "";
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scrollV;
document.body.scrollLeft = scrollH;
}
}
因此,您可以摆脱哈希符号,但不是在所有浏览器中都可以。
注意:如果要替换浏览器历史记录中的当前页面,请使用replaceState()
代替pushState()
。
(太多的答案是多余且过时的。)现在最好的解决方案是:
history.replaceState(null, null, ' ');
history.pushState(null, null, ' ')
,如果你想保留历史来代替。
null
的最终结果可能有用。state
title
简洁大方:
history.replaceState({}, document.title, "."); // replace / with . to keep url
.
代替/
。使用/
将URL更改为根路径。
history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));
为我的用例。
history.replaceState(null, document.title, location.pathname + location.search);
要删除哈希,您可以尝试使用此功能
function remove_hash_from_url()
{
var uri = window.location.toString();
if (uri.indexOf("#") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, clean_uri);
}
}
这也将删除尾随哈希。例如:http : //test.com/123#abc- > http://test.com/123
if(window.history.pushState) {
window.history.pushState('', '/', window.location.pathname)
} else {
window.location.hash = '';
}
接下来呢?
window.location.hash=' '
请注意,请将哈希设置为单个空格而不是一个空字符串。
将哈希设置为无效的锚也不会导致刷新。如,
window.location.hash='invalidtag'
但是,我发现上述解决方案具有误导性。这似乎表明在给定位置上具有给定名称的锚点,尽管没有。同时,使用空字符串会导致页面移到顶部,这有时是不可接受的。使用空格还可以确保每当复制URL并添加书签并再次访问该URL时,页面通常将位于顶部,并且空格将被忽略。
而且,这是我对StackOverflow的第一个答案。希望有人觉得它有用,并且符合社区标准。
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>
将此代码放在头部
我认为这样会更安全
if (window.history) {
window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
window.location.hash = '';
}
请尝试以下操作:
window.history.back(1);