क्या करता है href एक्सप्रेशन <a href=


228

मैंने समय-समय पर वेबपेजों में उपयोग किए जाने वाले निम्न href देखे हैं। हालाँकि, मुझे समझ नहीं आ रहा है कि यह क्या करने की कोशिश कर रहा है या तकनीक। क्या कोई कृपया विस्तार से बता सकता है?

<a href="javascript:;"></a>

2
आप इसे एक JS विधि कह सकते हैं यदि im गलत नहीं है .. जावास्क्रिप्ट: SomeFunction ()
Rob

1
यह कुछ भी करने की कोशिश नहीं कर रहा है जो कि एक उचित क्लिक हैंडलर के साथ बेहतर तरीके से नहीं किया जा सकता है। आपको इससे बचना चाहिए क्योंकि यह बदसूरत है, दुर्गम है और लोगों को इस javascript:योजना का उपयोग करने के लिए प्रेरित करता है जहां इसका इस्तेमाल नहीं किया जाना चाहिए ( onclick="javascript:…")
गैरेथ

2
इसे बाहर की जाँच करें: stackoverflow.com/a/138233/908879
ajax333221

जवाबों:


247

एक <a>जब तक यह या तो एक है तत्व अमान्य HTML है hrefया nameविशेषता।

यदि आप चाहते हैं कि इसे एक लिंक के रूप में सही तरीके से प्रस्तुत किया जाए (यानी रेखांकित, हाथ सूचक, आदि), तो यह केवल तभी करेगा जब इसकी hrefविशेषता होगी।

इस तरह कोड को कभी-कभी लिंक बनाने के तरीके के रूप में उपयोग किया जाता है, लेकिन hrefविशेषता में वास्तविक URL प्रदान किए बिना । डेवलपर स्पष्ट रूप से चाहता था कि लिंक कुछ भी न करे, और यह सबसे आसान तरीका था जो वह जानता था।

उसके पास संभवत: कुछ अन्य जावास्क्रिप्ट इवेंट कोड हैं जो लिंक को क्लिक करने पर ट्रिगर हो जाता है, और वह वही होगा जो वह वास्तव में होना चाहता है, लेकिन वह चाहता है कि यह एक सामान्य <a>टैग लिंक की तरह दिखे।

कुछ डेवलपर्स href='#'उसी उद्देश्य के लिए उपयोग करते हैं, लेकिन यह ब्राउज़र को पृष्ठ के शीर्ष पर कूदने का कारण बनता है, जो संभव नहीं है। और वह बस href को खाली नहीं छोड़ सकता, क्योंकि href=''वर्तमान पृष्ठ पर वापस लिंक है (अर्थात यह पृष्ठ ताज़ा करने का कारण बनता है)।

इन चीजों के आसपास तरीके हैं। जावास्क्रिप्ट कोड का एक खाली बिट का उपयोग करना hrefउनमें से एक है, और यद्यपि यह सबसे अच्छा समाधान नहीं है, यह काम करता है।


16
जिज्ञासा से बाहर, क्या ऐसा करने का एक बेहतर तरीका है?
रहमान कालफेन

28
ऐसा करने से बेहतर यह था कि यदि ईवेंट फ़ंक्शन करता है return false;या event.preventDefault()फिर hrefकार्रवाई कभी नहीं होगी, तो आप कुछ और समझदार डाल सकते हैं।
स्पडली

6
एक <a>के बिना hrefया nameअवैध नहीं है, यह एक सत्यापनकर्ता का उपयोग करके आसानी से जांचा जा सकता है।
जुक्का के। कोर्पेला

