การเรียกใช้ฟังก์ชันจาวาสคริปต์ในไฟล์ js อื่น

141

ฉันต้องการเรียกใช้ฟังก์ชันที่กำหนดไว้ในไฟล์ first.js ในไฟล์ second.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

— m0j1
แหล่งที่มา

6

ดังนั้นเรียกมันว่าไม่มีอะไรพิเศษตราบใดที่มันอยู่ในขอบเขตทั่วโลก

— epascarello

1

เราทุกคนทำสิ่งนี้หลายพันครั้งต่อวัน หากคุณทำไม่ได้จะต้องมีปัญหากับ first.js ของคุณ: ตรวจสอบว่ามันถูกโหลดลงในเบราว์เซอร์ของคุณหรือไม่และถ้าใช่ไม่ว่าจะมีข้อผิดพลาดทางไวยากรณ์ขณะแยกวิเคราะห์หรือไม่ ของเบราว์เซอร์ของคุณ)

— rplantiko

2

ว่าควรจะทำงาน โปรดแก้ไขคำถามของคุณเพื่อบอกเราว่าจะเกิดอะไรขึ้นเมื่อคุณเรียกใช้โดยใช้คอนโซล JavaScript ใน Chrome หรือ Firefox / Firebug (อืมและตรวจสอบว่าคุณสะกดชื่อฟังก์ชั่นถูกต้องแล้ว)

— Bob Brown

2

ถ้ามันไม่ทำงานฉันเดาว่าคุณกำลังทำอะไรผิด เมื่อพิจารณาถึงข้อมูลในคำถามของคุณมันเป็นไปไม่ได้เลยที่จะต้องการมัน

— เฟลิกซ์คลิง

2

ควรใช้รหัสจริง

— epascarello

164

ไม่สามารถเรียกใช้ฟังก์ชันได้เว้นแต่จะมีการกำหนดไว้ในไฟล์เดียวกันหรือโหลดไว้ก่อนที่จะพยายามเรียกใช้

ไม่สามารถเรียกใช้ฟังก์ชันได้เว้นแต่จะอยู่ในขอบเขตเดียวกันหรือมากกว่าจากนั้นจะพยายามเรียกใช้

คุณประกาศฟังก์ชั่น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>

— เฟอร์นันโดเม็นเดส
แหล่งที่มา

4

ดังนั้นวิธีที่ดีที่สุดในการจัดการทั้งหมดนี้ในแอปพลิเคชันการผลิตคืออะไร

— Costa

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

— Gildas.Tambo
แหล่งที่มา

7

ผู้เริ่มต้นไม่เคยลองทำอะไรแบบนี้ นี่เป็นแนวทางปฏิบัติที่ไม่ดีที่ควรหลีกเลี่ยง ตราบเท่าที่ทั้งสองมีการอ้างอิงโดยหน้าเว็บใช่ คุณเพียงเรียกฟังก์ชั่นราวกับว่าพวกเขาอยู่ในไฟล์ JS เดียวกัน

— อนันดา

ปัญหาเดียวคือมันไม่รวมส่วนหัวด้วยเหตุผลบางอย่าง

— Si8

21

วันที่ 1:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

JS ที่ 2:

$.getscript("url or name of 1st Js File",function(){
fn();
});

หวังว่านี่จะช่วย ... การเข้ารหัสที่มีความสุข

— Akshay Tyagi
แหล่งที่มา

2

ฉันคิดว่าคุณหมายถึงjQuery.getScript()

— Pmpr

16

คุณสามารถพิจารณาใช้ไวยากรณ์การส่งออกการนำเข้า es6 ในไฟล์ 1;

export function f1() {...}

จากนั้นในไฟล์ 2;

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

โปรดทราบว่านี่จะทำงานได้เฉพาะเมื่อคุณใช้ <script src="./file2.js" type="module">

คุณจะไม่จำเป็นต้องมีสองแท็กสคริปต์หากคุณทำเช่นนี้ คุณต้องการสคริปต์หลักและคุณสามารถนำเข้าข้อมูลอื่น ๆ ทั้งหมดที่นั่น

— tm2josep
แหล่งที่มา

ด้วย Safari ฉันได้รับcross-origin script load denied by cross-origin resource sharing policy

— kakyo

ด้วยเบราว์เซอร์รุ่นเก่าคุณอาจไม่สามารถใช้ไวยากรณ์การนำเข้า es6 คุณสามารถใช้บาเบลถ้ามันทำให้ง่ายขึ้นสำหรับคุณ

— 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: การเชื่อมโยง

— คอนสตากอร์แกน
แหล่งที่มา

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>

โรงงาน

— user213979
แหล่งที่มา

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

เลือกสร้างต้นแบบของมันเพื่อให้ยืดหยุ่นมากขึ้น เพื่อให้คุณไม่จำเป็นต้องกำหนดไฟล์ทุกครั้งถ้าคุณเรียกใช้ฟังก์ชันหรือถ้าคุณต้องการดึงรหัสจากหลาย ๆ ไฟล์

— Thielicious
แหล่งที่มา

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>

— afsar
แหล่งที่มา

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
แหล่งที่มา

แม้ว่าข้อมูลโค้ดของคุณอาจแก้ปัญหาได้ แต่คุณควรอธิบายว่าจุดประสงค์ของโค้ดของคุณคืออะไร (วิธีแก้ไขปัญหา) นอกจากนี้คุณอาจต้องการตรวจสอบ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
แหล่งที่มา

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
แหล่งที่มา

โปรดดูความคิดเห็นของ 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");

output => Gobinda

หวังว่านี้จะช่วยให้ใครสักคนมีความสุขการเข้ารหัส !!!

— iNandi
แหล่งที่มา

-1

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

— ถานมินต์
แหล่งที่มา

-2

ฉันมีปัญหาเดียวกัน ฉันมีฟังก์ชั่นที่กำหนดไว้ภายใน jQuery พร้อมเอกสารฟังก์ชั่น

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

และฟังก์ชั่นนี้xyz ()ฉันได้เรียกใช้ไฟล์อื่น นี้ไม่ได้ทำงาน :) คุณต้องฟังก์ชั่นที่กำหนดไว้ข้างต้นเอกสารพร้อม

— Meldo
แหล่งที่มา