我想调用一个在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是首先定义是否可以，但是根据我的测试，我没有找到任何方法。
这是我的代码：
second.js
document.getElementById("btn").onclick = function() {
fn1();
}
first.js
function fn1() {
alert("external fn clicked");
}
除非在同一文件中定义了该函数，或者在尝试调用该函数之前已加载了一个函数，否则无法调用该函数。
除非函数的范围与尝试调用该函数的范围相同或更大，否则不能调用该函数。
您先fn1在first.js中声明函数，然后在第二步就可以拥有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>
第一个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();
});
希望对您有所帮助。
您可以将函数设为全局变量，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." );
});
您可以考虑使用es6 import export语法。在文件1中；
export function f1() {...}
然后在文件2中；
import { f1 } from "./file1.js";
f1();
请注意，这仅在您使用时有效 <script src="./file2.js" type="module">
如果这样做，您将不需要两个脚本标签。您只需要主脚本，就可以将所有其他内容导入其中。
它应该像这样工作：
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。
请注意，仅当
<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>
作品。
如果服务器允许提高速度，请使用缓存。
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)
);
（可选）制作它的原型以使其更灵活。这样，如果您调用函数或要从多个文件中获取代码，则不必每次都定义文件。
first.js
function first() { alert("first"); }
Second.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");}
index.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>
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
window.fn1 = function fn1() {
alert("external fn clicked");
}
second.js
document.getElementById("btn").onclick = function() {
fn1();
}
包括这样
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
这实际上来得很晚，但我想我应该分享一下，
在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()
在创建函数时使用“ var”，然后可以从另一个文件访问它。确保两个文件都已很好地连接到您的项目，并且可以互相访问。
file_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");
输出=> Gobinda
希望这对有人有帮助，编码愉快！
我的想法是让两个JavaScript通过DOM调用函数。
做到这一点的方法很简单。我们只需要定义隐藏的js_ipc html标签。被呼叫者从隐藏的js_ipc标签注册了click之后，呼叫者可以调度click事件来触发被呼叫者。并且将参数保存在要传递的事件中。
什么时候需要使用上述方式？
有时，这两个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));
}
// 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的参考
我有同样的问题。我已经在jquery文档ready函数中定义了函数。
$(document).ready(function() {
function xyz()
{
//some code
}
});
我已经在另一个文件中调用了此函数xyz（）。这不起作用:)您必须在文档上方定义函数ready。
文章标签：html , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！