Appel d'une fonction javascript dans un autre fichier js

142

Je voulais appeler une fonction définie dans un fichier first.js dans le fichier second.js. les deux fichiers sont définis dans un fichier HTML comme:

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

Je souhaite appeler fn1()défini first.jsdans second.js. D'après mes recherches, les réponses étaient si first.jsdéfini en premier, c'est possible, mais d'après mes tests, je n'ai trouvé aucun moyen de le faire.

Voici mon code:

second.js

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

first.js

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

javascript html

— m0j1
source

6

Alors appelez-le, il n'y a rien de spécial tant que cela a une portée mondiale.

— epascarello

1

Nous faisons tous cela des milliers de fois par jour. Si vous ne pouvez pas, il doit y avoir un problème avec votre first.js: vérifiez s'il est chargé dans votre navigateur, et si oui, s'il y a eu une erreur de syntaxe lors de son analyse (les deux peuvent être vus dans la barre d'outils du développeur de votre navigateur)

— rplantiko

2

Cela devrait fonctionner. Veuillez modifier votre question pour nous dire ce qui se passe lorsque vous l'exécutez à l'aide de la console JavaScript dans Chrome ou Firefox / Firebug. (Um, et vérifiez que vous avez correctement orthographié le nom de la fonction.)

— Bob Brown

2

Si cela ne fonctionne pas, je suppose que vous faites quelque chose de mal. Compte tenu des informations contenues dans votre question, il est impossible que ce soit le cas.

— Felix Kling

2

Devrait le code réel.

— epascarello

164

Une fonction ne peut être appelée que si elle a été définie dans le même fichier ou chargé avant la tentative de l'appel.

Une fonction ne peut être appelée que si elle est dans la même portée ou plus que celle qui tente de l'appeler.

Vous déclarez la fonction fn1dans first.js, puis dans la seconde, vous pouvez simplement avoirfn1();

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
source

4

Alors, quelle est la meilleure façon de gérer tout cela dans une application de production?

— Costa

18

cela ne fonctionne pas pour moi. Donne une erreur que fn1 () n'est pas définie

— Aayushi

10

Cela ne fonctionne pas non plus pour moi. Existe-t-il des solutions à l'exception de l'utilisation de jquery getscript car cela suggère une mauvaise pratique?

— Vandolph Reyes

14

Pourquoi est-ce la réponse acceptée avec 82 votes si cela ne fonctionne pas vraiment?

— Daniel

26

Si cela ne fonctionne pas pour vous, il y a de fortes chances que vous ayez défini la fonction dans quelque chose d'autre. Par exemple, j'avais ma fonction dans un $(document).ready(function() {...})bloc et cela ne fonctionnait pas. Je l'ai déplacé et cela a fonctionné comme un charme.

— Michael Ziluck

23

Vous pouvez faire de la fonction une variable globale dans first.js et jeter un œil à la fermeture et ne pas la mettredocument.ready dehors

vous pouvez aussi utiliser ajax

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

de la même manière que vous pouvez utiliser 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
source

7

Les débutants n'essaient jamais de faire quelque chose comme ça. Ce sont de mauvaises pratiques à éviter. Tant que les deux sont référencés par la page Web, oui. Vous appelez simplement les fonctions comme si elles se trouvaient dans le même fichier JS.

— Ananda

Le seul problème est qu'il n'inclut pas l'en-tête pour une raison quelconque.

— Si8

21

1er JS:

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

2ème JS:

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

J'espère que cela aidera ... Bon codage.

— Akshay Tyagi
source

2

Je pense que vous voulez direjQuery.getScript()

— Pmpr

16

Vous pouvez envisager d'utiliser la syntaxe d'import-export es6. Dans le fichier 1;

export function f1() {...}

Et puis dans le fichier 2;

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

Veuillez noter que cela ne fonctionne que si vous utilisez <script src="./file2.js" type="module">

Vous n'aurez pas besoin de deux balises de script si vous procédez de cette façon. Vous avez simplement besoin du script principal et vous pouvez y importer tous vos autres éléments.

— tm2josep
source

Avec Safari, je reçoiscross-origin script load denied by cross-origin resource sharing policy

— kakyo le

Avec les navigateurs plus anciens, vous ne pourrez peut-être pas utiliser la syntaxe d'importation es6. Vous pouvez utiliser Babel si cela vous facilite la tâche.

— tm2josep

5

Cela devrait fonctionner comme ceci:

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>

production

Essayez cet extrait de CodePen: lien .

— Consta Gorgan
source

4

Veuillez noter que cela ne fonctionne que si le

<script>

les balises sont dans le corps et PAS dans la tête.

Alors

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

=> fonction inconnue fn1 ()

Échoue et

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

travaux.

— user213979
source

3

Utilisez le cache si votre serveur lui permet d'améliorer la vitesse.

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
}

Et puis utilisez-le comme ceci:

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

Eventuellement, faites-en un prototype pour le rendre plus flexible. Pour que vous n'ayez pas à définir le fichier à chaque fois, si vous appelez une fonction ou si vous souhaitez récupérer du code à partir de plusieurs fichiers.

— Thielicious
source

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
source

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
source

Bien que votre extrait de code puisse résoudre le problème, vous devez décrire le but de votre code (comment il résout le problème). De plus, vous voudrez peut-être vérifier stackoverflow.com/help/how-to-answer

— Ahmad F

2

déclarer la fonction dans la portée globale avec window

first.js

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

second.js

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

inclure comme ça

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

— taoufiqaitali
source

1

Cela arrive en fait très tard, mais j'ai pensé que je devrais partager,

dans index.html

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

dans 1.js

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

dans 2.js

fn1()

— Ishaq Yusuf
source

S'il vous plaît voir le commentaire du PO sous la question: "... J'étais juste en train d'expérimenter [avec] un fichier situé à un mauvais emplacement avec le même nom ...".

— traktor53 du

1

utilisez "var" lors de la création de la fonction, vous pouvez y accéder à partir d'un autre fichier. assurez-vous que les deux fichiers sont bien connectés à votre projet et peuvent accéder l'un à l'autre.

file_1.js

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

accès à cette fonction / variable sous forme de fichier file_2.js

firstLetterUppercase("gobinda");

sortie => Gobinda

j'espère que cela aidera quelqu'un, bon codage !!!

— iNandi
source

-1

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

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

référence de https://hype.codes/how-include-js-file-another-js-file

— Min Thant
source

-2

J'ai eu le même problème. J'ai eu des fonctions définies dans la fonction prête pour le document jquery .

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

Et cette fonction xyz () que j'ai appelée dans un autre fichier. Cela ne fonctionne pas :) Vous devez définir la fonction ci-dessus document prêt .

— Meldo
source