flask中在网页上显示js代码

2020-03-26 10:11:00 by wst

flask

---

在网页中显示js代码，这个问题困扰了我好久，今天终于找到方法。

背景：

这里是个存储配置的表，当用户填完配置信息，要展示js中是怎么调用的。

原始字符串为:

# domain_pre,bi_sdk,version,app_key 为要填充的信息
http_script = """
<script src="http://{domain_pre}.xxx.cn/{bi_sdk}.{version}.js"></script>
<script> 
// window.{bi_sdk_upper}.debug = true;
window.BI_SDK.report('{app_key}','{domain_pre}');
</script>  
"""

曾经做了以下尝试：

1. 使用safe过滤器

<td style="word-break:break-all; ">
{{ inner|safe }}
</td>

结果失败，网页会把它当成真正的script代码

2. 使用json化方法

<td style="word-break:break-all; ">
{{ inner|tojson }}
</td>

结果是能显示了，但是<>被编码了。看起来很是费解。

3. 自定义过滤器

from flask import render_template_string

def script_convert(scri):
    temp = render_template_string("{{code}}", code=scri)
    return temp

网页中代码：

<td style="word-break:break-all; ">
{{ inner|script_convert }}
</td>

 结果依然对<>进行了编码，只是编码方式不一样了而已，看起同样费解。

最终解决方案

结合使用safe和自定义过滤器

<td style="word-break:break-all; ">
{{ inner|script_convert|safe }}
</td>

 

防止小白看完依然不知道怎么使用，这里给出完整的使用流程：

综合使用步骤：

1. 定义过滤器，假如文件为run.py，下面的Python代码都在此文件中。

from flask import render_template_string

def script_convert(scri):
    temp = render_template_string("{{code}}", code=scri)
    return temp

 2. 在app中注册过滤器

from flask import Flask

app = Flask(__name__, instance_relative_config=True)

app.add_template_filter(script_convert, "script_convert")

3. 在模板中使用此过滤器，假设模板文件为index.html，这里的inner为上文的http_script变量

<td style="word-break:break-all; ">
{{ inner|script_convert|safe }}
</td>

 

如还有其他问题，请在下方留言！ 

---