Chiamare una funzione javascript in un altro file js

142

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

javascript html

— m0j1
fonte

6

Quindi chiamalo, non c'è niente di speciale purché sia di portata globale.

— epascarello,

1

Lo stiamo facendo mille volte al giorno. Se non ci riesci, ci deve essere un problema con first.js: controlla se è stato caricato nel tuo browser e, in caso affermativo, se si è verificato un errore di sintassi durante l'analisi (entrambi sono visibili nella barra degli strumenti dello sviluppatore del tuo browser)

— rplantiko,

2

Dovrebbe funzionare. Modifica la tua domanda per dirci cosa succede quando esegui questa operazione utilizzando la console JavaScript in Chrome o Firefox / Firebug. (Uhm, e controlla di aver digitato correttamente il nome della funzione.)

— Bob Brown,

2

Se non funziona, suppongo che tu stia facendo qualcosa di sbagliato. Date le informazioni nella tua domanda, è impossibile volerlo però.

— Felix Kling,

2

Dovrebbe il codice reale.

— epascarello,

164

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>

— Fernando Mendez
fonte

4

Qual è il modo migliore per gestire tutto ciò in un'applicazione di produzione?

— Costa

18

questo non funziona per me. Fornisce un errore che fn1 () non è definito

— Aayushi,

10

Questo non funziona anche per me. C'è qualche soluzione in giro se non l'uso di jquery getscript perché suggerisce una cattiva pratica?

— Vandolph Reyes,

14

Perché questa è la risposta accettata con 82 voti se non funziona davvero?

— Daniel,

26

Se questo non funziona per te, è probabile che tu abbia definito la funzione all'interno di qualcos'altro. Ad esempio, avevo la mia funzione all'interno di un $(document).ready(function() {...})blocco e non funzionava. L'ho spostato e ha funzionato come un fascino.

— Michael Ziluck,

23

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

— Gildas.Tambo
fonte

7

I principianti non provano mai a fare nulla del genere. Queste sono cattive pratiche da evitare. Fintanto che entrambi fanno riferimento alla pagina Web, sì. Chiamate semplicemente le funzioni come se fossero nello stesso file JS.

— Ananda,

L'unico problema è che non include l'intestazione per qualche motivo.

— Si8

21

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.

— Akshay Tyagi
fonte

2

Penso che intendijQuery.getScript()

— Pmpr

16

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

— tm2josep
fonte

Con Safari, ottengocross-origin script load denied by cross-origin resource sharing policy

— kakyo il

Con i browser meno recenti potresti non essere in grado di utilizzare la sintassi di importazione es6. Puoi usare Babel se ti rende più semplice.

— tm2josep,

5

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 .

— Consta Gorgan
fonte

4

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.

— user213979
fonte

3

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.

— Thielicious
fonte

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
fonte

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
fonte

Sebbene lo snippet di codice possa risolvere il problema, dovresti descrivere qual è lo scopo del tuo codice (come risolve il problema). Inoltre, potresti voler controllare stackoverflow.com/help/how-to-answer

— Ahmad F

2

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>

— taoufiqaitali
fonte

1

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

— Ishaq Yusuf
fonte

Si prega di vedere il commento del PO sotto la domanda: "... stavo solo sperimentando [con] un file situato in una posizione sbagliata con lo stesso nome ...".

— traktor53,

1

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

— iNandi
fonte

-1

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

— Min Thant
fonte

-2

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 .

— Meldo
fonte