Gọi một hàm javascript trong tệp js khác

141

Tôi muốn gọi một hàm được định nghĩa trong tệp First.js trong tệp second.js. cả hai tệp được định nghĩa trong tệp HTML như:

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

Tôi muốn gọi fn1()được xác định first.jstrong second.js. Từ tìm kiếm của tôi, câu trả lời là nếu first.jsđược xác định trước thì có thể nhưng từ các thử nghiệm của tôi, tôi không tìm thấy cách nào để làm điều đó.

Đây là mã của tôi:

second.js

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

first.js

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

javascript html

— m0j1
nguồn

6

Vì vậy, gọi nó, không có gì đặc biệt miễn là nó nằm trong phạm vi toàn cầu.

— eprebello

1

Tất cả chúng ta đang làm điều này một ngàn lần mỗi ngày. Nếu bạn không thể, chắc chắn phải có vấn đề với First.js của bạn: Kiểm tra xem nó có được tải hoàn toàn vào trình duyệt của bạn không và nếu có, có lỗi cú pháp trong khi phân tích cú pháp không (cả hai có thể nhìn thấy trong thanh công cụ của nhà phát triển của trình duyệt của bạn)

— rplantiko

2

Cần làm việc. Vui lòng chỉnh sửa câu hỏi của bạn để cho chúng tôi biết điều gì xảy ra khi bạn chạy câu hỏi này bằng bảng điều khiển JavaScript trong Chrome hoặc Firefox / Fireorms. (Ừm và kiểm tra xem bạn đã viết đúng tên hàm.)

— Bob Brown

2

Nếu nó không hoạt động, tôi đoán bạn đang làm gì đó sai. Đưa ra thông tin trong câu hỏi của bạn, mặc dù không thể.

— Felix Kling

2

Nên mã thực tế.

— eprebello

164

Một hàm không thể được gọi trừ khi nó được định nghĩa trong cùng một tệp hoặc được tải trước khi thử gọi nó.

Một hàm không thể được gọi trừ khi nó nằm trong cùng phạm vi hoặc lớn hơn thì hàm cố gắng gọi nó.

Bạn khai báo hàm fn1trong First.js và sau đó trong giây bạn có thể có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>

— Fernando Mendez
nguồn

4

Vì vậy, cách tốt nhất để quản lý tất cả điều này trong một ứng dụng sản xuất là gì?

— Costa

18

điều này không làm việc cho tôi. Đưa ra một lỗi mà fn1 () không được xác định

— Aayushi

10

Điều này cũng không làm việc cho tôi. Có bất kỳ công việc nào xung quanh ngoại trừ việc sử dụng jquery getcript vì nó gợi ý một thực tiễn xấu?

— Vandolph Reyes

14

Tại sao đây là câu trả lời được chấp nhận với 82 phiếu nếu nó không thực sự hoạt động?

— Daniel

26

Nếu điều này không hiệu quả với bạn, rất có thể bạn đã xác định chức năng trong một cái gì đó khác. Chẳng hạn, tôi có chức năng của mình trong một $(document).ready(function() {...})khối và nó không hoạt động. Tôi di chuyển nó và nó làm việc như một lá bùa.

— Michael Ziluck

23

Bạn có thể biến hàm thành một biến toàn cục first.js và xem xét việc đóng và không đặt nó ở document.readybên ngoài

bạn cũng có thể sử dụng ajax

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

cùng một cách bạn có thể sử dụng 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
nguồn

7

Người mới bắt đầu không bao giờ thử làm bất cứ điều gì như thế này. Đây là những thực hành xấu cần tránh. Miễn là cả hai được tham chiếu bởi trang web, có. Bạn chỉ cần gọi các hàm như thể chúng nằm trong cùng một tệp JS.

— Ananda

Vấn đề duy nhất là, nó không bao gồm tiêu đề vì một số lý do.

— Si8

21

Mã số 1:

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

Mã số 2:

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

