在另一个 js 文件中调用 JavaScript 函数答案

【问题标题】：Calling a JavaScript function in another js file在另一个 js 文件中调用 JavaScript 函数
【发布时间】：2014-11-15 18:18:14
【问题描述】：

我想在 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()。从我的搜索结果来看，如果首先定义 first.js 是可能的，但从我的测试中我还没有找到任何方法来做到这一点。

这是我的代码：

second.js

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

first.js

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

【问题讨论】：

这么称呼吧，只要在全局范围内就没什么特别的了。
它应该可以工作 - stackoverflow.com/questions/3809862/…
应该可以。请编辑您的问题，告诉我们在 Chrome 或 Firefox/Firebug 中使用 JavaScript 控制台运行此程序时会发生什么。（嗯，并检查您是否正确拼写了函数名称。）
如果它不起作用，我猜你做错了什么。鉴于您问题中的信息，它是不可能的。
应该是实际代码。

标签： javascript html

【解决方案1】：

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

一个函数不能被调用，除非它与试图调用它的作用域相同或更大。

您在 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>

【讨论】：

那么在生产应用程序中管理所有这些的最佳方式是什么？
这对我不起作用。给出未定义 fn1() 的错误
这对我也不起作用。除了使用 jquery getscript 作为一种不好的做法之外，还有其他解决方法吗？
如果它实际上不起作用，为什么这是 82 票的公认答案？
如果这对您不起作用，您很可能在其他东西中定义了该功能。例如，我在 $(document).ready(function() {...}) 块中使用了我的函数，但它不起作用。我移动了它，它就像一个魅力。

【解决方案2】：

第一个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();
});

【讨论】：

我想你的意思是jQuery.getScript()
@Pmpr，美元符号是jQuery的简写。
为什么我在打字稿中遇到 fn 未知的错误？

【解决方案3】：

您可以在first.js 中将函数设为全局变量看看closure，不要放在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 文件中一样调用这些函数。
唯一的问题是，由于某种原因，它不包含标题。

【解决方案4】：

您可以考虑使用 es6 import export 语法。在文件 1 中；

export function f1() {...}

然后在文件2中；

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

请注意，这仅适用于您使用<script src="./file2.js" type="module">

如果你这样做，你将不需要两个脚本标签。您只需要主脚本，就可以在其中导入所有其他内容。

【讨论】：

使用 Safari，我得到 cross-origin script load denied by cross-origin resource sharing policy
对于旧版浏览器，您可能无法使用 es6 导入语法。如果 Babel 对你来说更容易，你可以使用它。
如何（导出和）导入file1.js的全部内容？

【解决方案5】：

在创建函数时使用“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");

输出 => 哥宾达

【讨论】：

【解决方案6】：

用窗口在全局范围内声明函数

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>

【讨论】：

这是推荐的吗？如果我有 1000 个函数呢？我想要做的是有一个 JavaScript 文件来保存所有事件侦听器。但是要完成这项工作，我必须按照您的建议在全局范围内声明每个函数。这不会减慢速度吗？

【解决方案7】：

它应该像这样工作：

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>

输出

试试这个 CodePen sn-p：link。

【讨论】：

【解决方案8】：

请注意，这只适用于

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

有效。

【讨论】：

【解决方案9】：

如果您的服务器允许它提高速度，请使用缓存。

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

（可选）制作它的原型以使其更灵活。这样你就不必每次都定义文件，如果你调用一个函数或者你想从多个文件中获取代码。

【讨论】：

【解决方案10】：

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>

【讨论】：

【解决方案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()

【讨论】：

请参阅 OP 在问题下的评论：“...我只是在试验 [with] 一个位于错误位置的同名文件...”。

【解决方案12】：

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

【讨论】：

虽然您的代码 sn-p 可能会解决问题，但您应该描述您的代码的目的是什么（它如何解决问题）。此外，您可能需要检查stackoverflow.com/help/how-to-answer

【解决方案13】：

我也遇到了同样的问题。我已经在 jquery document ready 函数中定义了函数。

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

这个函数xyz()我已经在另一个文件中调用了。这不起作用 :) 您必须在 document ready 之上定义函数。

【讨论】：

这被否决了，但我遇到了同样的问题。我的解决方案是将函数从 $(document).ready() 函数中取出。

【解决方案14】：

// 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的参考

【讨论】：

【解决方案15】：

我的想法是让两个JavaScript通过DOM调用函数。

方法很简单... 我们只需要定义隐藏的 js_ipc html 标签。被调用者注册后点击隐藏的js_ipc标签，然后调用者可以调度点击事件来触发被调用者。并且参数保存在您想要传递的事件中。

什么时候需要使用上述方式？

有时，这两个 javascript 代码集成起来非常复杂，并且有很多异步代码。不同的代码使用不同的框架，但您仍然需要有一种简单的方法将它们集成在一起。

所以，在那种情况下，要做到这一点并不容易。

在我的项目实现中，遇到了这种情况，集成起来很复杂。最后我发现我们可以让两个javascript通过DOM互相调用。

我在这个 git 代码中演示了这种方式。你可以通过这种方式得到它。（或从https://github.com/milochen0418/javascript-ipc-demo阅读）

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Anywhere，在这里，我尝试通过以下简单的案例来解释。我希望这种方式可以帮助您比以前更容易集成两个不同的 javascript 代码，因为没有任何 JavaScript 库来支持不同团队制作的两个 javascript 文件之间的通信。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

还有代码 css/style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js/caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js/callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}

【讨论】：

【解决方案16】：

迟到总比没有好

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

索引 html <script src="helper.js"></script> <script src="test.js"></script>

在 test.js 文件中 helper.fetchApi()

【讨论】：