我想在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");
}
函数不能被调用,除非它是在同一个文件中定义的,或者是在尝试调用它之前加载的。
除非函数与试图调用它的函数在相同或更大的作用域中,否则不能调用它。
你可以在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>
TLDR:首先加载全局函数文件,然后加载事件处理程序
无论何时你访问JS文件或<script>块中的元素,都必须检查以确保元素存在,即jQuery的$(document).ready()或纯JS的document。addEventListener (DOMContentLoaded”内,函数(事件)…
但是,在为DOMContentLoaded添加事件侦听器的情况下,已接受的解决方案不起作用,您可以从注释中轻松观察到这一点。
首先加载全局函数文件的步骤
解决方法如下:
分离JS脚本文件的逻辑,以便每个文件只包含事件监听器或全局的独立函数。
首先加载带有全局独立函数的JS脚本文件。
加载带有事件监听器的JS脚本文件。与前面的其他文件不同,请确保将代码包装在文档中。addEventListener('DOMContentLoaded',函数(事件){…})。或document.Ready()。