एक जावास्क्रिप्ट फ़ंक्शन को किसी अन्य js फ़ाइल में कॉल करना

Question

मैं दूसरी.js फ़ाइल में पहले .js फ़ाइल में परिभाषित फ़ंक्शन को कॉल करना चाहता था। दोनों फाइलें एक HTML फ़ाइल में परिभाषित की गई हैं:

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

मैं कॉल करना चाहते हैं fn1()में परिभाषित first.jsमें second.js। मेरी खोजों से उत्तर थे कि अगर first.jsपहले परिभाषित किया गया है तो यह संभव है लेकिन मेरे परीक्षणों से मुझे ऐसा करने का कोई तरीका नहीं मिला है।

यहाँ मेरा कोड है:

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

Comments

तो इसे कॉल करें, जब तक यह वैश्विक दायरे में है, तब तक कुछ खास नहीं है।

— epascarello

हम सभी प्रति दिन एक हजार बार ऐसा कर रहे हैं। यदि आप नहीं कर सकते हैं, तो आपके first.js के साथ एक समस्या होनी चाहिए: यह जांचें कि क्या यह आपके ब्राउज़र में लोड है, और यदि हाँ, तो इसे पार्स करते समय कोई सिंटैक्स त्रुटि हुई थी (दोनों को डेवलपर के टूलबार में देखा जा सकता है आपके ब्राउज़र की)

— ripliko

वह काम करना चाहिए। कृपया अपने प्रश्न को संपादित करके हमें बताएं कि क्रोम या फ़ायरफ़ॉक्स / फायरबग में जावास्क्रिप्ट कंसोल का उपयोग करने पर क्या होता है। (उम, और जांचें कि आपने फ़ंक्शन नाम को सही तरीके से लिखा है।)

— बॉब ब्राउन

यदि यह काम नहीं करता है, तो मुझे लगता है कि आप कुछ गलत कर रहे हैं। आपके प्रश्न की जानकारी को देखते हुए, यह असंभव है, हालांकि यह है।

— फेलिक्स क्लिंग सेप

वास्तविक कोड होना चाहिए।

— उपसंहारक

Answer 1

किसी फ़ंक्शन को तब तक नहीं बुलाया जा सकता जब तक कि उसे उसी फ़ाइल में परिभाषित न किया गया हो या उसे कॉल करने के प्रयास से पहले लोड नहीं किया गया हो।

किसी फ़ंक्शन को तब तक नहीं बुलाया जा सकता है जब तक कि वह समान या अधिक दायरे में न हो, तब उसे कॉल करने का प्रयास करने वाला व्यक्ति।

आप पहले fn1। Js में फ़ंक्शन की घोषणा करते हैं , और फिर दूसरे में आप बस कर सकते हैंfn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html:

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Comments

तो उत्पादन एप्लिकेशन में यह सब प्रबंधित करने का सबसे अच्छा तरीका क्या है?

— कोस्टा

यह मेरे लिए काम नहीं करता है। एक त्रुटि देता है कि fn1 () परिभाषित नहीं है

— Aayushi

यह मेरे लिए भी काम नहीं करता है। क्या कोई काम के अलावा jquery getcript का उपयोग करने के अलावा इसके बुरे अभ्यास का सुझाव है?

— वंडोल्फ रेयेस

अगर यह वास्तव में काम नहीं करता है, तो 82 वोटों के साथ यह स्वीकृत उत्तर क्यों है?

— डैनियल

यदि यह आपके लिए काम नहीं कर रहा है, तो संभावना है कि आप फ़ंक्शन को किसी और चीज़ के भीतर परिभाषित कर रहे हैं। उदाहरण के लिए, मेरे पास एक $(document).ready(function() {...})ब्लॉक के भीतर मेरा कार्य था , और यह काम नहीं किया। मैंने इसे स्थानांतरित किया और यह एक आकर्षण की तरह काम किया।

— माइकल ज़िलक

Answer 2

आप फ़ंक्शन को एक वैश्विक चर बना सकते हैं और इसे बंद करनेfirst.js पर एक नज़र डाल सकते हैं और इसे बाहर रखने में नहीं डालते हैंdocument.ready

आप अजाक्स का भी उपयोग कर सकते हैं

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

उसी तरह आप jquery getScript का उपयोग कर सकते हैं

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

Comments

शुरुआती लोग कभी भी ऐसा कुछ करने की कोशिश नहीं करते हैं। इन बुरी प्रथाओं से बचा जाना चाहिए। जब तक दोनों को वेब पेज द्वारा संदर्भित किया जाता है, हां। आप बस फ़ंक्शन को कॉल करते हैं जैसे कि वे उसी जेएस फ़ाइल में हैं।

— आनंद

एकमात्र मुद्दा यह है कि इसमें किसी कारण से हेडर शामिल नहीं है।

— Si8

Answer 3

पहला जेएस:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

दूसरा जेएस:

$.getscript("url or name of 1st Js File",function(){
fn();
});

आशा है कि यह मदद करता है ... हैप्पी कोडिंग।

Comments

मुझे लगता है कि आपका मतलब हैjQuery.getScript()

— Pmpr

Answer 4

आप es6 आयात निर्यात सिंटैक्स का उपयोग करने पर विचार कर सकते हैं। फ़ाइल 1 में;

export function f1() {...}

और फिर फ़ाइल 2 में;

