在另一个js文件中调用一个javascript函数

我想调用second.js文件中的first.js文件中定义的函数。 这两个文件在HTML文件中定义如下:

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

我想调用second.js中first.js中定义的fn1()。 从我的search答案是,如果first.js首先定义是可能的,但从我的testing,我还没有find任何方式来做到这一点。 谢谢

编辑:
这里是示例代码:
second.js

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

first.js

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

一个函数不能被调用,除非它被定义在同一个文件中,或者在尝试调用它之前被加载。

一个函数不能被调用,除非它处于与调用它相同或更大的范围内。

你在first.js中声明函数fn1,然后你可以只有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> 

它工作正常:)

你可以在first.js把这个函数变成一个全局variables,看看闭包 ,不要把它放在document.ready

你也可以使用ajax

  $.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." ); }); 

第一JS:

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

第二JS:

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

希望这有助于…快乐编码。

如果您的服务器允许它提高速度,请使用caching。

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

或者,制作一个原型,让它更加灵活。 所以你不必每次定义文件,如果你调用一个函数,或者你想从多个文件中获取代码。

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>