本文讨论了在模板中使用内联JavaScript中的变量。如果我有单独的包含脚本的.js文件，位于static文件夹中，例如：
utils.js
const createButton = (buttonCount) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < buttonCount; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
createButton(buttonCount)
mytemplate.html
{% extends "base.html" %}
{% load static %}
{% block title %}Testpage{% endblock %}
{% block content-main %}
<link href="{% static "css/mycss.css" %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div id="myContainerId"></div>
<script src="{% static 'js/utils.js' %}"> </script>
{% endblock %}
如果我有一个变量buttonCount通过视图函数的上下文传递到这个模板中，我如何将它传递到函数createButton()要调用的utils.js文件？
views.py
def button_view(request):
...
buttonCount = 5
return render(request, 'mytemplate.html', {'buttonCount': buttonCount})
有几种方法：
- 使用输入字段
<input id="buttonCount" value = "{{buttonCount}}" style="display:none;">
然后读取utils.js.中id=buttonCount的元素的值
内联脚本**不建议使用Document.onload。
<script> set_button_count({{buttonCount}}); </script>
但是当你的utils.js还没有加载时，这会产生一个问题。
- document.onload将脚本源放在
<head></head>中
<script src="{% static 'js/utils.js' %}" defer> </script>
<script>
document.addEventListener('onload',function(
{set_button_count({{buttonCount}});
})
</script>
- set_button_count((将被放置在utils.js中
- Defer将要求浏览器仅在utils.js时启动文档加载已完成，将在文档完成后提取并加载加载
警告：内联脚本要与严格的CSP(内容安全策略(一起使用。任何内联脚本都可以被赋予
src作为nonce。CSP可以在apache或Nginx上的服务器端完成，这是非常常见的web服务器/反向代理，如果你无法控制，你也可以在HTML中提到这一点。
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-{{nonce}}';">
并且这个CCD_ 12可以像这样生成：
import random,base64
def usersession_processor(request):
user = request.user
unbaked_nonce = '%32x' % random.getrandbits(16*8)
unbaked_nonce = unbaked_nonce.encode('utf-8')
baked_nonce = base64.b64encode(unbaked_nonce)
baked_nonce = baked_nonce.decode('utf-8')
那么<script src="{{nonce}}"></script>可以用于安全内联。
我认为不建议这样做，但如果您使用django模板上下文，则可以这样做。将脚本放在页面底部，并将buttoncount作为Django模板语言变量包含在内。不过，我认为不建议将Django模板变量与javascript混合使用。
你可以在你的"base.html"文件中放一个新的块，在body标签的底部，如下所示：
{% block inline_javascript %}
{% enblock inline_javascript %}
然后在你想要运行函数的页面中，你把脚本放在页面底部"块内容"之外的相同标签中，比如：
{% block inline_javascript %}
<script>
const createButton = ({{ buttonCount }}) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < {{ buttonCount }}; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
</script>
{% enblock inline_javascript %}