import { f1 } from "./file1.js";
f1();

कृपया ध्यान दें कि यह केवल तभी काम करता है जब आप उपयोग कर रहे हों <script src="./file2.js" type="module">

यदि आप इसे इस तरह से करते हैं तो आपको दो स्क्रिप्ट टैग की आवश्यकता नहीं होगी। आपको बस मुख्य स्क्रिप्ट की आवश्यकता है, और आप अपने सभी अन्य सामानों को वहां आयात कर सकते हैं।

Comments

सफारी के साथ, मुझे मिलता हैcross-origin script load denied by cross-origin resource sharing policy

— काक्यो

पुराने ब्राउज़रों के साथ आप es6 आयात सिंटैक्स का उपयोग करने में सक्षम नहीं हो सकते हैं। यदि आप इसे आसान बनाते हैं तो आप बैबल का उपयोग कर सकते हैं।

— tm2josep

Answer 5

कुछ इस तरह से इसे काम करना चाहिए:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
} 

index.html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

उत्पादन

इस कोडपिप स्निपेट को आजमाएं: लिंक ।

Answer 6

कृपया ध्यान दें कि यह केवल काम करता है यदि

<script>

टैग शरीर में हैं और सिर में नहीं हैं।

इसलिए

<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>

=> अज्ञात फ़ंक्शन fn1 ()

विफल रहता है और

<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>

काम करता है।

Answer 7

कैश का उपयोग करें यदि आपका सर्वर इसे गति में सुधार करने की अनुमति देता है।

var extern =(url)=> {           // load extern javascript
    let scr = $.extend({}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return $.ajax(scr);
}
function ext(file, func) {
    extern(file).done(func);    // calls a function from an extern javascript file
}

और फिर इसे इस तरह उपयोग करें:

ext('somefile.js',()=>              
    myFunc(args)
);  

वैकल्पिक रूप से, इसे और अधिक लचीला बनाने के लिए इसका एक प्रोटोटाइप बनाएं। ताकि आपको हर बार फ़ाइल को परिभाषित न करना पड़े, यदि आप किसी फ़ंक्शन को कॉल करते हैं या यदि आप कई फ़ाइलों से कोड प्राप्त करना चाहते हैं।

Answer 8

first.js

function first() { alert("first"); }

Second.js

var imported = document.createElement("script");
imported.src = "other js/first.js";  //saved in "other js" folder
document.getElementsByTagName("head")[0].appendChild(imported);


function second() { alert("Second");}

index.html

 <HTML>
    <HEAD>
       <SCRIPT SRC="second.js"></SCRIPT>
    </HEAD>
    <BODY>
       <a href="javascript:second()">method in second js</a><br/>
       <a href="javascript:first()">method in firstjs ("included" by the first)</a>
    </BODY>
</HTML>

Answer 9

window.onload = function(){
    document.getElementById("btn").onclick = function(){
        fn1();
    }
   // this should work, It calls when all js files loaded, No matter what position you have written
});

Comments

यद्यपि आपका कोड स्निपेट समस्या को हल कर सकता है, आपको यह वर्णन करना चाहिए कि आपके कोड का उद्देश्य क्या है (यह समस्या को कैसे हल करता है)। इसके अलावा, आप stackoverflow.com/help/how-to-answer

— Ahmad F

Answer 10

खिड़की के साथ वैश्विक दायरे में समारोह की घोषणा

first.js

window.fn1 = function fn1() {
    alert("external fn clicked");
}

second.js

document.getElementById("btn").onclick = function() {
   fn1();
}

इस तरह शामिल करें

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Answer 11

यह वास्तव में बहुत देर से आ रहा है, लेकिन मुझे लगा कि मुझे साझा करना चाहिए,

index.html में

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

1.js में

fn1 = function() {
    alert("external fn clicked");
}

2.js में

fn1()

Comments

कृपया प्रश्न के नीचे ओपी की टिप्पणी देखें: "... मैं केवल एक ही स्थान के साथ गलत स्थान पर स्थित एक फ़ाइल [] के साथ प्रयोग कर रहा था ..."।

— traktor53

Answer 12

फ़ंक्शन बनाते समय "var" का उपयोग करें, फिर आप उसे किसी अन्य फ़ाइल से एक्सेस कर सकते हैं। सुनिश्चित करें कि दोनों फाइलें आपके प्रोजेक्ट से अच्छी तरह से जुड़ी हुई हैं और एक दूसरे तक पहुंच सकती हैं।

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

इस फंक्शन / वैरिएबल फॉर्म को एक्सेस करना file_2.js फाइल

firstLetterUppercase("gobinda");

आउटपुट => गोबिंदा

उम्मीद है कि यह किसी की मदद करेगा, खुश कोडिंग !!!

Answer 13

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

https://hype.codes/how-include-js-file-another-js-file से संदर्भ

Answer 14

मुझे भी यही समस्या हुई है। मैंने jquery दस्तावेज़ तैयार फ़ंक्शन के अंदर फ़ंक्शन को परिभाषित किया है ।

$(document).ready(function() {
   function xyz()
   {
       //some code
   }
});

और यह फ़ंक्शन xyz () मैंने दूसरी फाइल में बुलाया है। यह काम नहीं करता है :) आपको तैयार दस्तावेज़ के ऊपर फ़ंक्शन को परिभाषित करना होगा ।