window.location.href 在 .html 之后带有 # 哈希

Question

我正在使用 window.location.href 来获取插入 jquery 的 url 路径。

它工作得很好，但现在我需要另辟蹊径，但我不知道该怎么做。

在我需要获取此 URL user.html 并插入活动类之前

这样做：

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

现在我需要这个：user.html#/details

如何使用下面的代码获取此网址：user.html#/details？

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

Answer 1

您可以使用以下代码实现哈希检查：

$( document ).ready(
    function () {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc ) &&
            // and the hash string has length greater than 0
            0 < hash.length &&
            // and the hash contains the string /details
            /\/details/.test( hash )
        ) {
            // Do stuff related to user page
            // with the details hash part
        }
    }
);

另外，如果你想让它更复杂，你可以有以下代码：

(function( $, window, undefined ) {

    // Handle the page elements related to the hash parts
    var track_hash_changes = function track_hash_changes() {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc )
        ) {
            switch( hash ) {
                case '/case-1':
                    // Do stuff for case #1
                    break;
                case '/case-2':
                    // Do stuff for case #2
                    break;
                case '/case-X':
                    // Do stuff for case #X
                    break;
            }
        }
    };

    $( document ).ready(
        function () {
            // Listen for changes in the Hash part of the URL
            window.addEventListener("hashchange", track_hash_changes, false);
        }
    );
})( jQuery, this );

其中case-1、case-2、case-X 是user.html#/case-1、user.html#/case-2、user.html#/case-X

Answer 2

window.location.href 应该继续得到你想要的。

如果您想了解某项工作的原理，只需将其输入控制台即可查看它包含哪些属性。例如，我刚刚在此页面的路径中添加了#/splurge，在控制台中输入了window.location，得到了以下信息：

Answer 3

您只需要为您的网址的详细信息变体编写正则表达式。

/user\.html#\/details/

如果您使用 if else 或 case 语句检查是否匹配，请确保将最具体的测试放在首位。

编辑

我会稍微修改一下以拥有不同的路线。

使用带有哈希键和回调的对象，您可以自己创建一个不依赖正则表达式的简单路由器。

很遗憾，该示例将不再有效，但可以在生产环境中使用。

function router(loc) {
  return function(e) {
    var href = loc.href;
  
    var routes = {
      '/details': function() { console.log('details route') },
      '/contact': function() { console.log('contact route') },
      '/email': function() { console.log('email route') },
      'default': function() { console.log('no hash set') }
    }
  
    if (/user\.html/.test(loc.href)) {
      if (typeof routes[loc.hash] === 'function') {
        return routes[loc.hash]()
      }
      return routes['default']()
    }
  }
}

var mockLocation = {
  hash: '/contact',
  href: 'user.html#/contact'
}

// bind the router to page load and hash change.
// change mockLocation to window.location for production
$(document).on('ready', router(mockLocation))
$(window).on('hashchange', router(mockLocation))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>