web-dev-qa-db-fra.com

Appeler une fonction javascript dans un autre fichier js

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 dans first.js dans second.js. D'après mes recherches, les réponses étaient: si first.js est dé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");
}
javascripthtml
106
m0j1

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

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

Vous déclarez la fonction fn1 dans first.js, puis en seconde, vous pouvez simplement avoir 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>
129
Fernando Mendez

Vous pouvez faire de la fonction une variable globale dans first.js et regarder fermeture et ne pas la mettre dans document.ready la mettre à l'extérieur

vous pouvez aussi utiliser ajax

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

de la même manière, 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." );
});
22
Gildas.Tambo

1er JS:

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

2e JS:

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

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

18
Akshay Tyagi

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>

sortie

Output. Button + Result

Essayez cet extrait de CodePen: link .

5
Consta Gorgan

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

Utilisez le cache si votre serveur le permet pour 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)
);

Vous pouvez éventuellement en créer 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 le code de plusieurs fichiers.

2
Thielicious
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
});
1
phpnerd

Veuillez noter que cela ne fonctionne que si le

<script>

les étiquettes 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.

1
user213979

J'ai eu le même problème. J'ai eu des fonctions définies dans jquery document ready function.

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

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

0
Meldo