简体   繁体   中英

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"

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.

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);
}

editHere is aa slightly simplified version of your code , and it works fine for me.

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 .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM