Question

我知道您可以像在this question中那样，将变量传递给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>

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之间进行全局共享。

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

关于转义的注意事项：

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

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

1 个答案:

关于转义的注意事项：