Variables globales en Javascript sur plusieurs fichiers

130

Une 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 tenté de créer une variable globale en définissant:

var myFunctionTag = true;

Dans une 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>

Ce que j'essaie de faire est-il même réalisable?

— Goro
source

1

Eh bien, vous venez de le définir sur false dans le deuxième <script>bloc de balises. J'ai juste essayé 2 approches différentes (sans déclarer le var avant le fichier helpers.js) et elles ont toutes les deux fonctionné. Je vais publier une réponse, mais il semble qu'il doit y avoir une information clé manquante dans votre question.

— Stephen P

window.onload = function () {// Démarrez votre code} Serait la meilleure solution - Et c'est parler Slowpoke :)

— Schoening

125

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

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

— Tvanfosson
source

10

ne fonctionne pas pour moi car lorsque vous essayez d'accéder à partir d'un autre js chargé dans un autre html, cela dit que la variable n'est pas déclarée

— ACV

16

La variable peut être déclarée dans le .jsfichier et simplement référencée 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 que le test alert()affichera deux choses différentes et la valeur écrite sur la page sera différente la deuxième fois.

— Stephen P
source

15

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 ... ça marche du tout - 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 variable globale?
Un fichier HTML, ouvert par 2 navigateurs, fonctionnera-t-il et interférera-t-il?

Tous les résultats étaient comme prévu.

Ça marche. Les fonctions f1 () et f2 () communiquent via global var (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 les didacticiels, j'ai trouvé plus facile de l'essayer, donc je l'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 voulez. Veuillez me corriger si je me trompe ici. Merci.

Mes fichiers d'exemple suivent:

JS EXTERNE:

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>

— Martin
source

1

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

— Martin

1

Je pense que vous devriez utiliser le "stockage local" plutôt que des variables globales.

Si vous craignez que le "stockage local" ne soit pas pris en charge dans les navigateurs très anciens, envisagez d'utiliser un plug-in existant qui vérifie la disponibilité du "stockage local" et utilise d'autres méthodes s'il n'est pas disponible.

J'ai utilisé http://www.jstorage.info/ et j'en suis satisfait jusqu'à présent.

— paulo62
source

1

Vous pouvez créer un objet json comme:

globalVariable={example_attribute:"SomeValue"};

dans fileA.js

Et accédez-y depuis fileB.js comme: globalVariable.example_attribute

— partizanos
source

1

Salut pour transmettre les 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;

— Sajith
source

1

Si vous utilisez node:

Créez un fichier pour déclarer une valeur, disons qu'il s'appelle values.js:

export let someValues = {
  value1: 0
}

Ensuite, importez-le simplement au besoin en haut de chaque fichier dans lequel il est utilisé (par exemple file.js):

import { someValues } from './values'

console.log(someValues);

— Jared Wilber
source

-1

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

— MrJ
source