1

我正在使用此代码来了解 # 符号后的 url 中的内容：

var a = document.URL.split("#")[1];

例如，如果页面的 url 是http://example.com/path/to/somewhere/#contentpart，变量a将包含contentpart。

但问题是，用户可能单击指向同一页面但另一部分的链接（例如：）<a href="#footer">Go to footer</a>，如果是这样，页面将不会重新加载。（只是页面将被导航到其他地方）

我的问题是，如何在 # 登录同一页面后检测 URL 何时更改？

欢迎使用任何 javascript/jQuery 方法。

4

2 回答 2

4

我建议，记住您当前的代码：

$(window).on('hashchange', function(e){
    var newHash = document.href.split('#')[1];
});

虽然简单地使用它更容易一些：

$(window).on('hashchange', function(e){
    var newHash = document.location.hash;
    console.log(newHash);
});

JS 小提琴演示。

如果您不希望哈希包含#字符，请改用：

$(window).on('hashchange', function(e){
    var newHash = document.location.hash.substring(1);
    console.log(newHash);
});

JS 小提琴演示。

于 2012-08-15T22:40:43.143 回答
2

您可以通过获取的hash属性 来获取 URL 哈希window.location

var a = window.location.hash;

对此属性的更改会hashchange在所有现代浏览器中触发一个事件。MDN 文章中包含 IE7 及以下版本的解决方法。

window.onhashchange = function (e) {
    // Manage changes to your page
    // You can also inspect e.newURL and e.oldURL if you need to

    // Optionally prevent window from scrolling to target
    e.preventDefault();
}

如果您使用 jQuery，请查看jQuery BBQ。它解决了很多问题和浏览器兼容性问题，还允许您将更改推送到 URL / 历史状态，而不是依赖用户单击链接。

于 2012-08-15T22:57:28.227 回答