Question

我正在尝试传递一个HTML列表（html构造一个交互式图形 - ['some html'，'some html']。现在，我在探索以下几个想法后遇到了很多麻烦：

在传递python端的列表之前应用Markup。如果我将HTML列表直接传递给模板的HTML部分
应用过滤器“tojson”和“safe”
在python端使用json.dumps
JSON.parse，一旦我将它转换为json

我遇到的问题：

网站实际上会打印出javascript或跳过整个javascript的第一部分，我写了警告等等（这种情况发生在我只用标记和安全的时候）。
不是将图表分配到正确的div中，而是在它们之后随机出现。
显示图表但打印出不应包含在内容中的部分内容，如“标记”（。
“syntaxError：意外令牌＆amp;”
同时尝试显示文字列表，网站不会同时显示

目标：传递HTML列表（代表图形）和文本列表，浏览它们，用JS将它们分配给div，并排显示它们。一个文本条目旁边的一个图形。

代码：*循环遍历图表html列表和文本列表。

<script>
    function createDashboard(){
        alert("here!");
        summaries = {{content|safe}};
        summary = document.getElementById('analysis');
        for(var i = 0; i < summaries.length;i++){
            var div = document.createElement('div');
            for (line in summaries[i]){
                var para = document.createElement('p');
                para.innerHTML = summaries[i][line];
                summary.appendChild(para);
            }
        }
        graphs = {{div|safe}};
        graph_div = document.getElementById('graph');
        for(var h = 0; h < graphs.length;h++){
            var div = document.createElement('div');
            div.innerHTML = graphs[i];
            graph_div.appendChild(div);
        }
    }
     window.onload = function(){
        createDashboard();
    };
</script>
</html>

Answer 1

您可以使用模板中的div过滤器将content和safe标记为 safe ，也可以在将它们传递到您的模板中查看功能。

def escape_script(data):
    """ This escapes the closing script tags.
    """
    markup = Markup(data)
    markup_string = str(markup)
    replacement = markup_string.replace('</script>', '<\/script>')
    return replacement

@app.route('/', methods=['GET'])
def index():
    div = ['<div><script type="text/javascript">/**\n* plotly.js v1....</script>'] 

    content = [['Total number of SNR 30mm tests run: 8\n', 'Total number of passed tests: 8\n'],]
    return render_template('index.html', div=escape_script(div), content=content)

确保转储任何模板变量中的脚本。您需要这样做，因为浏览器在找到关闭脚本标记时会提前关闭嵌入式脚本。

function createDashboard(){
  ...
  summaries = {{content | safe}};
  console.log(summaries);
  ...
  graphs = {{div | safe}};

  unescape_graphs = graphs.map(function(graph) {
     return graph.join("\n").replace('\\/', '\/');
  }); // necessary to do this to escape the closing script javascript-esque. 
      // Safe filters escape backslashes too.
  console.log(unescape_graphs);
  ...
}

请注意，浏览器不会评估以这种方式插入DOM的嵌入式脚本。 你可以通过going through all the inserted embedded scripts and inserting them解决这个问题。

使用Jinja2模板将HTML列表传递给Javascript

1 个答案: