Memanggil fungsi javascript di file js lain

Question 1

Saya ingin memanggil fungsi yang ditentukan dalam file first.js di file second.js. kedua file didefinisikan dalam file HTML seperti:

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

Saya ingin menelepon fn1()ditentukan first.jsdalam second.js. Dari pencarian saya, jawaban jika first.jsditentukan terlebih dahulu itu mungkin tetapi dari tes saya, saya belum menemukan cara untuk melakukan itu.

Ini kode saya:

second.js

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

first.js

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

Question 2

Suatu fungsi tidak dapat dipanggil kecuali ia didefinisikan dalam file yang sama atau yang dimuat sebelum upaya untuk memanggilnya.

Suatu fungsi tidak dapat dipanggil kecuali jika berada dalam cakupan yang sama atau lebih besar dari yang mencoba memanggilnya.

Anda mendeklarasikan fungsi fn1di first.js, lalu di detik Anda bisa memilikifn1();

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>

Question 3

JS ke-1:

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

JS ke-2:

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

Semoga Ini Membantu ... Selamat Coding.

Question 4

Anda dapat membuat fungsi sebagai variabel global first.js dan melihat closure dan jangan meletakkannya di document.readyluar

Anda juga bisa menggunakan ajax

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

dengan cara yang sama Anda dapat menggunakan jquery getScript

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

Question 5

Anda dapat mempertimbangkan untuk menggunakan sintaks ekspor impor es6. Dalam file 1;

export function f1() {...}

Dan kemudian di file 2;

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

Harap dicatat bahwa ini hanya berfungsi jika Anda menggunakan <script src="./file2.js" type="module">

Anda tidak memerlukan dua tag skrip jika Anda melakukannya dengan cara ini. Anda hanya membutuhkan skrip utama, dan Anda dapat mengimpor semua barang Anda yang lain di sana.

Question 6

Ini harus bekerja seperti ini:

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>

keluaran

Coba cuplikan CodePen ini: link .

Question 7

Harap dicatat ini hanya berfungsi jika

<script>

tag ada di tubuh dan BUKAN di kepala.

Begitu

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

=> fungsi tidak diketahui fn1 ()

Gagal dan

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

bekerja.

Question 8

Gunakan cache jika server Anda memungkinkan untuk meningkatkan kecepatan.

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
}

Dan kemudian gunakan seperti ini:

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

Secara opsional, buat prototipe agar lebih fleksibel. Sehingga Anda tidak perlu menentukan file setiap saat, jika Anda memanggil fungsi atau jika Anda ingin mengambil kode dari banyak file.

Question 9

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>

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

Question 11

mendeklarasikan fungsi dalam lingkup global dengan jendela

first.js

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

second.js

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

termasuk seperti ini

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

Question 12

Ini sebenarnya datang sangat terlambat, tapi saya pikir saya harus berbagi,

di index.html

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

di 1.js

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

di 2.js

fn1()

Question 13

gunakan "var" saat membuat fungsi, lalu Anda dapat mengaksesnya dari file lain. pastikan kedua file terhubung dengan baik ke proyek Anda dan dapat mengakses satu sama lain.

file_1.js

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

mengakses file format file_2.js fungsi / variabel ini

firstLetterUppercase("gobinda");

keluaran => Gobinda

Semoga ini bisa membantu seseorang, selamat membuat kode !!!

Question 14

Ide saya adalah membiarkan dua fungsi panggilan JavaScript melalui DOM.

Cara melakukannya sederhana ... Kita hanya perlu mendefinisikan tag html js_ipc yang tersembunyi. Setelah callee register klik dari tag js_ipc yang tersembunyi, maka Penelepon dapat mengirimkan event click untuk memicu callee. Dan argumennya disimpan jika Anda ingin lulus.

Kapan kita perlu menggunakan cara di atas?

Terkadang, dua kode javascript sangat rumit untuk diintegrasikan dan begitu banyak kode asinkron di sana. Dan kode yang berbeda menggunakan kerangka kerja yang berbeda tetapi Anda masih perlu memiliki cara sederhana untuk mengintegrasikannya bersama.

Jadi, dalam hal itu, tidak mudah melakukannya.

Dalam implementasi proyek saya, saya menemui kasus ini dan sangat rumit untuk mengintegrasikannya. Dan akhirnya saya menemukan bahwa kita dapat membiarkan dua javascript saling memanggil melalui DOM.

