jquery - 发生任何更改时如何检测当前网址

Question

我正在使用“document.location.hash”剥离 url 并尝试检查当前 url 留下的内容。我不想使用任何插件，也不想从点击等触发事件中学习结果。需要立即和现代学习 url 更改。

jQuery：

$(function() {
    $(document).location().change(function() {//this part is not working
        var anchor = document.location.hash;
        if( anchor === '#one' ) {
            alert('current url = #one');
        }else if ( anchor === '#two' ) {
            alert('current url = #two');
        }else if ( anchor === '#three' ) {
            alert('current url = #three');
        }
        console.log(anchor);
    });
});

html:

<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>

深注：我已阅读这些问题并找到我正在寻找的内容： 如何检测 JavaScript 中的 URL 更改+如何更改 javascript 中的当前 URL？

Answer 1

在不使用 jQuery 以外的插件的情况下，您可以处理 'hashchange' 事件：

$(document).ready(function() {
    $(window).bind( 'hashchange', function(e) { 
    var anchor = document.location.hash;
            if( anchor === '#one' ) {
                alert('url = #one');
            }else if ( anchor === '#two' ) {
                alert('url = #two');
            }else if ( anchor === '#three' ) {
                alert('url = #three');
            }
            console.log(anchor);
    });
});

注意： 并非所有浏览器都支持 hashchange 事件。

与回退一起使用：您应该使用 Modernizr 来检测是否支持 hashchangeEvent，如果支持检查失败，则回退到 Ben Alman 的 jQuery hashchange 事件插件，并在 else 块中使用 @Baylor Rae 的解决方案。

Answer 2

您可能会发现 Ben Alman 的 jQuery hashchange 事件插件很有帮助。

$(function(){

  // Bind the event.
  $(window).hashchange( function(){
    // Alerts every time the hash changes!
    alert( location.hash );
  });

  // Trigger the event (useful on page load).
  $(window).hashchange();

});