我想在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");
}
当前回答
您可以考虑使用es6导入导出语法。在文件1中;
export function f1() {...}
然后在文件2;
import { f1 } from "./file1.js";
f1();
请注意，这只适用于你使用<script src="./file2.js" type="module">
如果这样做，您将不需要两个脚本标记。您只需要主脚本，就可以导入所有其他内容。
其他回答
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
});
函数不能被调用，除非它是在同一个文件中定义的，或者是在尝试调用它之前加载的。
除非函数与试图调用它的函数在相同或更大的作用域中，否则不能调用它。
你可以在first.js中声明fn1函数，然后在second中你可以只声明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>
它应该像这样工作:
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代码片段:link。
这其实很晚了，但我想我应该分享一下，
在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()
请注意，这仅适用于
<script>
标签在身体而不是在头部。
So
<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>
的工作原理。
