Variables globales en Javascript sur plusieurs fichiers

Question

Variables globales en Javascript sur plusieurs fichiers

Demandé el 28 de Mai, 2010: Quand la question a-t-elle été
44988 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Une grande partie de mon code JavaScript se trouve dans un fichier externe appelé helpers.js. Dans le code HTML qui appelle ce code JavaScript, j'ai besoin de savoir si une certaine fonction de helpers.js a été appelée.

J'ai essayé de créer une variable globale en la définissant :

var myFunctionTag = true;

Dans la portée globale à la fois dans mon code HTML et dans helpers.js.

Voici à quoi ressemble mon code html :

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

Est-ce que ce que j'essaie de faire est réalisable ?

Merci,

Demandé el 28 de Mai, 2010 par Goro

1 votes

Eh bien, vous venez de set à false dans le second <script> bloc de balises. Je viens d'essayer deux approches différentes (sans déclarer la variable avant le fichier helpers.js) et elles ont toutes deux fonctionné. Je vais poster une réponse, mais il semble qu'il manque un élément d'information clé dans votre question.

Commenté el 29 de Mai, 2010 par Stephen P

0 votes

Window.onload = function () { //Démarrer votre code } serait la meilleure solution - Et c'est Slowpoke qui parle :)

Commenté el 24 de Octobre, 2013 par Schoening

Answer 1

5 Réponses

Answer 2

140voto

tvanfosson Points 268301

Vous devez déclarer la variable avant d'inclure le fichier helpers.js. Créez simplement une balise script au-dessus de l'include pour helpers.js et définissez-la à cet endroit.

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>

Répondu el 28 de Mai, 2010 par tvanfosson (268301 Points )

17 votes

Ne fonctionne pas pour moi car lorsque j'essaie d'accéder à partir d'un autre js chargé dans un autre html, il dit que la variable n'est pas déclarée.

Commenté el 26 de Mai, 2016 par ACV

0 votes

N'oubliez pas que si vous utilisez defer sur les scripts il pourrait échouer en raison des scripts qui ne s'exécutent pas dans l'ordre que vous attendez

Commenté el 3 de Février, 2022 par ppicom

Answer 3

17voto

Stephen P Points 5521

La variable peut être déclarée dans le .js et simplement référencé dans le fichier HTML. Ma version de helpers.js :

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

Et une page pour le tester :

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

Vous verrez le test alert() affichera deux choses différentes, et la valeur écrite sur la page sera différente la deuxième fois.

Répondu el 29 de Mai, 2010 par Stephen P (5521 Points )

Answer 4

17voto

Martin Points 158

OK, les gars, voici mon petit test aussi. J'ai eu un problème similaire, j'ai donc décidé de tester 3 situations :

Un fichier HTML, un fichier JS externe... cela fonctionne-t-il ? Les fonctions peuvent-elles communiquer via une variable globale ?
Deux fichiers HTML, un fichier JS externe, un navigateur, deux onglets : vont-ils interférer via la var globale ?
Un fichier HTML, ouvert par 2 navigateurs, est-ce que ça va fonctionner et est-ce qu'ils vont interférer ?

Tous les résultats étaient conformes aux attentes.

Cela fonctionne. Les fonctions f1() et f2() communiquent via var global (var est dans le fichier JS externe, pas dans le fichier HTML).
Ils n'interfèrent pas. Apparemment, des copies distinctes du fichier JS ont été faites pour chaque onglet du navigateur, chaque page HTML.
Tout fonctionne indépendamment, comme prévu.

Au lieu de parcourir des tutoriels, j'ai trouvé plus facile de l'essayer, et c'est ce que j'ai fait. Ma conclusion : chaque fois que vous incluez un fichier JS externe dans votre page HTML, le contenu du JS externe est "copié/collé" dans votre page HTML avant que la page ne soit rendue. Ou dans votre page PHP si vous préférez. Veuillez me corriger si je me trompe. Merci.

Voici mes exemples de fichiers :

EXTERNAL JS :

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

Répondu el 2 de Janvier, 2013 par Martin (158 Points )

2 votes

HTML 1 et HTML 2 sont identiques (sauf le titre de la page)... j'ai quand même fait deux fichiers, juste pour les avoir physiquement séparés.

Commenté el 2 de Janvier, 2013 par Martin

0 votes

Mais c'est l'utilisation standard de fichiers js......

Commenté el 4 de Mai, 2021 par Brethlosze

Answer 5

3voto

MrJ Points 46

//Fichier javascript 1

localStorage.setItem('Data',10);

//Fichier javascript 2

var number=localStorage.getItem('Data');

N'oubliez pas de lier vos fichiers JS en html :)

Répondu el 16 de Août, 2018 par MrJ (46 Points )

Answer 6

2voto

Sajith Points 153

Pour passer des valeurs d'un fichier js à un autre fichier js, nous pouvons utiliser le concept de stockage local.

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Fichier Two.js

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Fichier Three.js

localStorage.name = 1;

Répondu el 18 de Juin, 2018 par Sajith (153 Points )

Variables globales en Javascript sur plusieurs fichiers

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Variables globales en Javascript sur plusieurs fichiers

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: