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

130

我的一堆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>

我想做的事可行吗？

— 五郎
source

1

好吧，您只需在第二个标记块中将其设置为false即可<script>。我只是尝试了2种不同的方法（没有在helpers.js文件之前声明var），但它们都起作用。我会发布一个答案，但看来您的问题中肯定缺少一些关键信息。

— 斯蒂芬·P

在window.onload =函数（）{//开始你的代码}会在最佳的解决方案-这是个慢性子来说:)

— Schoening

125

您需要在包含helpers.js文件之前声明变量。只需在helpers.js的include上方创建一个脚本标签，然后在其中定义它。

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

— 特凡福森
source

9

对我不起作用，因为当尝试从另一个HTML中加载的另一个JS访问时，它说未声明该变量

— ACV 2016年

16

变量可以在.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()将显示两个不同的内容，并且第二次写入页面的值将有所不同。

— 斯蒂芬·P
source

15

好，伙计们，这也是我的小测试。我遇到了类似的问题，所以我决定测试3种情况：

一个HTML文件，一个外部JS文件...完全可以工作-函数可以通过全局变量进行通信吗？
两个HTML文件，一个外部JS文件，一个浏览器，两个标签：它们会通过全局变量干扰吗？
一个由2个浏览器打开的HTML文件，它将起作用并且会干扰吗？

所有结果均符合预期。

有用。函数f1（）和f2（）通过全局var通信（var在外部JS文件中，而不在HTML文件中）。
他们不干涉。显然，每个浏览器选项卡，每个HTML页面都已制作了JS文件的不同副本。
所有工作均独立于预期。

与其浏览教程，不如尝试起来更容易，所以我做到了。我的结论是：只要在HTML页面中包含外部JS文件，外部JS的内容就会在呈现页面之前“复制/粘贴”到HTML页面中。或者，如果愿意的话，进入您的PHP页面。如果我错了，请纠正我。谢谢

我的示例文件如下：

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

— 马丁
source

1

HTML 1和HTML 2是相同的（页面标题除外）...不过，我还是制作了两个文件，只是为了使它们物理上分开。

— 马丁

1

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

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

我使用了 http://www.jstorage.info/，到目前为止，我对此感到满意。

— 保罗62
source

1

您可以制作一个json对象，例如：

globalVariable={example_attribute:"SomeValue"};

在fileA.js中

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

— 游击队
source

1

嗨，我们可以使用本地存储概念将值从一个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;

— 萨吉斯
source

1

如果您使用的是节点：

创建文件声明值，说它叫做values.js：

export let someValues = {
  value1: 0
}

然后只需根据需要将其导入到每个文件的顶部（例如file.js）：

import { someValues } from './values'

console.log(someValues);

— 贾里德·威尔伯（Jared Wilber）
source

-1

// Javascript文件1

localStorage.setItem('Data',10);

// Javascript文件2

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

不要忘记在html中链接您的JS文件：）

— 先生
source