Chiamare una funzione javascript in un altro file js

Volevo chiamare una funzione definita in un file first.js nel file second.js. entrambi i file sono definiti in un file HTML come:

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

Voglio chiamare fn1()definito in first.jsin second.js. Dalle mie ricerche le risposte sono state se first.jsè stato definito prima è possibile, ma dai miei test non ho trovato alcun modo per farlo.

Ecco il mio codice:

second.js

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

first.js

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

Una funzione non può essere chiamata a meno che non sia stata definita nello stesso file o caricata prima del tentativo di chiamarla.

Una funzione non può essere chiamata a meno che non sia nello stesso o maggiore ambito di quello che sta cercando di chiamarla.

Dichiarate la funzione fn1in first.js e poi in secondo luogo potete semplicemente averefn1();

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>

Puoi rendere la funzione una variabile globale first.js e dare un'occhiata alla chiusura e non document.readyinserirla all'esterno

puoi usare anche ajax

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

allo stesso modo puoi usare jquery getScript

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

1 ° JS:

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

2 ° JS:

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

Spero che questo aiuti ... Buona codifica.

Si potrebbe prendere in considerazione l'utilizzo della sintassi di esportazione / esportazione es6. Nel file 1;

export function f1() {...}

E poi nel file 2;

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

Nota che funziona solo se lo stai utilizzando <script src="./file2.js" type="module">

Non avrai bisogno di due tag di script se lo fai in questo modo. Hai semplicemente bisogno dello script principale e puoi importare tutte le altre cose lì.

Dovrebbe funzionare così:

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>

produzione

Prova questo frammento di codice: link .

Si noti che funziona solo se il

<script>

i tag sono nel corpo e NON nella testa.

Così

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

=> funzione sconosciuta fn1 ()

Fallisce e

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

lavori.

Usa la cache se il tuo server gli consente di migliorare la velocità.

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
}

E poi usalo in questo modo:

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

Facoltativamente, creane un prototipo per renderlo più flessibile. In modo che non sia necessario definire il file ogni volta, se si chiama una funzione o se si desidera recuperare il codice da più file.

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>

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

dichiarare la funzione nell'ambito globale con la finestra

first.js

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

second.js

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

includere in questo modo

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

Questo in realtà arriverà molto tardi, ma ho pensato che avrei dovuto condividere,

in index.html

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

in 1.js

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

in 2.js

fn1()

usa "var" durante la creazione della funzione, quindi puoi accedervi da un altro file. assicurati che entrambi i file siano ben collegati al tuo progetto e possano accedervi.

file_1.js

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

accedere a questa funzione / forma variabile file file_2.js

firstLetterUppercase("gobinda");

output => Gobinda

spero che questo possa aiutare qualcuno, buona programmazione !!!

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

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

riferimento da https://hype.codes/how-include-js-file-another-js-file

Ho avuto lo stesso problema. Ho definito funzioni all'interno della funzione pronta per documenti jquery .

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

E questa funzione xyz () l' ho chiamata in un altro file. Questo non funziona :) Devi definire la funzione sopra il documento pronto .