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

我正在使用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 %}

 <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，这让我觉得这是一个简单的语法错误，缺少一个或类似的东西，但我找不到任何东西

---

谢谢。

发生的事情是，对于所有文件扩展名为

.html

（和）的文件，都应用了某些安全性，即通过将html特殊字符（如

和其他一些字符）转换为等效的html实体来过滤掉它们。要确保字符串未转义，请将渲染部分更改为：

{% block code %}
   {{js|safe}}
{% endblock code %}

---

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

另一种解决方案是使用类将

js

变量标记为可以安全地直接包含在python代码中：

这比在模板代码中使用

|safe

过滤器更可取，因为：

您可以指示变量在其定义位置是安全的；这避免了必须记住此信息，并可能防止双重转义

在模板和Python代码分别编写的情况下（例如，由两个不同的人编写，或在不同的时间编写），您不需要向模板设计器传达变量的安全性

---

谢谢你这个善良的人。这就成功了。我还必须将var data={{powertree}}更改为var data={{{powertree | tojson}}才能让它正常工作。这也是有道理的，可能最终就是我所做的。谢谢。：）

from jinja2 import Markup

infoDict['js']= Markup(js)