blocks|key|1670685|text|您可以在first.js中将函数设置为全局变量，并查看closure，而不是将其放入document.ready中，而是将其放在外部|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1670686|您也可以使用ajax|1670687|++++$.ajax({
++++++url:+"url+to+script",
++++++dataType:+"script",
++++++success:+success
++++});|code-block|syntax|javascript|1670688|与使用jquery+getScript的方式相同|1670689|$.getScript(+"ajax/test.js"+)
++.done(function(+script,+textStatus+)+{
++++console.log(+textStatus+);
++})
++.fail(function(+jqxhr,+settings,+exception+)+{
++++$(+"div.log"+).text(+"Triggered+ajaxError+handler."+);
});|1670690|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures|1|http://api.jquery.com/jquery.getscript/^0|4|8|16|E|R|7|0|0|0|0|3|G|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>You can make the function a global variable in <code>first.js</code>
and have a look at <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures" rel="noreferrer">closure</a>  and do not put it in <code>document.ready</code> put it outside</p>

<p>you can use ajax too</p>

<pre><code>    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });
</code></pre>

<p>same way you can use <a href="http://api.jquery.com/jquery.getscript/" rel="noreferrer">jquery getScript</a></p>

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


blocks|key|1884829|text|第一个JS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1884830|function+fn(){
+++alert("Hello!+Uncle+Namaste...Chalo+Kaaam+ki+Baat+p+Aate+h...");
}|code-block|syntax|javascript|1884831|1884832|$.getscript("url+or+name+of+1st+Js+File",function(){
fn();
});|1884833|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>1st JS:</p>
<pre><code>function fn(){
   alert(&quot;Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...&quot;);
}
</code></pre>
<p>2nd JS:</p>
<pre><code>$.getscript(&quot;url or name of 1st Js File&quot;,function(){
fn();
});
</code></pre>


blocks|key|1671086|text|如果您的服务器允许使用缓存来提高速度，请使用缓存。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671087|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
}|code-block|syntax|javascript|1671088|然后像这样使用它：|1671089|ext('somefile.js',()=>++++++++++++++
++++myFunc(args)
);++|1671090|或者，制作一个原型以使其更灵活。因此，如果您调用一个函数或希望从多个文件中提取代码，则不必每次都定义文件。|1671091|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use cache if your server allows it to improve speed. </p>

<pre><code>var extern =(url)=&gt; {           // 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
}
</code></pre>

<p>And then use it like this:</p>

<pre><code>ext('somefile.js',()=&gt;              
    myFunc(args)
);  
</code></pre>

<p>Optionally, make a prototype of it to have it more flexible. So that you don't have to define the file every time, if you call a function or if you want to fetch code from multiple files.</p>


blocks|key|1671099|text|first.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671100|function+first()+{+alert("first");+}|code-block|syntax|javascript|1671101|Second.js|1671102|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");}|1671103|index.html|1671104|+<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>|1671105|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<h2>first.js</h2>

<pre><code>function first() { alert("first"); }
</code></pre>

<h2>Second.js</h2>

<pre><code>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");}
</code></pre>

<h2>index.html</h2>

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


blocks|key|1671118|text|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
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1671119|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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
});
</code></pre>


blocks|key|1671152|text|请注意，这仅在以下情况下有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671153|<script>|code-block|syntax|javascript|1671154|标签在主体中，而不是在头部。|1671155|所以|1671156|<head>
...
<script+type="text/javascript"+src="first.js"></script>
<script+type="text/javascript"+src="second.js"></script>
</head>|1671157|=>未知函数fn1()|1671158|失败和|1671159|<body>
...
<script+type="text/javascript"+src="first.js"></script>
<script+type="text/javascript"+src="second.js"></script>
</body>|1671160|很管用。|1671161|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Please note this only works if the </p>

<pre><code>&lt;script&gt;
</code></pre>

<p>tags are in the body and NOT in the head.</p>

<p>So </p>

<pre><code>&lt;head&gt;
...
&lt;script type="text/javascript" src="first.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="second.js"&gt;&lt;/script&gt;
&lt;/head&gt;
</code></pre>

<p>=> unknown function fn1()</p>

<p>Fails and  </p>

<pre><code>&lt;body&gt;
...
&lt;script type="text/javascript" src="first.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="second.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>works.</p>


blocks|key|1671244|text|我也遇到过同样的问题。我已经在jquery文档就绪函数中定义了函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671245|$(document).ready(function()+{
+++function+xyz()
+++{
+++++++//some+code
+++}
});|code-block|syntax|javascript|1671246|我在另一个文件中调用了这个函数xyz()。这不起作用:)你必须在文档上定义好函数。|1671247|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I have had same problem. I have had defined functions inside jquery <em>document ready</em> function.</p>

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

<p>And this function <em>xyz()</em> I have called in another file. This doesn't working :) You have to defined function above <em>document ready</em>.</p>


blocks|key|1671252|text|//+module.js
export+function+hello()+{
++return+"Hello";
}