2
टुकड़ा (# अनुभाग) को कभी भी कल्पना के अनुसार वेब सर्वर पर नहीं भेजा जाना चाहिए, इसलिए संभावना है कि आपका ब्राउज़र वहां कुछ गलत कर रहा है।
जोशुआ वॉल्श

2
हाँ @ योशीमास्टर ने क्या कहा। यदि URL में एक # टुकड़ा है , जो वेब सर्वर को कभी नहीं भेजा जाता है (या इसलिए, फ़ायरवॉल को); यह केवल ब्राउज़र द्वारा आंतरिक रूप से उपयोग किया जाता है। इस मामले में, <a href="#">... के साथ टैग किए गए लिंक पर क्लिक </a>करने से आपका ब्राउज़र कहीं भी किसी भी HTTP अनुरोध भेजने का कारण नहीं होगा; यह सब कुछ पृष्ठ के शीर्ष पर स्क्रॉल होगा।
मार्क रीड

38

मूल रूप से पृष्ठों (या एंकर) को स्थानांतरित करने के लिए लिंक का उपयोग करने के बजाय, इस विधि का उपयोग करके एक जावास्क्रिप्ट फ़ंक्शन लॉन्च किया गया है

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

लिंक पर क्लिक करने से अलर्ट में आग लग जाएगी।


31

अपने गंतव्य तक पहुंचने के लिए लिंक से बचने के लिए कई तंत्र हैं। सवाल से एक बहुत सहज नहीं है।

एक क्लीनर विकल्प का उपयोग करना है href="#no"जहां #noदस्तावेज़ में एक गैर-परिभाषित एंकर है।

आप पठनीयता को बढ़ाने के लिए #disable, या #action जैसे अधिक अर्थ नाम का उपयोग कर सकते हैं।

दृष्टिकोण के लाभ:

  • खाली href = "#" के "शीर्ष पर जाने" से बचा जाता है
  • जावास्क्रिप्ट के उपयोग से बचा जाता है

कमियां:

  • आप सुनिश्चित करें कि दस्तावेज़ में एंकर नाम का उपयोग नहीं किया गया है।

चूंकि <a>तत्व एक लिंक के रूप में कार्य नहीं कर रहा है, इन मामलों में सबसे अच्छा विकल्प एक <a>तत्व का उपयोग नहीं कर रहा है, लेकिन <div>वांछित लिंक जैसी शैली प्रदान करता है।


13
मुझे गैर-परिभाषित एंकर भी पसंद है। हालांकि, एक और नकारात्मक पहलू यह है कि यह आपके ब्राउज़र के इतिहास में लंगर जोड़ता है, इसलिए मैं ओपी में रिक्त जेएस विधि का उपयोग करने का विकल्प चुनता हूं।
जॉन रीड

10
<a href="javascript:alert('Hello');"></a>

के लिए बस आशुलिपि है:

<a href="" onclick="alert('Hello'); return false;"></a>

3
की तरह लेकिन यह एक सच नहीं है "की तरह" के लिए तुलना की तरह। जो एक कारण है कि पहली बार में इसका इस्तेमाल करने के कुछ जाल हैं।
लैंकिमार्ट जू

9

यह लिंक बनाने का एक तरीका है जब क्लिक किया जाता है (जब तक कि जावास्क्रिप्ट घटना इसके लिए बाध्य न हो) बिल्कुल कुछ न करें।

यह एक लिंक का अनुसरण करने के बजाय जावास्क्रिप्ट चलाने का एक तरीका है:

<a href="Javascript: doStuff();">link</a>

जब वास्तव में चलाने के लिए जावास्क्रिप्ट नहीं है (आपके उदाहरण की तरह) तो यह कुछ भी नहीं करता है।


ओह समझा। यह लिंक को प्रभावी ढंग से निष्क्रिय कर देता है।
जॉन लिवरमोर

9

इसका संदर्भ लें:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

4
<a href="javascript:void(0);"></a>

javascript: जावास्क्रिप्ट कोड लिखने के लिए जा रहे ब्राउज़र को बताता है


3

पुराना धागा लेकिन मैंने सोचा कि मैं यह जोड़ूंगा कि डेवलपर्स इस निर्माण का उपयोग करते हैं एक मृत लिंक बनाने के लिए नहीं है, लेकिन क्योंकि किसी कारण से जावास्क्रिप्ट URL सक्रिय html तत्व के संदर्भ को सही ढंग से पास नहीं करते हैं।

जैसे handler_function(this.id)काम करता है, onClickलेकिन एक जावास्क्रिप्ट URL के रूप में नहीं।

इस प्रकार यह पांडित्य के मानकों-अनुरूप कोड लिखने के बीच एक विकल्प है जिसमें आपको प्रत्येक हाइपरलिंक के लिए कॉल को मैन्युअल रूप से समायोजित करने, या थोड़ा गैर-मानक कोड शामिल करना होता है जिसे एक बार लिखा जा सकता है और हर जगह उपयोग किया जा सकता है।


2

तो इसका उपयोग hrefइवेंट श्रोताओं के बजाय js कोड लिखने onclickऔर html के लिए टैग को वैध बनाने के लिए #लिंक से बचने के लिए किया जाता है।hrefa

मेरे पास एक शोध था कि मैं विशेषता के javascript:अंदर कैसे उपयोग करूं href

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

इस कोड के माध्यम से, आप केवल कॉलिंग फ़ंक्शन के बजाय js कोड भी लिख सकते हैं।


क्रोम संस्करण में परीक्षण किया गया 68.0.3440.106 (आधिकारिक बिल्ड) (64-बिट)

फ़ायरफ़ॉक्स क्वांटम 61.0.1 (64-बिट) में परीक्षण किया गया


-4

हमेशा एक लिंक को ठीक से प्रस्तुत करने का सबसे अच्छा तरीका सीएसएस के साथ निम्नानुसार है:

a {cursor: pointer !important}

धागे में उल्लिखित जैसी जरूरी चीजों का पालन करने से बचना चाहिए।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.