How do you import a js file using {% load staticfiles%} in a base html template
Question
Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.
I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.
It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.
Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.
Below is the latest that I've tried, but still no luck.
base.html
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'js/app.js' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
2 answers
solution1
3 ACCPTED 2019-08-27 20:40:53
Put the following script after the body tag.
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
Why? When loading JavaScript files, it tends to fall under one of two cases.
- The Javascript file contains functions which are needed while the page is loading OR
- The Javascript file contains functions which should be used after the page is loading.
Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.
PS - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body
solution2
0 2019-08-27 20:02:24
在我的</body>下方添加<script type="text/javascript" src="{% static 'js/app.js' %}"></script>解决了我无法加载 js 文件的问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.