如何在script标签的src属性中使用Flask变量？

数据老陈

2026-7-16

问题描述

硬编码引入GitHub Gist脚本可正常运行：

<script src="https://gist.github.com/xxxxxxx.js"></script>

从数据库读取链接，通过模板语法{{ project.link }}渲染时无法生效：
```
<script src={{ project.link }}></script>
```
注：{{ project.link }}的实际值为https://gist.github.com/xxxxxxx.js

尝试动态设置脚本src的方式也失败：
先定义变量：

<script type="text/javascript" id="myScript">
  var link ='{{ project.title }}'
</script>

再设置src：

<script>
  document.getElementById('myScript').src = link;
</script>

解决方法

1. 检查模板渲染输出

查看页面源代码，确认{{ project.link }}是否被正确渲染为完整URL，有没有被转义（比如出现"这类字符）。如果存在转义问题，需在模板中关闭自动转义，不同引擎写法参考：

Jinja2/Django：使用{{ project.link|safe }}
Vue：确保绑定的是原始URL（或使用v-html，注意安全风险）

2. 修正动态脚本创建逻辑

之前的写法错误在于给已存在的<script>标签设置src，这种方式不会触发脚本加载。正确做法是动态创建新的script元素并插入页面：

<script>
  // 注意：之前代码里误用了project.title，要改成project.link
  var link = '{{ project.link }}';
  var script = document.createElement('script');
  script.src = link;
  document.body.appendChild(script);
</script>