如何在 JavaScript 文件中使用 Django 变量？

Posted 2023-02-23

技术标签:

【中文标题】如何在 JavaScript 文件中使用 Django 变量？【英文标题】：How to use Django variable in JavaScript file? 【发布时间】：2016-08-09 21:38:10 【问题描述】：

我知道我们可以通过 variable 在模板（html 文件）中使用 Django 变量，但是如何在模板中包含的 javascript 文件中使用变量 Django？

例如这里是我的template.html：

<html>
<head>
<script src="/static/youtube.js"></script>
...

如何在 youtube.js 中使用变量 user.get_username？不在 template.html 中，因为我没有在这里写我的脚本......当我在 Javascript 文件 youtube.js 中使用 user.get_username 时，它会导致错误“invalid token ”，但在模板中它可以工作很好。

非常感谢！

【问题讨论】：

【参考方案1】：

你需要在你的脚本标签之前打印它

<html>
<head>
<script>
    var username = user.get_username;
</script>
<script src="/static/youtube.js"></script>
...

然后您可以在 youtube.js 中使用 username 变量，因为它被声明为 javascript 全局变量。

【讨论】：

事实上后来我得到了一个错误，例如我的用户名是汤姆，控制台窗口中有什么：Uncaught ReferenceError: Tom is not defined 这是因为你使用Tom作为变量名，而“Tom”是变量username的内容不，我是以“Tom”这个名字登录的，我在脚本中使用了 var username = user.get_username 但我得到了错误如果您收到错误提示 Tom 未定义，是因为您试图将其用作变量。请告诉我您正在尝试什么，我会尽力帮助您，但这与您的原始问题无关。我按照您的建议在模板中定义了一个变量全局用户名，并且我的标签有一个属性所有者名称...看来我应该使用 var username = "user.get_username" 原因所有者名称是字符串，非常感谢我的问题解决了:)【参考方案2】：

使用较新版本的 Django，他们实现了一种方法。这样你也可以免受 XSS 的攻击

https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#json-script

在您的 Django 变量中添加 |json_script:'id_of_the_script_tag'

 cart_total|json_script:'cart_total'

这将创建一个带有 id=cart_total 的 HTML <script> 标记

在 javascript 文件中解析 JSON 并将其保存在您的变量中

const cart_total = JSON.parse(document.getElementById('cart_total').textContent);

【讨论】：

【参考方案3】：

上述解决方案几乎是正确的，只需将 Django 变量更改为 String 即可。

<html>
<head>
<script>
    var username = "user.get_username";
</script>
<script src="/static/youtube.js"></script>