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

Question

我知道你可以把一个变量传递给html中的内联javascript，就像this question一样。

<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>

Answer 1

如果您的js代码使用模块系统，则有更好的方法来实现此目的，但除此之外，如果我对您的情况理解正确的话，这只是一种方法：

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

..。从你的评论中听起来你是在修改highcharts.js，我本以为这是一个不可修改的第三方文件。但是假设你可以修改它，在highcharts.js中应该是这样的：

test_func(window.myData);

这假设您的myData在页面上的所有js之间全局共享是安全的。

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

转义注意事项：

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