我想在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");
}
当前回答
我的想法是让两个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/被叫方.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));
}
其他回答
JS 1:
function fn(){
alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}
JS 2:
$.getscript("url or name of 1st Js File",function(){
fn();
});
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
});
请注意，这仅适用于
<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>
的工作原理。
TLDR:首先加载全局函数文件，然后加载事件处理程序
无论何时你访问JS文件或<script>块中的元素，都必须检查以确保元素存在，即jQuery的$(document).ready()或纯JS的document。addEventListener (DOMContentLoaded”内,函数(事件)…
但是，在为DOMContentLoaded添加事件侦听器的情况下，已接受的解决方案不起作用，您可以从注释中轻松观察到这一点。
首先加载全局函数文件的步骤
解决方法如下:
分离JS脚本文件的逻辑，以便每个文件只包含事件监听器或全局的独立函数。 首先加载带有全局独立函数的JS脚本文件。 加载带有事件监听器的JS脚本文件。与前面的其他文件不同，请确保将代码包装在文档中。addEventListener('DOMContentLoaded'，函数(事件){…})。或document.Ready()。
它应该像这样工作:
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。
