Django - 将变量传递给同一脚本标签内的 javascript 文件

Posted 2023-02-23

【中文标题】Django - 将变量传递给同一脚本标签内的 javascript 文件

【英文标题】：Django - passing variable to javascript file within same script tag

【发布时间】：2018-02-16 20:59:29

【问题描述】：

我正在尝试将我的变量从 Django 的视图传递到一个 javascript 文件。我在这里阅读了堆栈问题 (How can I pass my context variables to a javascript file in Django?) 以获得一些指导，但我正在尝试一些不同的东西。我想将变量传递给该特定 javascript 引用脚本标记中的 javascript 文件或更改变量声明的顺序。通过示例更容易展示：

我的 somerandom.js：

console.log(variable);

工作原理：

% extends base.html %
% load static %
% block body %
    <h1> Hello, World! </h1>
% endblock body %
% block javascript %
    <script>
      var variable =  my_var ;
    </script>
    <script src="% static "app1/bootstrap/js/somerandom.js" %"></script>
% endblock javascript %

什么不起作用：

编辑：它不起作用，因为在开发人员工具中（在 Chrome 中按 F12）我看到了这个错误：Uncaught ReferenceError: variable is not defined

1：

% extends base.html %
% load static %
% block body %
    <h1> Hello, World! </h1>
% endblock body %
% block javascript %
    <script src="% static "app1/bootstrap/js/somerandom.js" %"></script>
    <script>
      var variable =  my_var ;
    </script>
% endblock javascript %

2：

% extends base.html %
% load static %
% block body %
    <h1> Hello, World! </h1>
% endblock body %
% block javascript %
    <script src="% static "app1/bootstrap/js/somerandom.js" %">
      var variable =  my_var ;
    </script>
% endblock javascript %

我希望这两个工作的原因是，一旦我的代码变长，我就可以正确地组织和引用我的变量。在这个链接（http://www.mutaku.com/wp/index.php/2012/03/accessing-django-template-variables-in-javascript/）中，它表明我们可以在引用 javascript 文件后声明变量。

【问题讨论】：

什么不起作用？你能给我们一个错误字符串或一些堆栈跟踪吗？你看到的“错误”是什么？

我添加了我看到的错误消息。基本上它说“未定义变量”。

如果您的somerandom.js 尝试访问variable，则在您稍后声明时收到此错误是正常的。我非常怀疑您链接到的页面中的方法是否有效。

somerandom.js 正在访问变量（它基本上通过控制台输出变量内容）。有什么方法可以让我在任何地方声明它吗？我希望它只被 somerandom.js 文件而不是其他文件调用。

当你在这个例子中全局声明一个 JS 变量时，无论你如何包含它，所有函数都可以访问它，即。您的方法 (2) 与 (1) 没有什么不同。

【参考方案1】：

当您使用带有 src= ... 和 content 的 <script> 标签时，行为是未定义的，并且与您正在使用的浏览器密切相关：例如使用 chrome脚本从src=... 加载，<script> 的内容被忽略 但是强烈建议不要使用它

【参考方案2】：

用双引号将 Django 变量括起来对我有用。然后在变量声明之后调用 .js 文件。

<script>
    var variable = " my_var ";
</script>
<script type="text/javascript" src="% static ... %"></script>

这是因为console.log( my_var ) 不会将变量打印到控制台，但console.log(" my_var ") 会打印它。