Question

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

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

Answer 1

在包含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>

Answer 2

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

Answer 3

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

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

所有结果都符合预期。

有效。函数f1（）和f2（）通过全局var进行通信（var在外部JS文件中，而不是在HTML文件中）。
他们不会干涉。显然，每个浏览器选项卡，每个HTML页面都有不同的JS文件副本。
所有工作都是独立的，如预期的那样。

我没有浏览教程，而是发现尝试它更容易，所以我做到了。我的结论是：无论何时在HTML页面中包含外部JS文件，外部JS的内容都会在呈现页面之前“复制/粘贴”到HTML页面中。或者如果你愿意，进入你的PHP页面。 如果我错了，请纠正我。 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>
<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>

Answer 4

您好将值从一个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;

Answer 5

如果您使用的是节点：

创建文件以声明值，称其为values.js：

export let someValues = {
  value1: 0
}

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

import { someValues } from './values'

console.log(someValues);

Answer 6

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

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

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

Answer 7

您可以创建一个json对象：

globalVariable={example_attribute:"SomeValue"};

在fileA.js中

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

Answer 8

// Javascript文件1

localStorage.setItem('Data',10);

// Javascript文件2

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

别忘了用html链接您的JS文件：）

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

8 个答案: