2011-10-17 26 views
17

पर क्लिक करने के लिए कैसे लिंक करें जावास्क्रिप्ट फ़ाइल सार्वजनिक/स्क्रिप्ट/filename.js में है। मेरे पास टेम्पलेट/form.tmpl.html में टेम्पलेट फ़ाइल है। रूट फ़ोल्डर में सार्वजनिक और टेम्पलेट फ़ोल्डर्सबाहरी जावास्क्रिप्ट फ़ाइल को बटन

मैं जावास्क्रिप्ट फ़ाइल को form.tmpl.htm में एक बटन पर क्लिक करना चाहता हूं।

<button type="button" value="Submit" onClick="Call the external js file" > 

धन्यवाद

+3

आप "जावास्क्रिप्ट फ़ाइल को कॉल नहीं कर सकते"। यदि स्क्रिप्ट फ़ाइल पहले ही लोड हो चुकी है, तो आप "उस फ़ाइल में जावास्क्रिप्ट फ़ंक्शन को कॉल कर सकते हैं"। या, यदि स्क्रिप्ट फ़ाइल अभी तक लोड नहीं हुई है, तो आप "स्क्रिप्ट फ़ाइल लोड कर सकते हैं" या "स्क्रिप्ट फ़ाइल लोड कर सकते हैं और इसमें एक फ़ंक्शन कॉल कर सकते हैं"। आप इनमें से कौन सा करना चाहते हैं? – jfriend00

+1

"बाहरी जेएस फ़ाइल को कॉल करें" का मतलब यह नहीं है कि आप किसी जेएस फ़ाइल में फ़ंक्शन को कॉल कर सकते हैं लेकिन फ़ाइल को कॉल नहीं करते हैं। –

+0

तकनीकी रूप से बोलते हुए, उस डोमेन में एक जावास्क्रिप्ट फ़ाइल लोड करना जिसमें कुछ सरल कोड या स्वयं-निष्पादन फ़ंक्शन शामिल है, फ़ंक्शन को सीधे कॉल करने के बराबर है। एक बार एक समारोह को लोड करना और इसे आवश्यक आधार पर कॉल करना अधिक कुशल है। HTML इनलाइन करने के लिए जेएस फ़ंक्शन कॉल जोड़ना सामग्री और राज्य के बीच अलगाव को तोड़ देता है। सभी जेएस जेएस फाइलों के भीतर रखा जाना चाहिए। – zzzzBov

उत्तर

25

मैं ऊपर टिप्पणी के साथ सहमत हैं, कि तुम एक फ़ाइल कॉल नहीं कर सकते, लेकिन आप इस तरह एक जे एस फ़ाइल को लोड कर सकता है, मैं अनिश्चित हूँ अगर यह आपके सवाल का जवाब है, लेकिन यह मदद मिल सकती है ... ओह और मैं अपने उदाहरण में एक बटन के बजाय एक लिंक का उपयोग किया है ...

<a href='linkhref.html' id='mylink'>click me</a> 

<script type="text/javascript"> 

var myLink = document.getElementById('mylink'); 

myLink.onclick = function(){ 

    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "Public/Scripts/filename.js."; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    return false; 

} 


</script> 
+1

आप जेएस फ़ाइल में मौजूद फ़ंक्शन को कहां कॉल करते हैं? – HiTech

+2

कहां? क्या आपका मतलब है? यदि स्क्रिप्ट लोड हो जाती है तो आप लोड की गई स्क्रिप्ट के भीतर सामान्य रूप से फ़ंक्शन को कॉल कर सकते हैं। शायद आप एक और सवाल पूछना चाहते हैं? –

+1

मेरे प्रश्न को अनदेखा करें। मुझे एहसास नहीं हुआ कि यह मार्कअप में बुलाया जा रहा था। जवाब देने के लिए धन्यवाद! – HiTech

14

आप अपने बटन दिनचर्या आप filename.js में लिखा है आप के लिए है कॉल करने के लिए चाहते हैं filename.js संपादित करें ताकि आप जिस कोड को चलाने के लिए चाहते हैं वह फ़ंक्शन का शरीर है । आप एक फ़ंक्शन कॉल कर सकते हैं, एक स्रोत फ़ाइल नहीं।

(ए स्रोत फ़ाइल नहीं प्रवेश बिंदु है) यदि आपका filename.js की वर्तमान सामग्री है:

:

alert('Hello world');

आप के लिए इसे बदलने के लिए है

function functionName(){ 
 
\t alert('Hello world'); 
 
}

तो फिर तुम लाइन द्वारा अपने html पृष्ठ के शीर्षक में लोड करने के लिए filename.js है:

<head> 
 
\t <script type="text/javascript" src="Public/Scripts/filename.js"></script> 
 
</head>

ताकि आप कर सकते हैं कॉलसमारोह आपके बटन द्वारा filename.js में निहित है:

<button onclick="functionName()">Call the function</button>

मैं एक छोटे से काम कर रहे उदाहरण बना दिया है। एक साधारण HTML पृष्ठ उपयोगकर्ता को अपना नाम इनपुट करने के लिए कहता है, और जब वह बटन पर क्लिक करती है, तो सार्वजनिक/स्क्रिप्ट/filename.js के अंदर फ़ंक्शन को डालने वाली स्ट्रिंग को पैरामीटर के रूप में पास करने के लिए कहा जाता है ताकि एक पॉपअप कहता है "हैलो, < डाला गया > ! "। यहाँ

