HTML में href के बजाय JavaScript फंक्शन कैसे कॉल करें


86

मेरे पास HTML में कुछ मॉकअप है

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

अनुरोध भेजने पर मुझे सर्वर से प्रतिक्रिया मिली।

इस मज़ाक के साथ मुझे AJAX अनुरोध के जवाब के रूप में मिला जो सर्वर पर मेरा कोड भेजता है।

ठीक है, सब कुछ ठीक है, लेकिन जब मैं लिंक पर क्लिक करता हूं तो ब्राउज़र फ़ंक्शन को लिंक के रूप में खोलना चाहता है; क्लिक के बाद मुझे पता बार दिखाई देता है

javascript:ShowOld(2367,146986,2)

इसका मतलब है कि अगर मैं काम कर रहा हूँ फ़ायरबग में यह करना चाहता हूँ कि यूआरएल बात ब्राउज़र है। अब मैं ऐसा करना चाहता हूं कि जब कोई भी लिंक पर क्लिक करता है तो ब्राउज़र उन्हें ब्राउज़र में खोलने की कोशिश करने के बजाय पहले से लोड किए गए फ़ंक्शन को DOM में लोड करने की कोशिश करता है।


इसी तरह के सवाल का जवाब स्टैकओवरफ्लो में ही दिया गया है। stackoverflow.com/questions/1070760/…
स्कैरिया सेबेस्टियन

जवाबों:


192

उस सिंटैक्स को ठीक काम करना चाहिए, लेकिन आप इस विकल्प को आज़मा सकते हैं।

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

या

<a href="javascript:ShowOld(2367, 146986, 2);">

मजबूत मूल्यों के लिए अद्यतन किए गए उत्तर

यदि आप स्ट्रिंग्स पास कर रहे हैं, तो अपने फ़ंक्शन के मापदंडों के लिए एकल उद्धरण का उपयोग करें

<a href="javascript:ShowOld('foo', 146986, 'bar');">

तर्कों में दोहरे उद्धरण-चिन्हों से बचकर एक स्ट्रिंग को कैसे पास करें? H = उदाहरण में केवल पूर्णांक हैं।
जेफ्री ने

1
@Jffrycopps आपके फंक्शन के अंदर सिंगल कोट्स
आज़माती है

@ineedme उत्तर उस जानकारी के साथ अपडेट किया गया। धन्यवाद।
डची ४३२

9

यदि आपके पास केवल "ईवेंट हैंडलर क्लिक करें" है, तो <button>इसके बजाय उपयोग करें । एक लिंक का एक विशिष्ट अर्थ अर्थ है।

उदाहरण के लिए:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

क्या बटन के बजाय बटन की तरह दिखने का कोई तरीका है?
बेन पेज

@ पेज: सीएसएस के साथ हाँ। कम से कम आपको एक अच्छा सन्निकटन मिलता है। मेरा जवाब और टिप्पणियाँ यहाँ देखें: stackoverflow.com/questions/4842953/or-javascriptvoid0/…
फेलिक्स क्लिंग

7

अपने जावास्क्रिप्ट को विनीत बनाने की कोशिश करें:

  • आपको href विशेषता में एक वास्तविक लिंक का उपयोग करना चाहिए
  • और ajax को संभालने के लिए क्लिक इवेंट पर एक श्रोता जोड़ें

hrefवैकल्पिक है, बस इसे छोड़ दें।
कॉलिन टी हार्ट

एक टैग एक एंकर है; इसके लिए लिंक नहीं होना चाहिए।
कॉलिन टी हार्ट

5

मैं स्पैन पर थोड़े सीएसएस का उपयोग करता हूं ताकि यह लिंक जैसा दिखे:

सीएसएस:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JavaScript:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

उपरोक्त 'url' फंक्शन पैरामीटर मुझे वास्तविक url के बजाय स्ट्रिंग "url" देता है
visrahane

आप वास्तविक URL को ShowWindow फ़ंक्शन में डालने वाले हैं। उदाहरण के लिए: जावास्क्रिप्ट: showWindow (' stackoverflow.com' );
tolsen64

मैं हार्ड कोड का उपयोग नहीं कर सकता हूं क्योंकि मैं इसे डोम का उपयोग करके बना रहा हूं और मेरे पास url पर कोई नियंत्रण नहीं है
visrahane

3

आपके जावास्क्रिप्ट को भी HTML से अलग करना चाहिए।
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

जावास्क्रिप्ट:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

बस सुनिश्चित करें कि ShowOld फ़ंक्शन की अंतिम पंक्ति है:

return false;

क्योंकि यह ब्राउज़र में लिंक को खोलने से रोक देगा।


hrefवैकल्पिक है, बस इसे छोड़ दें।
कॉलिन टी हार्ट

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">


8
सबसे अच्छा समाधान नहीं है क्योंकि यह पृष्ठ के शीर्ष पर कूद जाएगा।
एलेक्स मार्शल

#उपयोग के बजाय href के लिएhref="javascript:void(0)
नारायण

hrefवैकल्पिक है, बस इसे छोड़ दें।
कॉलिन टी हार्ट

1

hrefaतत्वों के लिए वैकल्पिक है ।

यह पूरी तरह से उपयोग करने के लिए पर्याप्त है

<a onclick="ShowOld(2367,146986,2)">link text</a>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.