Saya menunjukkan cara ini dalam kode git ini. Anda bisa mendapatkannya dengan cara ini. (Atau baca dari https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Di mana saja, Di sini, saya mencoba menjelaskan dengan kasus sederhana berikut. Saya berharap cara ini dapat membantu Anda dalam mengintegrasikan dua kode javascript yang berbeda dengan lebih mudah dari sebelumnya tidak ada library JavaScript untuk mendukung komunikasi antara dua file javascript yang dibuat oleh tim yang berbeda.

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

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

Question 15

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

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

referensi dari https://hype.codes/how-include-js-file-another-js-file

Question 16

Saya memiliki masalah yang sama. Saya telah mendefinisikan fungsi di dalam fungsi siap dokumen jquery .

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

Dan fungsi ini xyz () saya panggil di file lain. Ini tidak bekerja :) Anda harus menyiapkan fungsi di atas dokumen .

Answer 1

153

Saya ingin memanggil fungsi yang ditentukan dalam file first.js di file second.js. kedua file didefinisikan dalam file HTML seperti:

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

Saya ingin menelepon fn1()ditentukan first.jsdalam second.js. Dari pencarian saya, jawaban jika first.jsditentukan terlebih dahulu itu mungkin tetapi dari tes saya, saya belum menemukan cara untuk melakukan itu.

Ini kode saya:

second.js

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

first.js

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

javascript html m0j1
sumber

6

Sebut saja, tidak ada yang istimewa asalkan dalam lingkup global.

epascarello

1

Kita semua melakukan ini ribuan kali setiap hari. Jika Anda tidak bisa, pasti ada masalah dengan first.js Anda: Periksa apakah itu dimuat sama sekali ke browser Anda, dan jika ya, apakah ada kesalahan sintaks saat menguraikannya (keduanya dapat dilihat di toolbar pengembang dari browser Anda)

rplantiko

2

Itu seharusnya berhasil. Harap edit pertanyaan Anda untuk memberi tahu kami apa yang terjadi jika Anda menjalankan ini menggunakan konsol JavaScript di Chrome atau Firefox / Firebug. (Um, dan periksa apakah Anda mengeja nama fungsi dengan benar.)

Bob Brown

2

Jika tidak berhasil, saya rasa Anda melakukan sesuatu yang salah. Mengingat informasi dalam pertanyaan Anda, tidak mungkin menginginkannya.

Felix Kling

2

Haruskah kode sebenarnya.

epascarello

Answer 2

6

Sebut saja, tidak ada yang istimewa asalkan dalam lingkup global.

epascarello

Answer 3

1

Kita semua melakukan ini ribuan kali setiap hari. Jika Anda tidak bisa, pasti ada masalah dengan first.js Anda: Periksa apakah itu dimuat sama sekali ke browser Anda, dan jika ya, apakah ada kesalahan sintaks saat menguraikannya (keduanya dapat dilihat di toolbar pengembang dari browser Anda)

rplantiko

Answer 4

2

Itu seharusnya berhasil. Harap edit pertanyaan Anda untuk memberi tahu kami apa yang terjadi jika Anda menjalankan ini menggunakan konsol JavaScript di Chrome atau Firefox / Firebug. (Um, dan periksa apakah Anda mengeja nama fungsi dengan benar.)

Bob Brown

Answer 5

2

Jika tidak berhasil, saya rasa Anda melakukan sesuatu yang salah. Mengingat informasi dalam pertanyaan Anda, tidak mungkin menginginkannya.

Felix Kling

Answer 6

2

Haruskah kode sebenarnya.

epascarello

Answer 7

172

Suatu fungsi tidak dapat dipanggil kecuali ia didefinisikan dalam file yang sama atau yang dimuat sebelum upaya untuk memanggilnya.

Suatu fungsi tidak dapat dipanggil kecuali jika berada dalam cakupan yang sama atau lebih besar dari yang mencoba memanggilnya.

Anda mendeklarasikan fungsi fn1di first.js, lalu di detik Anda bisa memilikifn1();

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
sumber

5

Jadi, apa cara terbaik untuk mengelola semua ini dalam aplikasi produksi?

Costa

20

ini tidak berhasil untuk saya. Memberikan kesalahan yang fn1 () tidak ditentukan

Aayushi

11

Ini juga tidak berhasil untuk saya. Apakah ada solusi lain selain menggunakan jquery getscript karena menyarankan praktik yang buruk?

Vandolph Reyes

15

Mengapa ini jawaban yang diterima dengan 82 suara jika tidak benar-benar berfungsi?

