在 django javascript 文件中引用其他静态文件

Question

我需要将文件加载到函数中以与电话自动格式化程序库一起使用 (Intl tel input) 当我在独立 html 页面中尝试此操作时，它工作正常，但是当我尝试在 django 项目中执行此操作时，文件没有加载，我认为这是因为它找不到它的位置在路径中。

main.js 和 utils.js 都在我项目的静态目录中，所以我不确定为什么找不到 utils.js 文件。

main.js:

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "utils.js"
    });
});

Answer 1

如果我需要在 JavaScript 中引用服务器端路径，我会在最上面的模板中设置一个 "app" 对象，我可以在 JavaScript 中引用它之后加载的文件，通常带有 require.js.

示例：

# base.html (upper-most template)
<!DOCTYPE html>{% load static from staticfiles %}
    <html>
        <head>. . .</head>
        <body>
            . . .
            <script>
                var myApp = {
                    staticUrl: '{{ STATIC_URL }}'
                }
            </script>
            <script src="{% static 'js/some-file.js' %}"></script>
        </body>
    </html>

# some-file.js

'use strict';

$(document).ready(function(){
    console.log(myApp.staticUrl);
});

Answer 2

查看您的 URL 调度程序 (urls.py) 以查看可能请求静态文件的实际路径是什么。

例如，在我的一个项目中，JavaScript 个文件位于 /static/js/。

例如，如果您的配置也是如此，您会做 -

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "/static/js/utils.js"
    });
});

如果您想对 URL 进行硬编码，那就是这样。您可以在模板中或在模板引擎未处理的 .js 文件中执行此操作。

但是，如果您在模板中，我建议您使用 staticfiles app，特别是 static 模板标签，它可以帮助您构建文件路径。

在 django javascript 文件中引用其他静态文件

Reference other static file in django javascript file

javascript

django

upload

jquery