คุณจะตรวจสอบ #hash ใน URL โดยใช้ JavaScript ได้อย่างไร

ฉันมีรหัส jQuery / JavaScript ที่ฉันต้องการเรียกใช้เฉพาะเมื่อมีแฮ็ก ( #) ลิงค์ยึดใน URL คุณจะตรวจสอบอักขระนี้โดยใช้ JavaScript ได้อย่างไร ฉันต้องการการทดสอบทั้งหมดที่จับได้ง่ายซึ่งจะตรวจพบ URL ดังนี้:

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

โดยทั่วไปบางสิ่งบางอย่างตามแนวของ:

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

หากใครสามารถชี้ให้ฉันในทิศทางที่ถูกต้องนั่นจะเป็นที่ชื่นชมมาก

ง่าย:

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
  }

ใส่ต่อไปนี้:

<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>

หาก URI ไม่ใช่ตำแหน่งของเอกสารตัวอย่างนี้จะทำสิ่งที่คุณต้องการ

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

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

คุณเคยลองสิ่งนี้หรือไม่?

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

( urlURL ที่คุณต้องการตรวจสอบอยู่ชัด ๆ )

$('#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!
});

สิ่งนี้จะช่วยแก้ปัญหา)

window.location.hash 

จะส่งคืนตัวระบุแฮช

... หรือมีตัวเลือก jquery:

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

นี่คือสิ่งที่คุณสามารถทำได้เพื่อตรวจสอบการเปลี่ยนแปลงของแฮชเป็นระยะ ๆ จากนั้นเรียกใช้ฟังก์ชันเพื่อประมวลผลค่าแฮช

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);
}

คนส่วนใหญ่ตระหนักถึงคุณสมบัติของ URL ใน document.location เยี่ยมมากถ้าคุณสนใจในหน้าปัจจุบันเท่านั้น แต่คำถามคือเกี่ยวกับความสามารถในการแยกวิเคราะห์จุดยึดบนหน้าไม่ใช่ตัวหน้า

สิ่งที่คนส่วนใหญ่ดูเหมือนจะพลาดคือคุณสมบัติ URL เดียวกันนั้นยังมีให้ใช้กับจุดยึดองค์ประกอบ:

// 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);

ความคิดเห็นของนกกระทาและแกเร็ ธ ดังกล่าวข้างต้นนั้นเยี่ยมมาก พวกเขาสมควรได้รับคำตอบแยกต่างหาก เห็นได้ชัดว่าคุณสมบัติแฮชและการค้นหามีอยู่ในวัตถุลิงก์ HTML:

<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>

หรือ

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

หากคุณต้องการสิ่งนี้กับตัวแปรสตริงปกติและมี jQuery อยู่รอบตัวสิ่งนี้ควรทำงาน:

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

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

(แต่อาจจะมากไปหน่อย .. )

การขว้างนี่ในที่นี่เป็นวิธีสำหรับการสรุปคุณสมบัติของตำแหน่งจากสตริงที่คล้ายกับ URI โดยพลการ แม้ว่าจะwindow.location instanceof Locationเป็นจริงการพยายามเรียกใช้Locationจะบอกคุณว่ามันเป็นตัวสร้างที่ผิดกฎหมาย คุณยังสามารถได้รับสิ่งที่ต้องการhash, query, protocolฯลฯ โดยการตั้งค่าสตริงของคุณเป็นhrefทรัพย์สินขององค์ประกอบ DOM สมอซึ่งจากนั้นจะมีส่วนร่วมทุกคุณสมบัติที่อยู่กับwindow.locationสมอซึ่งจากนั้นจะมีส่วนร่วมทุกคุณสมบัติที่อยู่กับ

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือ:

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

string.hash;

เพื่อความสะดวกฉันได้เขียนห้องสมุดเล็ก ๆ ที่ใช้สิ่งนี้เพื่อแทนที่Locationนวกรรมิกดั้งเดิมด้วยสิ่งที่จะใช้สตริงและสร้างwindow.locationวัตถุที่คล้ายกัน: Location.js

โดยปกติแล้วการคลิกจะไปก่อนการเปลี่ยนแปลงสถานที่ตั้งดังนั้นหลังจากคลิกจะเป็นการดีที่คุณจะต้อง setTimeOut เพื่อรับการอัพเดท window.location.hash

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

หรือคุณสามารถฟังตำแหน่งด้วย:

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

ฉันเขียนปลั๊กอิน jQueryที่ทำในสิ่งที่คุณต้องการ

มันเป็นเราเตอร์สมอง่าย ๆ

นี่คือฟังก์ชั่นง่าย ๆ ที่คืนค่าtrueหรือfalse(มี / ไม่มีแฮชแท็ก):

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
}

ผลตอบแทนtrueในกรณีนี้

ตามความคิดเห็นของ @ jon-skeet

นี่เป็นวิธีง่ายๆในการทดสอบ URL ของหน้าปัจจุบัน:

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

บางครั้งคุณได้รับข้อความค้นหาแบบเต็มเช่น "#anchorlink? firstname = mark"

นี่คือสคริปต์ของฉันเพื่อรับค่าแฮช:

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

returns -> #anchorlink