在另一个js文件中调用一个JavaScript function

Question

我想在 second.js 文件中调用在first.js文件中定义的function 。 这两个文件都在 HTML 文件中定义，例如：

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

我想在first.js中调用 first.js 中定义的second.js fn1() 。 根据我的搜索答案，如果首先定义first.js是可能的，但根据我的测试，我还没有找到任何方法来做到这一点。

这是我的代码：

second.js

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

first.js

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

Answer 1

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

一个函数不能被调用，除非它在与试图调用它的那个相同或更大的范围内。

你在 first.js 中声明函数fn1 ，然后在第二个你可以只拥有fn1();

1.js：

function fn1 () {
    alert();
}

2.js：

fn1();

索引.html：

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

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

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

Answer 3

您可以在first.js将该函数first.js全局变量并查看闭包，不要将其放在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." );
});

Answer 4

您可以考虑使用 es6 导入导出语法。 在文件 1 中；

export function f1() {...}

然后在文件 2 中；

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

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

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

Answer 5

它应该像这样工作：

1.js

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

2.js

function clickedTheButton() {
  fn1();
}

索引.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 片段：链接。

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

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

第一个.js

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

第二个.js

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

包括这样

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

Answer 8

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

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 9

第一个.js

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

第二个.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");}

索引.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 10

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

Answer 11

在创建函数时使用“var”，然后您可以从另一个文件访问它。 确保这两个文件都很好地连接到您的项目并且可以相互访问。

文件_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 12

这实际上来得很晚，但我想我应该分享，

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

Answer 13

我的想法是让两个 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

任何地方，在这里，我尝试通过以下简单案例进行解释。 我希望这种方式可以帮助您比以前更容易地集成两个不同的 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));
}

Answer 14

我想调用一个在second.js文件中的first.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定义了first.js是可能的，但是根据我的测试，我还没有找到实现此目的的任何方法。

这是我的代码：

second.js

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

first.js

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

Answer 15

迟到总比不到好

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

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

在 test.js 文件helper.fetchApi()

Answer 16

我有同样的问题。 我已经在 jquery文档就绪函数中定义了函数。

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

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

Answer 17

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

TLDR：首先加载全局 Function 文件，然后加载事件处理程序

每当您访问 JS 文件或<script>块中的元素时，必须检查以确保该元素存在，即 jQuery 的$(document).ready()或普通 JS 的document.addEventListener('DOMContentLoaded', function(event)...

但是，如果您为 DOMContentLoaded 添加事件侦听器，则公认的解决方案不起作用，您可以从评论中轻松观察到这一点。

先加载全局Function文件的步骤

解决方法如下：

分离 JS 脚本文件的逻辑，使每个文件仅包含事件侦听器或全局独立函数。
首先加载具有全局独立函数的 JS 脚本文件。
其次加载带有事件侦听器的 JS 脚本文件。 与之前的其他文件不同，请确保将您的代码包装在document.addEventListener('DOMContentLoaded', function(event) {...})中。 或document.Ready() 。

在另一个js文件中调用一个JavaScript function

问题描述

17 个解决方案

解决方案1
197 已采纳 2014-09-21 19:26:43

解决方案2
27 2015-01-19 06:57:04

解决方案3
26 2014-09-21 19:22:23

解决方案4
20 2019-09-29 04:43:00

解决方案5
7 2018-09-17 14:54:10

解决方案6
5 2018-12-21 21:03:20

解决方案7
4 2019-10-06 13:48:22

解决方案8
3 2016-11-02 14:46:28

解决方案9
3 2017-10-23 02:31:08

第一个.js

第二个.js

索引.html

解决方案10
2 2018-03-14 10:40:54

解决方案11
2 2020-05-11 21:48:51

解决方案12
1 2019-09-28 22:18:02

解决方案13
0 2020-10-20 17:12:14

解决方案14
0 2020-12-14 12:47:23

解决方案15
0 2021-05-28 06:37:26

解决方案16
-1 2019-04-03 14:00:11

解决方案17
-1 2019-06-28 07:27:36

解决方案18
-1 2022-12-08 20:14:30

TLDR：首先加载全局 Function 文件，然后加载事件处理程序

先加载全局Function文件的步骤

在另一个js文件中调用一个JavaScript function

问题描述

17 个解决方案

解决方案1 197 已采纳 2014-09-21 19:26:43

解决方案2 27 2015-01-19 06:57:04

解决方案3 26 2014-09-21 19:22:23

解决方案4 20 2019-09-29 04:43:00

解决方案5 7 2018-09-17 14:54:10

解决方案6 5 2018-12-21 21:03:20

解决方案7 4 2019-10-06 13:48:22

解决方案8 3 2016-11-02 14:46:28

解决方案9 3 2017-10-23 02:31:08

第一个.js

第二个.js

索引.html

解决方案10 2 2018-03-14 10:40:54

解决方案11 2 2020-05-11 21:48:51

解决方案12 1 2019-09-28 22:18:02

解决方案13 0 2020-10-20 17:12:14

解决方案14 0 2020-12-14 12:47:23

解决方案15 0 2021-05-28 06:37:26

解决方案16 -1 2019-04-03 14:00:11

解决方案17 -1 2019-06-28 07:27:36

解决方案18 -1 2022-12-08 20:14:30

TLDR：首先加载全局 Function 文件，然后加载事件处理程序

先加载全局Function文件的步骤

解决方案1
197 已采纳 2014-09-21 19:26:43

解决方案2
27 2015-01-19 06:57:04

解决方案3
26 2014-09-21 19:22:23

解决方案4
20 2019-09-29 04:43:00

解决方案5
7 2018-09-17 14:54:10

解决方案6
5 2018-12-21 21:03:20

解决方案7
4 2019-10-06 13:48:22

解决方案8
3 2016-11-02 14:46:28

解决方案9
3 2017-10-23 02:31:08

解决方案10
2 2018-03-14 10:40:54

解决方案11
2 2020-05-11 21:48:51

解决方案12
1 2019-09-28 22:18:02

解决方案13
0 2020-10-20 17:12:14

解决方案14
0 2020-12-14 12:47:23

解决方案15
0 2021-05-28 06:37:26

解决方案16
-1 2019-04-03 14:00:11

解决方案17
-1 2019-06-28 07:27:36

解决方案18
-1 2022-12-08 20:14:30