在另一个js文件中调用JavaScript函数

140

我想调用在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");
}
javascript  html 
— 00
source
6
因此，只要它在全球范围内，就没有什么特别的。
— epascarello 2014年
1
我们每天都做一千次。如果不能，那么first.js肯定有问题：检查是否将它完全加载到浏览器中；如果是，则在解析它时是否存在语法错误（都可以在开发人员的工具栏中看到）您的浏览器）
— rplantiko
2
那应该工作。请编辑您的问题，以告诉我们在Chrome或Firefox / Firebug中使用JavaScript控制台运行此代码时会发生什么。（嗯，请检查您是否正确拼写了函数名。）
— Bob Brown
2
如果不起作用，我想您做错了什么。给定您问题中的信息，尽管如此是不可能的。
— Felix Kling 2014年
2
应该是实际代码。
— epascarello 2014年

Answers:

163

除非在同一个文件中定义了该函数，或者在尝试调用该函数之前已加载了一个函数，否则无法调用该函数。

除非函数的范围与尝试调用该函数的范围相同或更大，否则不能调用该函数。

您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>
— 费尔南多·门德斯
source
4
那么，在生产应用程序中管理所有这些的最佳方法是什么？
— 哥斯达黎加
18
这对我不起作用。给出未定义fn1（）的错误
— Aayushi
10
这对我也不起作用。除了使用jquery getscript作为建议的不良做法以外，是否有其他解决方法？
— Vandolph Reyes
14
如果这真的行不通，为什么会以82票被接受呢？
— 丹尼尔（Daniel）
26
如果这对您不起作用，则可能是您在其他地方定义了该功能。例如，我将我的函数放在一个代码$(document).ready(function() {...})块中，但没有起作用。我移动了它，它就像一个魅力。
— Michael Ziluck
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." );
});
— 吉尔达斯·坦博
source
7
初学者从不尝试做这样的事情。这些是要避免的不良做法。只要两者都被网页引用，是的。您只需简单地调用函数，就好像它们在同一JS文件中一样。
— 阿南达
唯一的问题是，由于某种原因，它不包含标题。
— 2013年
21

第一个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();
});

希望对您有所帮助。

— Akshay Tyagi
source
2
我认为您的意思是jQuery.getScript()
— Pmpr
16

您可以考虑使用es6 import export语法。在文件1中；

export function f1() {...}

然后在文件2中；

import { f1 } from "./file1.js";
f1();

请注意，这仅在您使用时有效 <script src="./file2.js" type="module">

如果这样做，您将不需要两个脚本标签。您只需要主脚本，就可以将所有其他内容导入其中。

— tm2josep
source
使用Safari，我会cross-origin script load denied by cross-origin resource sharing policy
— kakyo
在较旧的浏览器中，您可能无法使用es6导入语法。如果您方便使用Babel，则可以使用。
— tm2josep
5

它应该像这样工作：

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。

— 康斯塔·戈根（Consta Gorgan）
source
4

请注意，仅当 

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

作品。

— 用户名
source
3

如果服务器允许提高速度，请使用缓存。 

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

（可选）制作它的原型，使其更灵活。这样，如果您调用函数或要从多个文件中获取代码，则不必每次都定义文件。

— 恶毒的
source
3

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>
— 阿夫萨尔
source
2 
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
});
— phpnerd
source
尽管您的代码段可能会解决问题，但是您应该描述代码的目的（它如何解决问题）。此外，您可能想检查一下stackoverflow.com/help/how-to-answer
— Ahmad F
2

在带有窗口的全局范围内声明函数

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>
— Taoufiqaitali
source
1

这实际上来得很晚，但是我想我应该分享一下，

在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()
— 伊沙格·优素福（Ishaq Yusuf）
source
请在以下问题下查看OP的评论：“ ...我只是在尝试使用错误名称相同名称的文件...”。
— traktor53
1

在创建函数时使用“ 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

希望这对有人有帮助，编码愉快！

— 伊南迪
source
-2

我有同样的问题。我已经在jquery 文档ready函数中定义了函数。

$(document).ready(function() {
   function xyz()
   {
       //some code
   }
});

我已经在另一个文件中调用了此函数xyz（）。这不起作用:)您必须在文档上方定义函数ready。

— 梅尔多
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.