2010-05-28 14 views
98

Un montón de mi código JavaScript se encuentra en un archivo externo llamado helpers.js. Dentro del HTML que llama a este código JavaScript, necesito saber si se ha llamado a cierta función de helpers.js.Variables globales en Javascript en varios archivos

He intentado crear una variable global, definiendo:

var myFunctionTag = true; 

En el ámbito global, tanto en mi código HTML y en helpers.js.

Esto es lo que mi código HTML se parece a:

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

es lo que estoy tratando de hacer, incluso factible?

+0

Bueno, que acaba de configurar * * es falso en el segundo bloque de etiquetas '

15

La variable puede ser declarado en el archivo .js y simplemente hace referencia en el archivo HTML. Mi versión 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"); 
    } 
} 

y una página para probar que:

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

Vas a ver la prueba alert() mostrará dos cosas diferentes, y el valor escrito en la página serán diferentes la segunda vez.

13

Bien, chicos, esta es mi pequeña prueba también. He tenido un problema similar, por lo que decidí probar 3 situaciones:

  1. un archivo HTML, un archivo externo de JS ... funciona en absoluto - funciones se pueden comunicar a través de una var global?
  2. Dos archivos HTML, un archivo JS externo, un navegador, dos pestañas: ¿interferirán a través de la var global?
  3. Un archivo HTML, abierto por 2 exploradores, ¿funcionará e interferirá?

Todos los resultados fueron los esperados.

  1. Funciona. Las funciones f1() y f2() se comunican a través de var global (var está en el archivo JS externo, no en el archivo HTML).
  2. No interfieren. Aparentemente se han realizado copias distintas del archivo JS para cada pestaña del navegador, cada página HTML.
  3. Todo funciona de forma independiente, como se esperaba.

En vez de buscar tutoriales, me pareció más fácil de probar, así que lo hice. Mi conclusión: cada vez que incluya un archivo JS externo en su página HTML, el contenido del JS externo se "copiará/pegará" en su página HTML antes de que se procese la página. O en su página PHP, si lo desea. Por favor corrígeme si me equivoco aquí. Gracias.

Mis archivos de ejemplo siguen:

externo de 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> 
+1

HTML 1 y HTML 2 son idénticos (excepto el título de la página) ... aún así, hice dos archivos, solo para separarlos físicamente. – Martin

1

pienso que usted debe utilizar "local almacenamiento "en lugar de globa l variables.

Si le preocupa que el "almacenamiento local" no sea compatible con navegadores muy antiguos, considere usar un complemento existente que verifique la disponibilidad de "almacenamiento local" y utilice otros métodos si no está disponible.

He usado http://www.jstorage.info/ y estoy contento con eso hasta ahora.

0

Puede hacer que un objeto JSON como:

globalVariable={example_attribute:"SomeValue"}; 

en fileA.js

y acceder a ella desde fileB.js como: globalVariable.example_attribute