使用JavaScript w/out删除URL中导致页面重新加载的片段

背景：我有一个HTML页面，可以扩展某些内容。由于这样的扩展只需要加载页面的一小部分，所以它是通过JavaScript完成的，而不是指向新的URL/HTML页面。然而，作为奖励，用户可以永久链接到这样的扩展部分，即向其他人发送类似的URL

http://example.com/#foobar

并立即为其他用户打开"foobar"类别。使用parent.location.hash="foobar"可以实现此操作，因此该部分很好。

现在的问题是：当用户关闭页面上的此类别时，我想再次清空URL片段，即http://example.com/#foobar进入http://example.com/以更新永久链接显示。然而，使用parent.location.hash = ''会导致整个页面的重新加载（例如，在Firefox3中），我希望避免这种情况。使用window.location.href = '/#'不会触发页面重新加载，但会在URL中留下看起来有些不起眼的"#"符号。那么，在流行的浏览器中，有没有一种方法可以在不触发页面刷新的情况下用JavaScript删除包括"#"符号的URL锚？

正如其他人所提到的，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));
}

既然你在控制对哈希值的操作，为什么不使用一个表示"什么都没有"的令牌，比如"#_"或"#default"。

您可以使用全新的HTML5 window.history.pushState和replaceState方法，如ASCIIcasts 246:AAJAX History State和GitHub博客中所述。这使您可以更改整个路径（在同一源主机内），而不仅仅是片段。要试用此功能，请使用最近的浏览器浏览GitHub存储库。

将此代码放在头部分。

<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>

还有另一个选项，而不是使用hash，你可以使用javascript: void(0);示例：<a href="javascript:void(0);" class="open_div">Open Div</a>

我想这也取决于你什么时候需要这种链接，所以你最好检查以下链接：

如何使用：http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/或者在这里检查关于什么更好的争论：；href"我应该为JavaScript链接使用的值#"或"；javascript：void（0）"？

$(document).ready(function() {
        $(".lnk").click(function(e) {
            e.preventDefault();
            $(this).attr("href", "stripped_url_via_desired_regex");
        });
    });

所以使用

parent.location.hash = ''第一个

然后进行

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

正如其他人所说，你做不到。另外。。。说真的，作为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：-）

相关内容

最新更新

热门标签：