如何将Django模板文件内容传入JavaScript中使用？

你使用的写法直接将{% include %}输出的原始HTML片段插入JS代码逻辑中，既没有包裹为字符串格式，也没有对JS敏感字符做转义，HTML自带的<、引号、换行等字符会直接触发JS语法错误。

方法1：转义后直接赋值为JS字符串 #

使用Django内置的escapejs过滤器处理模板片段，外层加引号包裹为JS字符串即可：

<script>
const list_item = "{% include 'myapp/list_item.html' | escapejs %}";
</script>

escapejs会自动转义所有JS敏感字符，包括尖括号、单/双引号、换行符、反斜杠等，确保输出内容可以作为合法JS字符串使用。如果模板内包含大量双引号，也可以换成单引号或者反引号（模板字符串）包裹外层。

方法2：使用json_script标签（更安全，支持独立JS文件读取） #

如果你的JS代码写在独立文件中，或者模板内容复杂度高，推荐使用Django内置的json_script标签，先将模板内容渲染为隐藏的DOM节点，再用JS读取：

1. Django模板中插入代码：

{% include 'myapp/list_item.html' as list_item_tpl %}
{{ list_item_tpl|json_script:"list-item-template" }}

2. JS代码中读取内容（内联、独立JS文件都支持）：

// 确保DOM加载完成后执行该逻辑
const list_item = JSON.parse(document.getElementById('list-item-template').textContent);

该方法完全避免了JS代码拼接的风险，不需要手动处理转义，兼容性和安全性更高。

方法3：接口请求获取（按需加载场景适用） #

如果模板内容需要动态加载，也可以单独写一个Django视图渲染list_item.html并返回，JS通过fetch请求获取内容即可。

• 不要直接将未转义的模板内容插入JS代码，除语法错误外还存在XSS注入风险
• 以上两种方法获取到的都是已经完成Django变量渲染的HTML字符串，可直接用于创建DOM元素。

内容的提问来源于stack exchange，提问作者fmatt