Question

如何从外部 JavaScript 文件访问 HTML 文档中的变量

2018-04-06

2755

javascript html dom

如果我在 HTML 文档的 <script> 标签中有一个变量，我们可以将其称为 example 。

如何在 JavaScript 文件中访问 example ？

<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" href="css/example.css">
	<link rel="icon" href="https://www.example.com/icon.png">
	<title>Exsample</title>
</head>
<body>
	<script>
		var example = "example"
	</script>
</body>

Answer 1

使用 <script> 元素加载的脚本（ type=module 除外）都共享相同的 JS 环境。

一个脚本在全局范围内创建的变量将在所有其他脚本中可用。

唯一的其他条件是您无法在创建变量之前访问它。

<script>
    var example = 1;
</script>
<script>
    console.log(example);
</script>

通过 src 加载脚本的脚本与内联提供的脚本之间没有区别。

Answer 2

您应该能够通过 window.example 访问它。如果 example 在函数中声明，您将无法访问它。您的外部脚本也必须出现在变量声明之后（或者您可以在脚本上使用 defer 选项）：

console.log(window.example);

<script>var example = 'example';</script>

Answer 3

如今，在 2023 年，使用 ES2022，您可以从外部 JavaScript 文件访问 HTML 文档中的 JS 变量，如下所示：

//in your test.js file
const myVar = `John DOE`
export default {myVar}

然后在您的 HTML 文件中

<script type="module">
    import myVar from 'test.js';
    console.log(`myVar=` + myVar)
</script>

控制台返回以下结果：

▶ {myVar: 'John DOE'}