आप जावास्क्रिप्ट का उपयोग करके URL में #hash की जांच कैसे कर सकते हैं?

Question

मेरे पास कुछ jQuery / जावास्क्रिप्ट कोड हैं जिन्हें मैं केवल तब चलाना चाहता हूं जब #किसी URL में हैश ( ) एंकर लिंक हो। आप जावास्क्रिप्ट का उपयोग करके इस चरित्र की जांच कैसे कर सकते हैं? मुझे एक सरल कैच-ऑल टेस्ट की आवश्यकता है जो इन जैसे URL का पता लगाएगा:

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

मूल रूप से कुछ की तर्ज पर:

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

अगर कोई मुझे सही दिशा में ले जा सकता है, तो वह बहुत सराहा जाएगा।

Answer 1

सरल:

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

Comments

अतिरिक्त: .location ऑब्जेक्ट केवल वर्तमान विंडो के URL पर उपलब्ध है, आप ऐसा मनमाने URL के लिए नहीं कर सकते (उदाहरण के लिए एक स्ट्रिंग चर में संग्रहीत)

— Gareth

इसके अलावा, .hash और .query जैसे स्थान गुण भी <a> तत्वों पर उपलब्ध हैं

— गैरेथ

.searchएक पर उपलब्ध है <a>, नहीं .query। नमूना jQuery $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]:। .hash => "#fragmenttest"और .search= ?qs=1। वहाँ से, एक स्ट्रिंग के अलावा कुछ और प्राप्त करने के लिए querystring निष्कर्षण सवाल मारा ।

— पितृ पक्ष

@hitautodestruct: यह प्रश्न हैश में परिवर्तन के बारे में नहीं है, बस एक पृष्ठ लोड पर मौजूद है या नहीं।

— गारेथ

@ गैरेथ हां, आप सही कह रहे हैं। बस एहसास हुआ कि मैंने जो लिंक पोस्ट किया था वह hashchangeघटना के लिए था और नहीं window.location.hash। हालाँकि बाद वाले को IE <8. द्वारा समर्थित नहीं है

— 6:13 पर hitautodestruct

Answer 2

  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
  }

Answer 3

निम्नलिखित डालें:

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

Comments

धन्यवाद, window.location.hash का केवल एक मान है अगर # के बाद कोई मान है। उदाहरण के लिए। //www.example.com# हैश की जाँच करते समय '' लौटाता है।

— जेसी

Answer 4

यदि URI दस्तावेज़ का स्थान नहीं है, तो यह स्निपेट वही करेगा जो आप चाहते हैं।

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

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

Comments

जावास्क्रिप्ट के लिए +1 यह नहीं जानता कि सीमा से बाहर क्या है :)

— डंकन

@ डंक: जेएस एरेज़ मूल रूप से ऑब्जेक्ट हैं। उन्हें सूचकांक द्वारा एक्सेस करना तो जैसे एक वस्तु संपत्ति तक पहुँचने की तरह है: obj['0']। जेएस में यह सच है: arr[0] === arr['0']इसलिए यदि इंडेक्स / कुंजी मौजूद नहीं है तो बाउंड से बाहर जाने के बजाय अपरिभाषित मूल्य अपरिभाषित है। jsfiddle.net/web5me/Mw376

— मार्क डायथेल्म

Answer 5

क्या आपने यह कोशिश की है?

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

( urlURL आप कहाँ से जाँचना चाहते हैं, जाहिर है)

Answer 6

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

यह समस्या को हल करेगा;)

Comments

जेएस + जेक्यू, क्रॉस-ब्राउज़र और सरल समाधान के मिश्रण के इस उत्तर coz को पसंद किया, पहले से ही इस दृष्टिकोण को लागू किया।

— आर्थर कुशमैन

Answer 7

window.location.hash 

हैश पहचानकर्ता वापस आ जाएगा

Comments

छोटा और साफ, एकदम सही है

— Jam

Answer 8

... या वहाँ एक चयनकर्ता है:

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

Answer 9

यहां आप हैश के बदलाव के लिए समय-समय पर जांच कर सकते हैं, और फिर हैश मान को संसाधित करने के लिए एक फ़ंक्शन को कॉल कर सकते हैं।

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

Comments

केवल 6 + 7. अल नेस्सरी नाम के अन्य ब्राउज़रों ने ऑनशॉस्कॉग ईवेंट को शामिल किया है

— टोकिमॉन

@ टोकिमोन - महान! मुझे नहीं पता था। लेकिन मुझे लगता है कि हमें अभी भी IE के उन पुराने संस्करणों का समर्थन करने के लिए मिला है

