Javascript: Global variables shared between .js files

Question

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"

Consider minimizing the use of global properties (global variables and global functions). The global namespace already contains hundreds of names - you don't want to push your own names into that namespace. — Šime Vidas, Dec 07 '11 at 13:46
Yeah agreed - I know you may already know this, but globals are almost always a terrible way to do things. Abstract logic into functions and pass parameters around instead. Signed, the guy who has to maintain your spaghetti code one day :) — Rob Grant, Dec 02 '13 at 07:36

score 28 · Accepted Answer · edited May 23 '17 at 12:32

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.

tks for your answer. Using top and declaring the global variables before the actual file works in IE and firefox, but need works in chrome =/. Any Idea ? — vctlzac, Dec 07 '11 at 15:51
Note: if you load an iframe inside this document, use `parent.` instead of `window.` — user, Jun 10 '13 at 20:38

Pointy · Answer 2 · 2011-12-07T14:36:05.347

10

There's no global context that spans windows (frames), really. All frames in a "family" have access to a variable called "top" that refers to the topmost window, so you could use that.

top.glob = "global variable";

and in your iframe code:

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

edit — Here is a a slightly simplified version of your code, and it works fine for me.

edited Dec 07 '11 at 14:36

answered Dec 07 '11 at 13:41

Pointy

405,095
59
585
614

Well it all depends on when those pieces of code execute, etc. I'll set up a jsfiddle. – Pointy Dec 07 '11 at 14:28
@vctlzac I've updated my answer with a link to a sample page, which works. It's based on the code you posted (slightly simplified). – Pointy Dec 07 '11 at 14:36
Hey Pointy, thanks for your answer. This changing them is not required (delete help.js and insert the method callTest in main.js). I found that actually the problem is the browser. The response from @ The Elite Noob, and its (using top) works fine in IE and Firefox, but not working in chrome; '(. Any ideas? – vctlzac Dec 07 '11 at 15:43
Thanks a lot! I need to replace a script path in "require" for testing. I tried to read the file into string, replace and eval it. It was ugly solution itself and moreover, it didn't work with jest. Your idea to keep variables (in my case - a script path value) in "top" object make my code much simpler and better. – ChelowekKot Jul 02 '20 at 04:39

score 2 · Answer 3 · answered Dec 07 '11 at 13:44

2

When you are inside a frame and want to get a window variable from the parent window, you must refer to it.

Use top or window.top.

answered Dec 07 '11 at 13:44

Gabriel Gartz

2,840
22
24

Javascript: Global variables shared between .js files

3 Answers3

Linked