在另一個js文件中調用一個JavaScript function

Question

我想在 second.js 文件中調用在first.js文件中定義的function 。 這兩個文件都在 HTML 文件中定義，例如：

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

我想在first.js中調用 first.js 中定義的second.js fn1() 。 根據我的搜索答案，如果首先定義first.js是可能的，但根據我的測試，我還沒有找到任何方法來做到這一點。

這是我的代碼：

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

Answer 1

一個函數不能被調用，除非它是在同一個文件中定義的，或者是在嘗試調用它之前加載的。

一個函數不能被調用，除非它在與試圖調用它的那個相同或更大的范圍內。

你在 first.js 中聲明函數fn1 ，然后在第二個你可以只擁有fn1();

1.js：

function fn1 () {
    alert();
}

2.js：

fn1();

索引.html：

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Answer 2

第一個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 3

您可以在first.js將該函數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." );
});

Answer 4

您可以考慮使用 es6 導入導出語法。 在文件 1 中；

export function f1() {...}

然后在文件 2 中；

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

請注意，這僅在您使用<script src="./file2.js" type="module">

如果您這樣做，您將不需要兩個腳本標簽。 您只需要主腳本，然后就可以在那里導入所有其他內容。

Answer 5

它應該像這樣工作：

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
}

索引.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 片段：鏈接。

Answer 6

請注意，這僅適用於

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

使用窗口在全局范圍內聲明函數

第一個.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>

Answer 8

如果您的服務器允許它提高速度，請使用緩存。

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 9

第一個.js

function first() { alert("first"); }

第二個.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");}

索引.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 10

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

輸出 => 戈賓達

希望這會幫助某人，快樂編碼！！！

Answer 12

這實際上來得很晚，但我想我應該分享，

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

我的想法是讓兩個 JavaScript 通過 DOM 調用函數。

方法很簡單……我們只需要定義隱藏的js_ipc html標簽。 在被調用者從隱藏的 js_ipc 標簽注冊點擊后，調用者可以調度點擊事件來觸發被調用者。 如果您想通過，則參數將保存。

什么時候需要使用上面的方式？

有時，這兩個 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

我想調用一個在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定義了first.js是可能的，但是根據我的測試，我還沒有找到實現此目的的任何方法。

這是我的代碼：

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

Answer 15

遲到總比不到好

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

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

在 test.js 文件helper.fetchApi()

Answer 16

我有同樣的問題。 我已經在 jquery文檔就緒函數中定義了函數。

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

我在另一個文件中調用了這個函數xyz() 。 這不起作用:) 您必須在文檔 ready之上定義函數。

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 的參考

Answer 18

TLDR：首先加載全局 Function 文件，然后加載事件處理程序

每當您訪問 JS 文件或<script>塊中的元素時，必須檢查以確保該元素存在，即 jQuery 的$(document).ready()或普通 JS 的document.addEventListener('DOMContentLoaded', function(event)...

但是，如果您為 DOMContentLoaded 添加事件偵聽器，則公認的解決方案不起作用，您可以從評論中輕松觀察到這一點。

先加載全局Function文件的步驟

解決方法如下：

分離 JS 腳本文件的邏輯，使每個文件僅包含事件偵聽器或全局獨立函數。
首先加載具有全局獨立函數的 JS 腳本文件。
其次加載帶有事件偵聽器的 JS 腳本文件。 與之前的其他文件不同，請確保將您的代碼包裝在document.addEventListener('DOMContentLoaded', function(event) {...})中。 或document.Ready() 。

在另一個js文件中調用一個JavaScript function

問題描述

17 個解決方案

解決方案1
197 已采納 2014-09-21 19:26:43

解決方案2
27 2015-01-19 06:57:04

解決方案3
26 2014-09-21 19:22:23

解決方案4
20 2019-09-29 04:43:00

解決方案5
7 2018-09-17 14:54:10

解決方案6
5 2018-12-21 21:03:20

解決方案7
4 2019-10-06 13:48:22

解決方案8
3 2016-11-02 14:46:28

解決方案9
3 2017-10-23 02:31:08

第一個.js

第二個.js

索引.html

解決方案10
2 2018-03-14 10:40:54

解決方案11
2 2020-05-11 21:48:51

解決方案12
1 2019-09-28 22:18:02

解決方案13
0 2020-10-20 17:12:14

解決方案14
0 2020-12-14 12:47:23

解決方案15
0 2021-05-28 06:37:26

解決方案16
-1 2019-04-03 14:00:11

解決方案17
-1 2019-06-28 07:27:36

解決方案18
-1 2022-12-08 20:14:30

TLDR：首先加載全局 Function 文件，然后加載事件處理程序

先加載全局Function文件的步驟

在另一個js文件中調用一個JavaScript function

問題描述

17 個解決方案

解決方案1 197 已采納 2014-09-21 19:26:43

解決方案2 27 2015-01-19 06:57:04

解決方案3 26 2014-09-21 19:22:23

解決方案4 20 2019-09-29 04:43:00

解決方案5 7 2018-09-17 14:54:10

解決方案6 5 2018-12-21 21:03:20

解決方案7 4 2019-10-06 13:48:22

解決方案8 3 2016-11-02 14:46:28

解決方案9 3 2017-10-23 02:31:08

第一個.js

第二個.js

索引.html

解決方案10 2 2018-03-14 10:40:54

解決方案11 2 2020-05-11 21:48:51

解決方案12 1 2019-09-28 22:18:02

解決方案13 0 2020-10-20 17:12:14

解決方案14 0 2020-12-14 12:47:23

解決方案15 0 2021-05-28 06:37:26

解決方案16 -1 2019-04-03 14:00:11

解決方案17 -1 2019-06-28 07:27:36

解決方案18 -1 2022-12-08 20:14:30

TLDR：首先加載全局 Function 文件，然后加載事件處理程序

先加載全局Function文件的步驟

解決方案1
197 已采納 2014-09-21 19:26:43

解決方案2
27 2015-01-19 06:57:04

解決方案3
26 2014-09-21 19:22:23

解決方案4
20 2019-09-29 04:43:00

解決方案5
7 2018-09-17 14:54:10

解決方案6
5 2018-12-21 21:03:20

解決方案7
4 2019-10-06 13:48:22

解決方案8
3 2016-11-02 14:46:28

解決方案9
3 2017-10-23 02:31:08

解決方案10
2 2018-03-14 10:40:54

解決方案11
2 2020-05-11 21:48:51

解決方案12
1 2019-09-28 22:18:02

解決方案13
0 2020-10-20 17:12:14

解決方案14
0 2020-12-14 12:47:23

解決方案15
0 2021-05-28 06:37:26

解決方案16
-1 2019-04-03 14:00:11

解決方案17
-1 2019-06-28 07:27:36

解決方案18
-1 2022-12-08 20:14:30