— इमैनुएल

दुख की बात है ... यहां तक ​​कि IE 8 के रूप में जल्द ही दूर जाना होगा क्योंकि IE 9 XP पर समर्थित नहीं है :(

— Tokimon

modernizr.com पुराने ब्राउज़रों पर हैशचेंज घटना (अन्य आधुनिक सुविधाओं का एक गुच्छा के साथ) लागू करता है

— guigouz

यह बिल्कुल अनुशंसित कोड नहीं है: यह कम से कम होना चाहिए setTimeout(checkHash, 400):। साथ ही, आधुनिक ब्राउज़रों में hashchangeघटना होती है ताकि आप कर सकें window.addEventListener('hashchange', function(){ … })। अंत में, वैश्विक hashचर को लीक करना एक गैर-अनुशंसित अभ्यास है, यहां तक ​​कि छूट के लिए भी।

— ओनक टॉम

Answer 10

ज्यादातर लोग document.location में URL गुणों के बारे में जानते हैं। यदि आप केवल वर्तमान पृष्ठ में रुचि रखते हैं तो यह बहुत अच्छा है। लेकिन यह सवाल एक पेज पर एंकर को पार्स करने में सक्षम होने के बारे में था, न कि पेज पर ही।

अधिकांश लोगों को यह याद आ रहा है कि वे समान 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
   }
});

Answer 11

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

Comments

"Hash.length ()" के विपरीत क्या यह "हैश लोट्रस" नहीं होना चाहिए? :)

— नाथन पिटमैन

Answer 12

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

Answer 13

ऊपर दिए गए अंश और गैरेथ टिप्पणी महान हैं। वे एक अलग जवाब के लायक हैं। जाहिरा तौर पर, हैश और खोज गुण किसी भी 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
}

(लेकिन इसकी शायद थोड़ी अधिक है ..)

Answer 14

इसे यूआरआई-जैसे स्ट्रिंग्स से लोकेशन प्रॉपर्टीज को एब्सट्रैक्ट करने के तरीके के रूप में यहां फेंक रहे हैं। हालांकि window.location instanceof Locationयह सच है, आह्वान करने का कोई भी प्रयास Locationआपको बताएगा कि यह एक अवैध निर्माणकर्ता है। तुम अब भी तरह बातें करने के लिए प्राप्त कर सकते हैं hash, query, protocolके रूप में अपने स्ट्रिंग की स्थापना करके आदि hrefएक डोम एंकर तत्व है, जो तब के साथ सभी का पता गुण साझा करेंगे की संपत्ति window.location।

ऐसा करने का सबसे सरल तरीका है:

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

string.hash;

सुविधा के लिए, मैंने एक छोटी सी लाइब्रेरी लिखी, जो इसका उपयोग देशी Locationकंस्ट्रक्टर को एक के साथ बदलने के लिए करती है जो स्ट्रिंग्स और उत्पादन window.location-जैसी वस्तुओं को ले जाएगा : Location.js

Answer 15

आमतौर पर क्लिक स्थान परिवर्तन से पहले जाते हैं, इसलिए एक क्लिक के बाद setTimeOut को अपडेटेड विंडो प्राप्त करने के लिए एक अच्छा विचार है।

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

या आप इसके साथ स्थान सुन सकते हैं:

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

मैंने एक jQuery प्लगइन लिखा है जो कुछ ऐसा करता है जो आप करना चाहते हैं।

यह एक साधारण लंगर राउटर है।

Answer 16

यहाँ एक साधारण फ़ंक्शन है जो रिटर्न करता है 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 की टिप्पणी के आधार पर।

Answer 17

वर्तमान पृष्ठ URL के लिए यह परीक्षण करने का एक सरल तरीका है:

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

Answer 18

कभी-कभी आपको पूरी क्वेरी स्ट्रिंग मिलती है जैसे कि "#anchorlink? firstname = mark"

यह हैश मान प्राप्त करने के लिए मेरी स्क्रिप्ट है:

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

returns -> #anchorlink

Comments

क्वेरी स्ट्रिंग के बाद हैश को जोड़ा जाता है और सर्वर पर कभी नहीं भेजा जाता है। जब आप हाथ से यूआरएल को संशोधित करते हैं तो क्वेरी स्ट्रिंग से पहले एकमात्र समय हैश दिखाई देगा।

हाँ, लेकिन कभी-कभी लोग इस फॉर्मेट पर यूआरएल भेजते हैं। यह सिर्फ इतना है कि आप केवल हैश मूल्य प्राप्त कर सकते हैं और दूसरों की उपेक्षा कर सकते हैं। :)

— अंक