首页 文章

Javascript中的全局变量跨多个文件

提问于
浏览 次
111

我的一堆JavaScript代码位于名为helpers.js的外部文件中 . 在调用此JavaScript代码的HTML中，我发现自己需要知道是否已调用helpers.js中的某个函数 .

我试图通过定义创建一个全局变量：

var myFunctionTag = true;

在我的HTML代码和helpers.js中的全局范围 .

下面是我的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>

我想做的甚至是可行的吗？

javascript scope global-variables global

7 回答

  • 15

    在包含helpers.js文件之前，需要声明变量 . 只需在include for helpers.js上面创建一个脚本标记，然后在那里定义它 .

    <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>
    回复于
  • 107

    该变量可以在 .js 文件中声明，只需在HTML文件中引用即可 . 我的版本 helpers.js ：

    var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

    还有一个测试它的页面：

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

    你会看到测试 alert() 会显示两个不同的东西，写入页面的值第二次会有所不同 .

    回复于
  • 16

    好的，大家好，这也是我的小测试 . 我有类似的问题，所以我决定测试3种情况：

    • 一个HTML文件，一个外部JS文件......它是否可以工作 - 函数可以通过全局变量进行通信吗？

    • 两个HTML文件，一个外部JS文件，一个浏览器，两个选项卡：它们是否会通过全局变量进行干扰？

    • 一个HTML文件，由2个浏览器打开，它会起作用吗？它们会干扰吗？

    所有结果都符合预期 .

    • 它有效 . 函数f1（）和f2（）通过全局var进行通信（var在外部JS文件中，而不是在HTML文件中） .

    • 他们不会干涉 . 显然，每个浏览器选项卡，每个HTML页面都有不同的JS文件副本 .

    • 所有都按预期独立工作 .

    我没有浏览教程，而是更容易尝试，所以我做到了 . 我的结论是：无论何时在HTML页面中包含外部JS文件，外部JS的内容都会在呈现页面之前进入HTML页面"copy/pasted" . 或者如果你愿意，进入你的PHP页面 . Please correct me if I'm wrong here. Thanx .

    我的示例文件如下：

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

    
<button type="button" id="button2" onclick="f2();"> fire f2 </button>

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

    
<button type="button" id="button2" onclick="f2();"> fire f2 </button>

    
</body>
</html>
    回复于
  • 0

    嗨，要将值从一个js文件传递到另一个js文件，我们可以使用本地存储概念

    <body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

    Two.js文件

    function myFunction() {
var test =localStorage.name;

 alert(test);
}

    Three.js文件

    localStorage.name = 1;
    回复于
  • 0

    我认为你应该使用“本地存储”而不是全局变量 .

    如果您担心在非常旧的浏览器中可能不支持“本地存储”，请考虑使用现有的插件来检查“本地存储”的可用性，并使用其他方法（如果不可用） .

    我使用了http://www.jstorage.info/，到目前为止我很满意 .

    回复于
  • 1

    您可以创建一个json对象：

    globalVariable={example_attribute:"SomeValue"};

    在fileA.js中

    并从fileB.js访问它，如： globalVariable.example_attribute

    回复于
  • 0

    // Javascript文件1

    localStorage.setItem('Data',10);

    // Javascript文件2

    var number=localStorage.getItem('Data');

    Don't forget to link your JS files in html :)

    回复于

相关问题