Daniel

27

Jika ini tidak berhasil untuk Anda, kemungkinan Anda mendefinisikan fungsi dalam sesuatu yang lain. Misalnya, saya memiliki fungsi saya dalam satu $(document).ready(function() {...})blok, dan itu tidak berfungsi. Saya memindahkannya dan itu bekerja seperti pesona.

Michael Ziluck

Answer 8

5

Jadi, apa cara terbaik untuk mengelola semua ini dalam aplikasi produksi?

Costa

Answer 9

20

ini tidak berhasil untuk saya. Memberikan kesalahan yang fn1 () tidak ditentukan

Aayushi

Answer 10

11

Ini juga tidak berhasil untuk saya. Apakah ada solusi lain selain menggunakan jquery getscript karena menyarankan praktik yang buruk?

Vandolph Reyes

Answer 11

15

Mengapa ini jawaban yang diterima dengan 82 suara jika tidak benar-benar berfungsi?

Daniel

Answer 12

27

Jika ini tidak berhasil untuk Anda, kemungkinan Anda mendefinisikan fungsi dalam sesuatu yang lain. Misalnya, saya memiliki fungsi saya dalam satu $(document).ready(function() {...})blok, dan itu tidak berfungsi. Saya memindahkannya dan itu bekerja seperti pesona.

Michael Ziluck

Answer 13

25

JS ke-1:

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

JS ke-2:

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

Semoga Ini Membantu ... Selamat Coding.

Akshay Tyagi
sumber

3

Saya pikir maksud AndajQuery.getScript()

Pmpr

@Pmpr, tanda dolar adalah singkatan dari jQuery.

Safwan Samsudeen

Answer 14

3

Saya pikir maksud AndajQuery.getScript()

Pmpr

Answer 15

@Pmpr, tanda dolar adalah singkatan dari jQuery.

Safwan Samsudeen

Answer 16

23

Anda dapat membuat fungsi sebagai variabel global first.js dan melihat closure dan jangan meletakkannya di document.readyluar

Anda juga bisa menggunakan ajax

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

dengan cara yang sama Anda dapat menggunakan 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
sumber

7

Pemula tidak pernah mencoba melakukan hal seperti ini. Ini adalah praktik buruk yang harus dihindari. Selama keduanya direferensikan oleh halaman web, ya. Anda cukup memanggil fungsi seolah-olah berada dalam file JS yang sama.

Ananda

Satu-satunya masalah adalah, itu tidak menyertakan tajuk karena beberapa alasan.

Si8

Answer 17

7

Pemula tidak pernah mencoba melakukan hal seperti ini. Ini adalah praktik buruk yang harus dihindari. Selama keduanya direferensikan oleh halaman web, ya. Anda cukup memanggil fungsi seolah-olah berada dalam file JS yang sama.

Ananda

Answer 18

Satu-satunya masalah adalah, itu tidak menyertakan tajuk karena beberapa alasan.

Si8

Answer 19

18

Anda dapat mempertimbangkan untuk menggunakan sintaks ekspor impor es6. Dalam file 1;

export function f1() {...}

Dan kemudian di file 2;

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

Harap dicatat bahwa ini hanya berfungsi jika Anda menggunakan <script src="./file2.js" type="module">

Anda tidak memerlukan dua tag skrip jika Anda melakukannya dengan cara ini. Anda hanya membutuhkan skrip utama, dan Anda dapat mengimpor semua barang Anda yang lain di sana.

tm2josep
sumber

Dengan Safari, saya mendapatkancross-origin script load denied by cross-origin resource sharing policy

kakyo

Dengan browser lama Anda mungkin tidak dapat menggunakan sintaks impor es6. Anda bisa menggunakan Babel jika itu memudahkan Anda.

tm2josep

Bagaimana cara (mengekspor dan) mengimpor seluruh konten file1.js?

payne

Answer 20

Dengan Safari, saya mendapatkancross-origin script load denied by cross-origin resource sharing policy

kakyo

Answer 21

Dengan browser lama Anda mungkin tidak dapat menggunakan sintaks impor es6. Anda bisa menggunakan Babel jika itu memudahkan Anda.

tm2josep

Answer 22

Bagaimana cara (mengekspor dan) mengimpor seluruh konten file1.js?

payne

Answer 23

Ini harus bekerja seperti ini:

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>

keluaran

Coba cuplikan CodePen ini: link .

Answer 24

Harap dicatat ini hanya berfungsi jika