<html> 
 

 
\t <head> 
 
\t \t <script type="text/javascript" src="Public/Scripts/filename.js"></script> 
 
\t </head> 
 

 
\t <body> 
 
\t \t What's your name? <input id="insertedName" /> 
 
\t \t <button onclick="functionName(insertedName.value)">Say hello</button> 
 
\t </body> 
 

 
</html>

और सार्वजनिक/स्क्रिप्ट/फ़ाइल नाम है:

यहाँ बुला HTML पृष्ठ है।js

function functionName(s){ 
 
\t alert('Hello, ' + s + '!'); 
 
}

+0

क्षमा करें मुझे लगता है कि यह बदतर है। कोड अपेक्षित के रूप में नहीं चलाया जाता है, https://jsfiddle.net/ या एकाधिक फ़ाइलों के साथ कुछ उपयोग करें। इसके अलावा मुझे विश्वास है कि यह उत्तर का जवाब नहीं देता है। – partizanos

+1

इस विस्तृत उत्तर के लिए धन्यवाद। आप एक जीवन बचतकर्ता हैं। यह एकमात्र सही सीधी विधि है। – antikbd

+1

इससे मेरी मदद मिली। मैं इसे शरीर के भीतर लोड करने के बाद फ़ंक्शन को कॉल करने में सक्षम था, इसलिए इसे बाद में सिर में लोड नहीं किया जाना था। – mmurrietta

0

आप बस निम्नलिखित कर सकता है।

मान लें कि आपके पास रूट फ़ोल्डर में myscript.js नाम की जावास्क्रिप्ट फ़ाइल है। अपनी एचटीएमएल फाइल के अपने हेड टैग में अपनी जावास्क्रिप्ट स्रोत फ़ाइल का संदर्भ जोड़ें।

<script src="~/myscript.js"></script> 

जे एस फ़ाइल: (myscript.js)

function awesomeClick(){ 
    alert('awesome click triggered'); 
} 

एचटीएमएल

<button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button> 
4

यह पूरी तरह से संभव है, मैं माइक बचत का उदाहरण के आधार पर कुछ इसी तरह की थी। यही कारण है कि html पृष्ठ है और वहाँ एक ही फ़ोल्डर में एक बाहरी test.js फ़ाइल

example.html हो shoul:

<html> 
<button type="button" value="Submit" onclick="myclick()" > 
Click here~! 
<div id='mylink'></div> 
</button> 
<script type="text/javascript"> 
function myclick(){ 
    var myLink = document.getElementById('mylink'); 
    myLink.onclick = function(){ 
      var script = document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = "./test.js"; 
      document.getElementsByTagName("head")[0].appendChild(script); 
      return false; 
    } 
    document.getElementById('mylink').click(); 
} 
</script> 
</html> 

test.js:

alert('hello world') 
0

आप अपने सभी लिपियों लोड कर सकते हैं head टैग में, और जो भी आपकी स्क्रिप्ट फ़ंक्शन ब्रेसिज़ में कर रही है। लेकिन यदि आप स्क्रिप्ट के बाहर उन चर का उपयोग कर रहे हैं तो सुनिश्चित करें कि आप चर के दायरे को बदल दें।

1

.js फ़ाइल को पहले लोड करके और फिर फ़ंक्शन को ऑनक्लिक के माध्यम से कॉल करके, कम कोडिंग है और यह स्पष्ट रूप से स्पष्ट है कि क्या हो रहा है। हम जेएस फ़ाइल zipcodehelp.js पर कॉल करेंगे।

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Button to call JS function.</title> 
</head> 
<body> 
    <h1>Use Button to execute function in '.js' file.</h1> 
    <script type="text/javascript" src="zipcodehelp.js"></script> 
    <button onclick="ZipcodeHelp();">Get Zip Help!</button> 
</body> 
</html> 

और zipcodehelp.js की सामग्री है:

function ZipcodeHelp() { 
    alert("If Zipcode is missing in list at left, do: \n\n\ 
    1. Enter any zipcode and click Create Client. \n\ 
    2. Goto Zipcodes and create new zip code. \n\ 
    3. Edit this new client from the client list.\n\ 
    4. Select the new zipcode."); 
} 

आशा है कि मदद करता है! चीयर्स!

-Ken

0

आप समारोह में लिख सकते हैं सिर और जे एस फ़ाइल पथ के स्रोत के साथ एक स्क्रिप्ट तत्व जोड़ने के लिए गतिशील स्क्रिप्ट जोड़ना

+0

इस के माध्यम से पढ़ा है: https://stackoverflow.com/help/how-to-answer – mrtig

1

यह की तरह लगता है, यह असंभव है में एक समारोह के लिए कॉल करने के लिए एक बाहरी जेएस फ़ाइल (क्रोम संस्करण 63.0.3239.132 पर परीक्षण)। मैंने इसे कई तरीकों से करने की कोशिश की लेकिन यह नहीं कर सकता। मुझे ईवेंट श्रोता का उपयोग करना है।

संबंधित मुद्दे