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

Gor*_*oro 121 javascript scope global global-variables

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

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

var myFunctionTag = true;
Run Code Online (Sandbox Code Playgroud)

在我的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>
Run Code Online (Sandbox Code Playgroud)

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

tva*_*son 117

在包含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>
Run Code Online (Sandbox Code Playgroud)

  • 对我不起作用,因为当试图从另一个html中加载的另一个js访问时,它表示该变量未被声明 (9认同)

Ste*_*n P 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");
    }
}
Run Code Online (Sandbox Code Playgroud)

还有一个测试它的页面:

<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>
Run Code Online (Sandbox Code Playgroud)

您将看到测试alert()将显示两个不同的内容,写入页面的值将第二次不同.


Mar*_*tin 15

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

  1. 一个HTML文件,一个外部JS文件......它是否可以工作 - 函数可以通过全局变量进行通信吗?
  2. 两个HTML文件,一个外部JS文件,一个浏览器,两个选项卡:它们是否会通过全局变量进行干扰?
  3. 一个HTML文件,由2个浏览器打开,它会工作,它们会干扰吗?

所有结果都符合预期.

  1. 有用.函数f1()和f2()通过全局var进行通信(var在外部JS文件中,而不是在HTML文件中).
  2. 他们不会干涉.显然,每个浏览器选项卡,每个HTML页面都有不同的JS文件副本.
  3. 正如预期的那样,所有工作都独

我没有浏览教程,而是更容易尝试,所以我做到了.我的结论是:无论何时在HTML页面中包含外部JS文件,外部JS的内容都会在呈现页面之前"复制/粘贴"到HTML页面中.或者如果你愿意,进入你的PHP页面.如果我错了,请纠正我.感谢名单.

我的示例文件如下:

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);
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

  • HTML 1 和 HTML 2 是相同的(除了页面标题)...不过,我制作了两个文件,只是为了让它们在物理上分开。 (2认同)