Lấy vị trí băm URL và sử dụng nó trong jQuery

Tôi muốn nhận giá trị sau khi băm trong URL của trang hiện tại và sau đó có thể áp dụng giá trị này trong một chức năng mới ... ví dụ:

URL có thể là

www.example.com/index.html#foo

Và tôi muốn sử dụng nó cùng với đoạn mã sau

$('ul#foo:first').show();

Tôi hơi giả định / hy vọng có một cách nào đó để nắm bắt điều này và biến nó thành một biến mà sau đó tôi có thể sử dụng trong đoạn mã thứ hai.

Lưu ý của biên tập viên: cách tiếp cận dưới đây có ý nghĩa bảo mật nghiêm trọng và, tùy thuộc vào phiên bản jQuery bạn đang sử dụng, có thể khiến người dùng của bạn bị tấn công XSS. Để biết thêm chi tiết, hãy xem thảo luận về cuộc tấn công có thể có trong các nhận xét về câu trả lời này hoặc giải thích này về Trao đổi ngăn xếp bảo mật .

Bạn có thể sử dụng thuộc location.hashtính để lấy hàm băm của trang hiện tại:

var hash = window.location.hash;
$('ul'+hash+':first').show();

Lưu ý rằng thuộc tính này đã chứa #biểu tượng ở đầu.

Trên thực tế, bạn không cần :firstbộ chọn giả vì bạn đang sử dụng bộ chọn ID , giả sử rằng ID là duy nhất trong DOM.

Trong trường hợp bạn muốn lấy băm từ một chuỗi URL, bạn có thể sử dụng String.substringphương thức:

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

Lời khuyên: Hãy lưu ý rằng người dùng có thể thay đổi hàm băm theo ý muốn, tiêm bất cứ thứ gì vào bộ chọn của bạn, bạn nên kiểm tra hàm băm trước khi sử dụng.

location.hash không an toàn cho IE , trong trường hợp IE (bao gồm IE9), nếu trang của bạn chứa iframe, thì sau khi làm mới thủ công bên trong nội dung iframe lấy location.hash giá trị cũ (giá trị cho tải trang đầu tiên). trong khi giá trị truy xuất thủ công khác với location.hash vì vậy hãy luôn truy xuất nó thông qua document.URL

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

Đối với những người đang tìm kiếm giải pháp javascript thuần túy

 document.getElementById(location.hash.substring(1)).style.display = 'block'

Hy vọng điều này sẽ giúp bạn tiết kiệm thời gian.

Kể từ jQuery 1.9, :targetbộ chọn sẽ khớp với hàm băm URL. Vì vậy, bạn có thể làm:

$(":target").show(); // or $("ul:target").show();

Mà sẽ chọn phần tử có ID khớp với hàm băm và hiển thị nó.

Tôi sẽ đề nghị cek tốt hơn trước nếu trang hiện tại có hàm băm. Nếu không nó sẽ được undefined.

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

Tôi đang sử dụng điều này để giải quyết các hàm ý bảo mật được ghi chú trong câu trả lời của @ CMS.

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});