如何将Django变量传递至独立JavaScript文件

Django只会对模板文件（如.html或配置了模板引擎的文件）进行变量渲染，静态JS文件是直接返回给浏览器的，不会经过模板处理，所以你直接在JS里写{{ sizes }}这类变量肯定无法被解析。下面给你几个实用的解决办法：

方法1：将变量挂载到全局window对象（最常用） #

在HTML页面引入独立JS之前，先通过<script>标签把Django变量赋值给全局的window属性，这样JS文件里就能直接访问这些变量了。

修改你的Index.html，在引入JS前添加一段脚本：

<html>
    {% load static %}
    {% include 'head.html' %}
    <body>
        <header>
        </header>
    </body>
    <footer>
        <!-- 先挂载全局变量 -->
        <script>
            window.postSizes = "{{ sizes }}";
            window.postUrls = "{{ urlsPosts }}";
        </script>
        <!-- 再引入独立JS -->
        <script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script> 
    </footer>
</html>

然后修改posts_lazy_loading.js里的变量引用：

var images = document.getElementsByClassName('cover_main_page'),
    posts = document.getElementsByClassName('post'),
    descriptions = document.getElementsByClassName('description'),
    description_height = descriptions[0].clientHeight;
    post_content = document.getElementsByClassName('post_content'),
    loading = document.getElementsByClassName('dots_portoflio'),
    sizes = window.postSizes, // 调用全局变量
    sizeslist = sizes.split(" "),
    urlsPosts = window.postUrls, // 调用全局变量
    urlslist = urlsPosts.split(' '),
    ratios = [],
    viewport_width = document.documentElement.clientWidth,
    newwidth = 0,
    margin = 3, // each post has 3vw margin left and 3vw margin right
    mobile = 0,
    mobilewidth = 94;

// ... 剩余代码保持不变

方法2：把JS文件改成Django模板文件 #

将你的posts_lazy_loading.js重命名为posts_lazy_loading.js.tmpl（或直接保留.js后缀，只要配置模板引擎识别它），让Django渲染这个模板后再返回给浏览器。

步骤1：修改JS模板文件 #

保持posts_lazy_loading.js.tmpl里的{{ sizes }}和{{ urlsPosts }}不变，代码和原JS一致即可。

步骤2：配置URL和视图 #

在urls.py中新增一条路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    # 新增JS模板的路由
    path('js/posts_lazy_loading.js', views.lazy_loading_js, name='lazy_loading_js'),
]

在views.py中新增视图函数（顺便修正你原代码里的循环索引越界问题）：

from django.shortcuts import render

def lazy_loading_js(request):
    posts = Post.objects.all()
    sizes = ''
    urlsPosts = ''

    for i in range(len(posts)):
        # 原代码i == len(posts)会索引越界，修正为i == len(posts)-1
        if i == len(posts)-1:
            sizes += f"{posts[i].thumbnail.width}x{posts[i].thumbnail.height}"
            urlsPosts += posts[i].thumbnail.url
        else:
            sizes += f"{posts[i].thumbnail.width}x{posts[i].thumbnail.height} "
            urlsPosts += f"{posts[i].thumbnail.url} "

    # 渲染JS模板，指定响应类型为JS
    return render(request, 'js/posts_lazy_loading.js.tmpl', {
        'sizes': sizes,
        'urlsPosts': urlsPosts
    }, content_type='application/javascript')

步骤3：修改HTML里的引入路径 #

把原来的静态文件引入改为路由路径：

<script type="text/javascript" src="{% url 'lazy_loading_js' %}"></script>

方法3：通过DOM的data属性传递变量 #

把Django变量存储在某个DOM元素的data-*属性里，然后在JS文件中读取这些属性。

修改Index.html的body标签：

<body data-sizes="{{ sizes }}" data-urls="{{ urlsPosts }}">

在posts_lazy_loading.js中获取变量：

var body = document.body;
var sizes = body.dataset.sizes;
var urlsPosts = body.dataset.urls;

// 剩余代码保持不变

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