<script>

tag ada di tubuh dan BUKAN di kepala.

Begitu

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

=> fungsi tidak diketahui fn1 ()

Gagal dan

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

bekerja.

Answer 25

Gunakan cache jika server Anda memungkinkan untuk meningkatkan kecepatan.

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
}

Dan kemudian gunakan seperti ini:

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

Secara opsional, buat prototipe agar lebih fleksibel. Sehingga Anda tidak perlu menentukan file setiap saat, jika Anda memanggil fungsi atau jika Anda ingin mengambil kode dari banyak file.

Answer 26

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 27

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.dll
sumber

1

Meskipun cuplikan kode Anda mungkin menyelesaikan masalah, Anda harus menjelaskan apa tujuan kode Anda (bagaimana cara memecahkan masalah). Selanjutnya, Anda mungkin ingin memeriksa stackoverflow.com/help/how-to-answer

Ahmad F

Answer 28

1

Meskipun cuplikan kode Anda mungkin menyelesaikan masalah, Anda harus menjelaskan apa tujuan kode Anda (bagaimana cara memecahkan masalah). Selanjutnya, Anda mungkin ingin memeriksa stackoverflow.com/help/how-to-answer

Ahmad F

Answer 29

mendeklarasikan fungsi dalam lingkup global dengan jendela

first.js

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

second.js

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

termasuk seperti ini

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

Answer 30

1

Ini sebenarnya datang sangat terlambat, tapi saya pikir saya harus berbagi,

di index.html

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

di 1.js

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

di 2.js

fn1()

Ishaq Yusuf
sumber

Silakan lihat komentar OP di bawah pertanyaan: "... Saya baru saja bereksperimen [dengan] file yang terletak di lokasi yang salah dengan nama yang sama ...".

traktor53

Answer 31

Silakan lihat komentar OP di bawah pertanyaan: "... Saya baru saja bereksperimen [dengan] file yang terletak di lokasi yang salah dengan nama yang sama ...".

traktor53

Answer 32

gunakan "var" saat membuat fungsi, lalu Anda dapat mengaksesnya dari file lain. pastikan kedua file terhubung dengan baik ke proyek Anda dan dapat mengakses satu sama lain.

file_1.js

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

mengakses file format file_2.js fungsi / variabel ini

firstLetterUppercase("gobinda");

keluaran => Gobinda

Semoga ini bisa membantu seseorang, selamat membuat kode !!!

Answer 33

Ide saya adalah membiarkan dua fungsi panggilan JavaScript melalui DOM.

Cara melakukannya sederhana ... Kita hanya perlu mendefinisikan tag html js_ipc yang tersembunyi. Setelah callee register klik dari tag js_ipc yang tersembunyi, maka Penelepon dapat mengirimkan event click untuk memicu callee. Dan argumennya disimpan jika Anda ingin lulus.

Kapan kita perlu menggunakan cara di atas?

Terkadang, dua kode javascript sangat rumit untuk diintegrasikan dan begitu banyak kode asinkron di sana. Dan kode yang berbeda menggunakan kerangka kerja yang berbeda tetapi Anda masih perlu memiliki cara sederhana untuk mengintegrasikannya bersama.

Jadi, dalam hal itu, tidak mudah melakukannya.

Dalam implementasi proyek saya, saya menemui kasus ini dan sangat rumit untuk mengintegrasikannya. Dan akhirnya saya menemukan bahwa kita dapat membiarkan dua javascript saling memanggil melalui DOM.

Saya menunjukkan cara ini dalam kode git ini. Anda bisa mendapatkannya dengan cara ini. (Atau baca dari https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Di mana saja, Di sini, saya mencoba menjelaskan dengan kasus sederhana berikut. Saya berharap cara ini dapat membantu Anda dalam mengintegrasikan dua kode javascript yang berbeda dengan lebih mudah dari sebelumnya tidak ada library JavaScript untuk mendukung komunikasi antara dua file javascript yang dibuat oleh tim yang berbeda.

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

Dan kode 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 34

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

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

referensi dari https://hype.codes/how-include-js-file-another-js-file

Answer 35

Saya memiliki masalah yang sama. Saya telah mendefinisikan fungsi di dalam fungsi siap dokumen jquery .

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

Dan fungsi ini xyz () saya panggil di file lain. Ini tidak bekerja :) Anda harus menyiapkan fungsi di atas dokumen .

Memanggil fungsi javascript di file js lain

Jawaban:

first.js

Second.js

index.html