html页面删除功能,html-使用JavaScript删除URL中的片段，而不会导致页面重新加载...

html-使用JavaScript删除URL中的片段，而不会导致页面重新加载

背景：我有一个HTML页面，可让您扩展某些内容。 由于只需要加载页面的一小部分即可进行此类扩展，因此，它是通过JavaScript而不是通过定向到新的URL / HTML页面来完成的。 但是，作为奖励，用户可以永久链接到此类扩展部分，即向其他人发送网址，例如

[HTTP://example.com/#foobar]

并立即为该其他用户打开“ foobar”类别。 这可以使用parent.location.hash ='foobar'起作用，所以那部分很好。

现在的问题是：当用户关闭页面上的此类类别时，我想再次清空URL片段，即将[[http://example.com/]#foobar]转换为http://example.com/ 更新固定链接显示。 但是，使用parent.location.hash = ''这样做会导致整个页面的重新加载(例如，在Firefox 3中)，我想避免这种情况。 使用window.location.href = '/#'不会触发页面重新加载，但是会在URL中留下看上去不太漂亮的“＃”符号。 那么，在流行的浏览器中，有没有一种方法可以在不触发页面刷新的情况下JavaScript删除包含“＃”符号的URL锚呢？

9个解决方案

49 votes

就像其他人提到的那样，HTML5中的replaceState可用于删除URL片段。

这是一个例子：

// remove fragment as much as it can go without adding an entry in browser history:

window.location.replace("#");

// slice off the remaining '#' in HTML5:

if (typeof window.history.replaceState == 'function') {

history.replaceState({}, '', window.location.href.slice(0, -1));

}

Matmas answered 2020-08-03T05:56:36Z

14 votes

由于您要控制对哈希值的操作，所以为什么不使用仅表示“无”的令牌，例如“ #_”或“ #default”。

Diodeus - James MacFarlane answered 2020-08-03T05:56:57Z

8 votes

抱歉地说，但是如果清空位置，答案是否定的。哈希不能完成任务！-)

roenving answered 2020-08-03T05:57:17Z

4 votes

您可以使用闪亮的新HTML5 2994675209535489089024和replaceState方法，如ASCIIcasts 246：AJAX历史状态和GitHub博客中所述。 这使您可以更改整个路径(在同一原始主机内)，而不仅仅是片段。 要试用此功能，请使用最新的浏览器浏览GitHub存储库。

Chris Boyle answered 2020-08-03T05:57:37Z

1 votes

还有另一种选择，而不是使用哈希，您可以使用javascript: void(0);示例：Open Div

我想这也取决于您何时需要这种链接，因此最好检查以下链接：

使用方法：[http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/]或查看关于哪种方法更好的争论：对于JavaScript链接，应使用哪个“ href”值，“＃”还是“ javascript：void(0)”？

jazkat answered 2020-08-03T05:58:07Z

0 votes

所以用

parent.location.hash = ''第一

然后做

window.location.href=window.location.href.slice(0, -1);

answered 2020-08-03T05:58:35Z

0 votes

将此代码放在头部。

var uri = window.location.toString();

if (uri.indexOf("?") > 0) {

var clean_uri = uri.substring(0, uri.indexOf("?"));

window.history.replaceState({}, document.title, clean_uri);

}

Manigandan Raamanathan answered 2020-08-03T05:58:55Z

-1 votes

$(document).ready(function() {

$(".lnk").click(function(e) {

e.preventDefault();

$(this).attr("href", "stripped_url_via_desired_regex");

});

});

Florin answered 2020-08-03T05:59:11Z

-2 votes

正如其他人所说，您无法做到。 另外...认真地讲，作为jQuery Ajaxy的作者-我已经部署了完整的ajax网站多年了-我可以保证没有最终用户会抱怨或什至没有注意到这种哈希事件正在发生，用户不会 只要有效，他们就会得到他们想要的东西。

不过，合适的解决方案是HTML5 PushState / ReplaceState / PopState ;-)，它不再需要碎片识别符：[https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history]对于支持此HTML5状态功能的HTML5和HTML4兼容项目，请查看[https://github.com/browserstate/History.js] ：-)

balupton answered 2020-08-03T05:59:37Z