web-dev-qa-db-fra.com

Variables globales en Javascript sur plusieurs fichiers

Une partie de mon code JavaScript se trouve dans un fichier externe appelé helpers.js. Dans le code HTML qui appelle ce code JavaScript, je dois savoir si une fonction particulière de helpers.js a été appelée.

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

var myFunctionTag = true;

De 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 même faisable?

javascriptscopeglobal-variablesglobal
116
Goro

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 à 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>
112
tvanfosson

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

16
Stephen P

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

  1. Un fichier HTML, un fichier JS externe ... fonctionne-t-il - les fonctions peuvent-elles communiquer via une variable globale?
  2. Deux fichiers HTML, un fichier JS externe, un navigateur, deux onglets: interféreront-ils via la variable globale?
  3. Un fichier HTML, ouvert par 2 navigateurs, fonctionnera-t-il et interférera-t-il?

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

  1. Ça marche. Les fonctions f1 () et f2 () communiquent via une variable globale (celle-ci se trouve dans le fichier JS externe et non dans le fichier HTML).
  2. Ils n'interfèrent pas. Des copies distinctes du fichier JS ont apparemment été créées pour chaque onglet du navigateur, chaque page HTML.
  3. Tout fonctionne indépendamment, comme prévu.

Au lieu de parcourir les tutoriels, il m'a été plus facile de l'essayer, alors 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 PHP page si vous voulez. S'il vous plaît, corrigez-moi si je me trompe ici. Merci.

Mes exemples de fichiers suivent:

JS EXTÉRIEUR:

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

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;
1
Sajith

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

0
MrJ

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

Si vous craignez que le "stockage local" ne soit peut-être pas pris en charge par les très vieux navigateurs, 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.

0
paulo62

Vous pouvez créer un objet JSON comme:

globalVariable={example_attribute:"SomeValue"};

dans fileA.js

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

0
partizanos