Hy vọng điều này sẽ giúp ... Mã hóa hạnh phúc.

— Akshay Tyagi
nguồn

2

Tôi nghĩ ý bạn làjQuery.getScript()

— Pmpr

16

Bạn có thể xem xét sử dụng cú pháp xuất nhập khẩu es6. Trong tệp 1;

export function f1() {...}

Và sau đó trong tập tin 2;

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

Xin lưu ý rằng điều này chỉ hoạt động nếu bạn đang sử dụng <script src="./file2.js" type="module">

Bạn sẽ không cần hai thẻ script nếu bạn làm theo cách này. Bạn chỉ cần kịch bản chính và bạn có thể nhập tất cả nội dung khác của mình vào đó.

— tm2josep
nguồn

Với Safari, tôi nhận đượccross-origin script load denied by cross-origin resource sharing policy

— kakyo

Với các trình duyệt cũ hơn, bạn không thể sử dụng cú pháp nhập es6. Bạn có thể sử dụng Babel nếu nó giúp bạn dễ dàng hơn.

— tm2josep

5

Nó sẽ hoạt động như thế này:

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>

đầu ra

Hãy thử đoạn mã CodePen này: liên kết .

— Gora Gorgan
nguồn

4

Xin lưu ý rằng điều này chỉ hoạt động nếu

<script>

các thẻ nằm trong cơ thể và KHÔNG ở trong đầu.

Vì thế

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

=> hàm chưa biết fn1 ()

Thất bại và

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

làm.

— người dùng213979
nguồn

3

Sử dụng bộ đệm nếu máy chủ của bạn cho phép nó cải thiện tốc độ.

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
}

Và sau đó sử dụng nó như thế này:

ext('somefile.js',()=>              
    myFunc(args)
);

Tùy chọn, tạo một nguyên mẫu của nó để có nó linh hoạt hơn. Vì vậy, bạn không phải xác định tệp mỗi lần, nếu bạn gọi một hàm hoặc nếu bạn muốn tìm nạp mã từ nhiều tệp.

— Thielicy
nguồn

3

First.js

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

Thứ hai

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
nguồn

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
nguồn

Mặc dù đoạn mã của bạn có thể giải quyết vấn đề, bạn nên mô tả mục đích của mã của bạn là gì (cách giải quyết vấn đề). Hơn nữa, bạn có thể muốn kiểm tra stackoverflow.com/help/how-to-answer

— Ahmad F

2

Hàm khai báo trong phạm vi toàn cầu với cửa sổ

First.js

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

second.js

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

bao gồm như thế này

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

— taoufiqaitali
nguồn

1

Điều này thực sự đến rất muộn, nhưng tôi nghĩ tôi nên chia sẻ,

trong index.html

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

trong 1.js

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

trong 2.js

fn1()

— Ishaq Yusuf
nguồn

Vui lòng xem nhận xét của OP dưới câu hỏi: "... Tôi chỉ đang thử nghiệm [với] một tệp nằm ở vị trí sai có cùng tên ...".

— traktor53

1

sử dụng "var" trong khi tạo chức năng, sau đó bạn có thể truy cập từ tệp khác. đảm bảo cả hai tệp được kết nối tốt với dự án của bạn và có thể truy cập lẫn nhau.

tệp_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

truy cập tệp chức năng / biến dạng tệp file_2.js này

firstLetterUppercase("gobinda");

đầu ra => Gobinda

hy vọng điều này sẽ giúp ai đó, hạnh phúc mã hóa !!!

— iNandi
nguồn

-1

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

tham khảo từ https://hype.codes/how-include-js-file-another-js-file

— Thant
nguồn

-2

Tôi đã có vấn đề tương tự. Tôi đã có các chức năng xác định bên trong chức năng sẵn sàng tài liệu jquery .

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

Và hàm này xyz () tôi đã gọi trong một tệp khác. Điều này không hoạt động :) Bạn phải xác định chức năng trên tài liệu đã sẵn sàng .

— Meldo
nguồn