Làm cách nào bạn có thể kiểm tra #hash trong URL bằng JavaScript?

Tôi có một số mã jQuery / JavaScript mà tôi muốn chạy chỉ khi có một #liên kết neo băm ( ) trong một URL. Làm thế nào bạn có thể kiểm tra ký tự này bằng JavaScript? Tôi cần một thử nghiệm bắt tất cả đơn giản để phát hiện các URL như sau:

• example.com/page.html#anchor
• example.com/page.html#anotheranchor

Về cơ bản một cái gì đó dọc theo dòng:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

Nếu bất cứ ai có thể chỉ cho tôi đi đúng hướng, điều đó sẽ được đánh giá cao.

Đơn giản:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

Đặt như sau:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

Nếu URI không phải là vị trí của tài liệu, đoạn trích này sẽ làm những gì bạn muốn.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

Bạn đã thử điều này?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

( urlRõ ràng URL bạn muốn kiểm tra ở đâu.)

$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

Điều này sẽ giải quyết vấn đề;)

window.location.hash 

sẽ trả về mã định danh băm

... hoặc có một bộ chọn jquery:

$('a[href^="#"]')

Dưới đây là những gì bạn có thể làm để định kỳ kiểm tra sự thay đổi của hàm băm và sau đó gọi một hàm để xử lý giá trị băm.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

Hầu hết mọi người đều biết các thuộc tính URL trong document.location. Thật tuyệt nếu bạn chỉ quan tâm đến trang hiện tại. Nhưng câu hỏi là về việc có thể phân tích các neo trên một trang chứ không phải chính trang đó.

Điều mà hầu hết mọi người dường như bỏ lỡ là các thuộc tính URL tương tự cũng có sẵn cho các phần tử neo:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

Nhận xét của Partridge và Gareths ở trên là tuyệt vời. Họ xứng đáng có một câu trả lời riêng biệt. Rõ ràng, các thuộc tính băm và tìm kiếm có sẵn trên bất kỳ đối tượng Liên kết html nào:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Hoặc là

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Nếu bạn cần điều này trên một biến chuỗi thông thường và tình cờ có jQuery, điều này sẽ hoạt động:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(nhưng nó có thể hơi quá ..)

Ném cái này vào đây như một phương thức để trừu tượng hóa các thuộc tính vị trí từ các chuỗi giống như URI tùy ý. Mặc dù window.location instanceof Locationlà sự thật, bất kỳ nỗ lực nào để gọi Locationsẽ cho bạn biết rằng đó là một nhà xây dựng bất hợp pháp. Bạn vẫn có thể có được những thứ như hash, query, protocolvv bằng cách thiết lập chuỗi của bạn như là hreftài sản của một phần tử DOM neo, sau đó sẽ chia sẻ tất cả các thuộc tính địa chỉ vớiwindow.location .

Cách đơn giản nhất để làm điều này là:

var a = document.createElement('a');
a.href = string;

string.hash;

Để thuận tiện, tôi đã viết một thư viện nhỏ sử dụng cái này để thay thế hàm Locationtạo riêng bằng một hàm sẽ lấy chuỗi và tạo window.locationcác đối tượng giống như: Location.js

Thông thường các lần nhấp đi trước thay đổi vị trí, vì vậy sau khi nhấp là một ý tưởng hay để setTimeOut để cập nhật window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

hoặc bạn có thể nghe vị trí với:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

Tôi đã viết một plugin jQuery làm một cái gì đó giống như những gì bạn muốn làm.

Đó là một bộ định tuyến neo đơn giản.

Đây là một hàm đơn giản trả về truehoặc false(có / không có hashtag):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Trả về true trong trường hợp này.

Dựa trên nhận xét của @ jon-skeet.

Đây là một cách đơn giản để kiểm tra điều này cho URL trang hiện tại:

  function checkHash(){
      return (location.hash ? true : false);
  }

đôi khi bạn nhận được chuỗi truy vấn đầy đủ, chẳng hạn như "#anchorlink? Firstname = mark"

đây là tập lệnh của tôi để lấy giá trị băm:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink