在另一个js文件中调用javascript函数
m0j*_*0j1 114 html javascript
我想调用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");
}
小智 138
除非在同一文件中定义了函数或在尝试调用它之前加载了函数,否则无法调用该函数.
除非函数与尝试调用它的范围相同或更大,否则无法调用函数.
你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>
- 如果这不适合您,您可能会在其他内容中定义该功能.例如,我在`$(document).ready(function(){...})`块中使用了我的函数,它没有用.我移动它,它就像一个魅力. (18认同)
- 这对我不起作用.给出了未定义fn1()的错误 (14认同)
- 如果它没有真正起作用,为什么这是82票的公认答案？ (11认同)
- 这对我也不起作用.是否有任何解决方法除了使用jquery getscript作为一个不好的做法？ (10认同)
- 那么在生产应用程序中管理所有这些的最佳方法是什么？ (3认同)
- @Daniel - 如果它不起作用,你在编码中的某个地方犯了一个错误.这和明天太阳升起一样可靠. (3认同)
Gil*_*mbo 23
你可以将函数作为一个全局变量,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." );
});
- 初学者从不尝试做这样的事情.这些是要避免的不良做法.只要两者都被网页引用,是的.您只需调用函数,就好像它们位于同一个JS文件中一样. (5认同)
- 谢谢.这对我来说可以.我有个主意 (2认同)
tm2*_*sep 21
您可以考虑使用 es6 导入导出语法。在文件 1 中；
export function f1() {...}
然后在文件 2 中；
import { f1 } from "./file1.js";
f1();
请注意，这仅在您使用时有效 <script src="./file2.js" type="module">
如果您这样做，您将不需要两个脚本标签。您只需要主脚本，然后就可以在那里导入所有其他内容。
- 使用 Safari，我收到“跨域资源共享策略拒绝跨域脚本加载” (4认同)
小智 21
使用 window 在全局范围内声明函数
首先.js
window.fn1 = function fn1() {
alert("external fn clicked");
}
第二个.js
document.getElementById("btn").onclick = function() {
fn1();
}
包括这样
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
小智 19
第一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();
});
希望这有助于......快乐的编码.
- 我想你的意思是`jQuery.getScript()` (6认同)
- @Pmpr，美元符号是“jQuery”的简写。 (4认同)
iNa*_*ndi 11
在创建函数时使用“var”，然后您可以从另一个文件访问该函数。确保这两个文件都与您的项目良好连接并且可以相互访问。
文件_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");
输出 => 哥宾达
它应该像这样工作：
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。
小智 5
请注意，这仅适用于
<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>
作品。
小智 5
这实际上来得很晚，但我想我应该分享，
在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()