Question

我正在使用jinja2编写Flask应用程序，我正在尝试将我的Python变量传递到一些Javascript和HTML中。我制作了Javascript和HTML模板，但由于某种原因，Javascript被渲染并显示在错误的位置，我无法弄清楚问题是什么。

我的控制器代码传递我的Python数据，并呈现我的模板：

@info_page.route('/info.html', methods=['GET'])

def info():
    ''' Documentation here. '''

    session = db.Session()
    infoDict = {}
    jsDict = {}

    ... 

    infoDict['character'] = character
    infoDict['name']=name
    jsDict['powertree']=powertree

    js = render_template('powertree.js', **jsDict)
    infoDict['js']=js

    return render_template("info.html", **infoDict)

info.html的模板是：

{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="    {{url_for('static',filename='css/index.css')}}">
{% endblock head %}

{% block code %}
   {{js}}
{% endblock code %}

{% block body %}
    <h1>{{name}}</h1>
  ...
{% endblock body %}

powertree.js的模板是：

 <script type='text/javascript'>
    $(document).ready(function() {

    var data = {{powertree}};
    console.log('hello, inside powertree');

    });
 </script>

呈现的Javascript代码只是显示在我的网页顶部。查看DOM显示它显示在HTML正文内部，而不是HTML头部所在的位置。如果我删除{{js}}并将其替换为powertree.js中的实际代码，则所有内容都会呈现正常，并按预期工作。但是我宁愿把我的Javascript保存在一个单独的文件中，因为它会花很长时间。为什么这不起作用？如何轻松地将我的变量传递给Javascript代码，以便我可以参考我的js中的{{powertree}}示例？因为它只是在我的网页顶部显示Javascript，这让我觉得这是一个简单的语法错误，缺少或类似的东西，但我找不到任何东西。

感谢。

Answer 1

对于文件扩展名为.html（和a few others）的所有文件，应用了某些安全措施，即过滤掉html特殊字符（如<，{{1通过将它们转换为等效的html实体，以及其他一些refer to the documentation）。要确保不转义字符串，您需要将渲染部件更改为：

请注意，您必须确保您的代码不包含任何原始用户输入，因为这会打开XSS漏洞。

Answer 2

另一个解决方案是使用Markup类将js变量直接标记为可以包含在您的python代码中：

from jinja2 import Markup

infoDict['js']= Markup(js)

这比在模板代码中使用|safe过滤器更可取，因为：

您可以指出变量在定义变量的位置是安全的;这样可以避免记住这些信息，并可能防止双重逃逸。
如果模板和Python代码是分开编写的（例如，由两个不同的人，或在不同的时间），您不需要将变量的安全性传达给模板设计师。

Javascript无法在Flask jinja2模板中正确呈现

2 个答案: