时间戳

首页 > 解决方案 > 如何将 Python 变量/Jinja2 模板传递给 JavaScript 文件？

javascript - 如何将 Python 变量/Jinja2 模板传递给 JavaScript 文件？

问题描述

我知道您可以将变量传递给您的 html 中的内联 javascript，就像在这个问题中一样：

<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }})
</script>

但是如何将这些数据传递给 javascript 文件中的函数呢？

我想test_func({{ data|safe }})从文件中调用：

    <script src="{{ url_for('static', filename='scripts/highcharts.js') }}"></script>

标签： javascriptpythonhtmlflask

解决方案

如果您的 js 代码使用模块系统，则有更优雅的方法可以做到这一点，但如果我正确理解您的情况，这是一种方法：

<div>blah blah</blah>
<script>
    var window.myData = window.myData = {{ data|tojson }};
</script>

...从您的评论中听起来您正在修改highcharts.js，我原以为这将是一个不可修改的第 3 方文件。但假设你可以修改它，里面highcharts.js会是这样的：

test_func(window.myData);

这假设您myData可以安全地在页面上的所有 js 中全局共享。

另请注意，要使其正常工作，您必须确保在运行window.myData之前已填充highcharts.js。您不应为此依赖异步偶然事件，而应确保始终根据 js 加载规则以正确的顺序加载代码。这是使用某种风格的 js 模块可以解决的另一件事。

转义注意事项：

请注意，我使用的是这里tojson而不是。safe这是 3 分钟谷歌搜索的结果，可能是错误的。但关键是我认为safe这可能不是您想要的，这似乎完全关闭了转义。除非您有信心知道data没有潜在的 XSS 样式攻击字符串，否则您可能希望在这里转义 javascript，而不是 HTML 转义，这可能是默认设置。不过，我不是专家。

推荐阅读