如何使用 javascript 从 html 文件中将变量插入到 js 文件中？ [复制]答案

【问题标题】：How to insert a variable in a js file from a html file using javascript? [duplicate]如何使用 javascript 从 html 文件中将变量插入到 js 文件中？ [复制]
【发布时间】：2014-06-29 17:32:27
【问题描述】：

我正在为我的网站使用Rain.tpl 模板引擎。我现在有一个变量 ($username)，可以在我的常规 html 文件中使用{$username}。这工作正常。

我现在想在单独的 .js 文件中使用相同的变量，我使用 <script src="/js/MySeparateJsFile.js"></script> 将其加载到 thml 文件中。我尝试在其中使用{$username}，但这似乎不起作用。所以我想在 html 文件中使用 Javascript 设置它，但我不知道我将如何做到这一点。

有人知道如何将 html 文件中的 javascript 变量插入到 .js 文件方法中吗？欢迎所有提示！

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

在Rain.tpl 文件中将用户名声明为一个js 全局变量，如window.username。在MySeparateJsFile.js 文件中使用这个全局变量

Rain.tpl

<script>
window.username = "{$username}";
</script>

js 文件

var username = window.username;

【讨论】：

【解决方案2】：

在您的 html 文件中，代码正下方：

<script> var username= "{$username}";</script>

现在可以在您的 js 文件中访问变量用户名

【讨论】：

【解决方案3】：

默认情况下只会处理和执行.php 文件。通常，您会将任何变量作为 JavaScript 变量输出到模板中，以便所有外部 JavaScript 文件都可以访问它们。

如果您有多个变量，最好的方法是在 PHP 端对它们进行 JSON 编码，并将原始结果输出到 JavaScript：

<?php
$user = array('username' => $username, 'userId' => $userId);
$userJson = json_encode($user);

在模板中

<script>
    var user = {$userJson};
</script>

注意，通过模板引擎输出 JSON 时，必须确保输出的是原始数据，而不是使用任何过滤器（例如htmlspecialchars()）。

现在，您可以在外部 JavaScript 或任何页面 JavaScript 中访问变量：

console.log( user.username );
console.log( user.userId );

JSON 编码方式解决了两个问题：

防止 XSS 漏洞，因为任何恶意内容都会被 JSON 编码引擎转义。
可以对大量变量进行分组，或者为您的应用程序使用命名空间。

【讨论】：

【解决方案4】：

在脚本中添加数据属性

<script id="myscript"  data-username="{$username}" src="/js/MySeparateJsFile.js"></script>

并从您的 javascript 访问它：

var username = document.getElementById("myscript").getAttribute("data-username");

【讨论】：