Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript: Global variables shared between .js files

I'm having problems with global variables.

Considering that I have the following files: init.html, main.html, init.js, main.js and help.js :

Where, init.html:

<HTML>
   <HEAD>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
   <script type="text/javascript" charset="UTF-8" src="init.js" ></script>
   <script type="text/javascript" charset="UTF-8" src="main.js" ></script>
   <script type="text/javascript" charset="UTF-8" src="help.js" ></script>

   </HEAD>
   <BODY>
       <script>
          $(document).ready(function() {
          test();
        });
       </script>
  </BODY>
</HTML>

In init.js :

function test(){
alert(window.glob);
}

In main.html :

<HTML>
  <HEAD>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
      <script type='text/javascript' > 
          top.glob = "global variable";
      </script>
      <script type="text/javascript" charset="UTF-8" src="help.js" ></script>   
      <script type="text/javascript" charset="UTF-8" src="main.js" ></script>
  </HEAD>
  <BODY>    
     <div id="divtest"></div> 
     <form>
        <input type="button" value="button" onClick="callTest()" />
     </form>
  </BODY>
</HTML>

main.js:

function change(p){
   window.glob = p;

   $('#divtest').html("<iframe id='IFRAMEtest' width='720' height='400' frameborder='0' src='init.html'></iframe>");
}

And in help.js :

function callTest(){
 change('param');
}

When I click in button, displays "global variable", but I need to display "param".

In short, I need that a .js file read a global variable in another js file where this variable is fed into a function called by an event of a user.

Thanks.

edit - initialized global variable before importing files. js and using top. Works in IE and firefox, but chrome display "undefined"

like image 206
vctlzac Avatar asked Dec 07 '11 13:12

vctlzac


People also ask

How do I share a variable across a JavaScript file?

In JavaScript, variables can be accessed from another file using the <script> tags or the import or export statement. The script tag is mainly used when we want to access variable of a JavaScript file in an HTML file.

Can global variables be used in different files?

Initialization — if a global variable is declared in more than one source file in a library, it should be initialized in only one place or you will get a compiler error. Static — use the static keyword to make a global variable visible only to functions within the same source file whenever possible.

How do I pass a variable from one script to another in JavaScript?

There are two ways to pass variables between web pages. The first method is to use sessionStorage, or localStorage. The second method is to use a query string with the URL.


1 Answers

Take a look here: Global variables in Javascript across multiple files The main thing is, that you may have to declare the global variables before the actual file, so try inserting this before your inclusion to help.js

so try giving this a shot.

<script type='text/javascript' > 
  window.glob = "global variable"; 
</script>

so your code should be:

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js" ></script>

    <script type='text/javascript' > 
        window.glob = "global variable";
    </script>

    <script type="text/javascript" charset="UTF-8" src="help.js" ></script>   
    <script type="text/javascript" charset="UTF-8" src="main.js" ></script>
</head>

try that and see if it works. also, remove your global variable declaration from main.js for this.

like image 85
Rivasa Avatar answered Nov 15 '22 17:11

Rivasa