我想在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中把这个函数设置为全局变量 看一下闭包,不要把它放在文档里。准备好了,放到外面

你也可以使用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." );
});

其他回答

函数不能被调用,除非它是在同一个文件中定义的,或者是在尝试调用它之前加载的。

除非函数与试图调用它的函数在相同或更大的作用域中,否则不能调用它。

你可以在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>

你可以在first.js中把这个函数设置为全局变量 看一下闭包,不要把它放在文档里。准备好了,放到外面

你也可以使用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." );
});

请注意,这仅适用于

<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>

的工作原理。

使用window在全局作用域声明函数

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>
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
});