//+main.js
import+{hello}+from+'module';+//+or+'./module'
let+val+=+hello();+//+val+is+"Hello";|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1671253|来自https://hype.codes/how-include-js-file-another-js-file的引用|unstyled|offset|length|1671254|entityMap|0|LINK|mutability|MUTABLE|url|https://hype.codes/how-include-js-file-another-js-file^0|0|2|1I|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>// module.js
export function hello() {
  return "Hello";
}

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

<p>reference from <a href="https://hype.codes/how-include-js-file-another-js-file" rel="nofollow noreferrer">https://hype.codes/how-include-js-file-another-js-file</a></p>


blocks|key|1885085|text|这实际上来得太晚了，但我想我应该分享一下，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1885086|在index.html中|1885087|<script+type="text/javascript"+src="1.js"></script>
<script+type="text/javascript"+src="2.js"></script>|code-block|syntax|javascript|1885088|在1.js中|1885089|fn1+=+function()+{
++++alert("external+fn+clicked");
}|1885090|在2.js中|1885091|fn1()|1885092|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This is actually coming very late, but I thought I should share,</p>

<p>in index.html</p>

<pre><code>&lt;script type="text/javascript" src="1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="2.js"&gt;&lt;/script&gt;
</code></pre>

<p>in 1.js</p>

<pre><code>fn1 = function() {
    alert("external fn clicked");
}
</code></pre>

<p>in 2.js</p>

<pre><code>fn1()
</code></pre>


blocks|key|1885124|text|您可以考虑使用es6+import+export语法。在文件1中；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1885125|export+function+f1()+{...}|code-block|syntax|javascript|1885126|然后在文件2中；|1885127|import+{+f1+}+from+"./file1.js";
f1();|1885128|请注意，这仅在您使用<script+src="./file2.js"+type="module">时有效|offset|length|style|CODE|1885129|如果这样做，您将不需要两个脚本标记。您只需要主脚本，您可以将所有其他内容导入到那里。|1885130|entityMap^0|0|0|0|0|A|13|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>You could consider using the es6 import export syntax. In file 1;</p>

<pre><code>export function f1() {...}
</code></pre>

<p>And then in file 2;</p>

<pre><code>import { f1 } from "./file1.js";
f1();
</code></pre>

<p>Please  note that this only works if you're using <code>&lt;script src="./file2.js" type="module"&gt;</code></p>

<p>You will not need two script tags if you do it this way. You simply need the main script, and you can import all your other stuff there.</p>


blocks|key|1671640|text|晚做总比不做强|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671641|(function+(window)+{const+helper+=+{+fetchApi:+function+()+{+return+"oke"}
+++if+(typeof+define+===+'function'+&&+define.amd)+{
++++define(function+()+{+return+helper;+});
+++}
+++else+if+(typeof+module+===+'object'+&&+module.exports)+{
++++module.exports+=+helper;
++}
++else+{
++++window.helper+=+helper;
++}
}(window))|code-block|syntax|javascript|1671642|索引html+<script+src="helper.js"></script>+<script+src="test.js"></script>|offset|length|style|CODE|1671643|在test.js文件helper.fetchApi()中|1671644|entityMap^0|0|0|7|X|15|V|0|A|H|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

<p><em>better late than never</em></p>
<pre><code>(function (window) {const helper = { fetchApi: function () { return &quot;oke&quot;}
   if (typeof define === 'function' &amp;&amp; define.amd) {
    define(function () { return helper; });
   }
   else if (typeof module === 'object' &amp;&amp; module.exports) {
    module.exports = helper;
  }
  else {
    window.helper = helper;
  }
}(window))
</code></pre>
<p>index html
<code>&lt;script src=&quot;helper.js&quot;&gt;&lt;/script&gt;</code>
<code>&lt;script src=&quot;test.js&quot;&gt;&lt;/script&gt;</code></p>
<p>in test.js file
<code>helper.fetchApi()</code></p>


<p>I wanted to call a function defined in a <em>first.js</em> file in <em>second.js</em> file. Both files are defined in an HTML file like:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;first.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;second.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>I want to call <code>fn1()</code> defined in <code>first.js</code> in <code>second.js</code>. From my searches answers were if <code>first.js</code> is defined first it is possible, but from my tests I haven't found any way to do that.</p>
<p>Here is my code:</p>
<p><code>second.js</code></p>
<pre><code>document.getElementById(&quot;btn&quot;).onclick = function() {
    fn1();
}
</code></pre>
<p><code>first.js</code></p>
<pre><code>function fn1() {
    alert(&quot;external fn clicked&quot;);
}
</code></pre>


Calling a JavaScript function in another js file

服务器

我想在second.js文件中调用在first.js文件中定义的函数。这两个文件都在HTML文件中定义，如下所示：<script type="text/javascript" src="first.js"></script><script type="text/javascript" src="second.js"><...

问在另一个js文件中调用JavaScript函数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在另一个js文件中调用JavaScript函数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在另一个js文件中调用JavaScript函数
EN