Question

我想在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"); }

{{1}}

Answer 1

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

除非函数与试图调用它的范围相同或更大，否则无法调用该函数。

你在first.js中声明了函数fn1，然后在第二个你可以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>

Answer 2

您可以在first.js中将该函数设为全局变量并查看closure并且不要将其放在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." );
});

Answer 3

1st 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();
});

希望这有助于...... 快乐的编码。

Answer 4

它应该像这样工作：

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。

Answer 5

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>

Answer 6

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

export function f1() {...}

然后进入文件2；

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

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

时有效

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

output => Gobinda

希望这可以帮助别人，快乐的编码！！！

Answer 10

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

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>

Answer 11

迟到总比不到好

(function (window) {const helper = { fetchApi: function () { return "oke"}
   if (typeof define === 'function' && define.amd) {
    define(function () { return helper; });
   }
   else if (typeof module === 'object' && module.exports) {
    module.exports = helper;
  }
  else {
    window.helper = helper;
  }
}(window))

索引html <script src="helper.js"></script> <script src="test.js"></script>

在 test.js 文件中 helper.fetchApi()

Answer 12

此代码应该起作用。如果不是，请检查调试器工具中的源（按 Google Chrome 中的F12或Ctrl+Shift+I）。如果在此处找不到fn1()函数，请按Ctrl+F5，以完全重新加载站点（Ctrl+R或F5是不够的）。重新加载页面后，它应该可以工作。

Answer 13

我的想法是让两个JavaScript通过DOM进行调用。

方法很简单... 我们只需要定义隐藏的js_ipc html标签。被呼叫者注册后，从隐藏的js_ipc标记中单击，然后呼叫者可以调度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));
}

Answer 14

这实际上来得很晚，但是我认为我应该分享，

在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()

Answer 15

我遇到了同样的问题。我已经在jquery document ready 函数中定义了函数。

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

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

Answer 16

请注意，仅当

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

有效。

Answer 17

// 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的参考

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

17 个答案:

first.js

Second.js

的index.html