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

javascript html

2022-08-30 01:07:22

我想调用在第二.js文件的第一.js文件中定义的函数。这两个文件都在 HTML 文件中定义，如下所示：

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

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

这是我的代码：

second.js

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

first.js

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

答案 1

除非函数是在同一文件中定义的，或者在尝试调用函数之前加载了函数，否则无法调用该函数。

除非函数与尝试调用函数的函数处于相同或更大的范围内，否则无法调用该函数。

你首先声明函数.js，然后在第二个中，你可以有fn1fn1();

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>

答案 2

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

export function f1() {...}

然后在文件2中;

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

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

如果这样做，则不需要两个脚本标记。你只需要主脚本，你可以在那里导入所有其他的东西。