时间戳

首页 > 解决方案 > Javascript 在模板 html 文件中运行，但不在 Django 应用程序中的扩展 html 文件中运行

javascript - Javascript 在模板 html 文件中运行，但不在 Django 应用程序中的扩展 html 文件中运行

问题描述

我正在用 Django 和 Vanilla JS 编写一个网站

我有 2 个 html 页面，我希望它们都共享 css，但我希望它们使用不同的 javascript。两个页面都扩展了 layout.html。

layout.html 看起来像这样开始

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Social Network{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="{% static 'network/styles.css' %}" rel="stylesheet">
    </head>

我的 index.html（扩展了我的 layout.html）是这样开始的

{% extends "network/layout.html" %}

{% load static %}
<script src="{% static 'network/messages.js' %}"></script>

我的 Javascript 文件如下所示：

document.addEventListener('DOMContentLoaded', function() {
    console.log("page loaded!")

    document.addEventListener('click', event => {
        const element = event.target;
        console.log("Something was clicked")
  })
});

它只是在加载页面和单击某些内容时打印出一行。

但是，当我使用这样的代码转到 index.html 时，没有加载 javascript 文件，加载页面或单击任何内容时都不会打印任何内容。

但是，如果我将 layout.html 页面修改为这样：

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Social Network{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="{% static 'network/styles.css' %}" rel="stylesheet">
        <script src="{% static 'network/messages.js' %}"></script> 
    </head>

我在其中加载messages.js，然后将其从index.html中删除，如下所示：

{% extends "network/layout.html" %}

然后javascript工作，页面正确加载。唯一的问题是它也会为我不想要的其他页面加载它，我只想为 index.html 加载 message.js，我不知道为什么当我只将它包含在 index 中时它拒绝加载.html。

我很感激任何帮助。

标签： javascripthtmldjango

解决方案

这不是您扩展模板的方式。Django 模板使用块系统。所以scriptindex.html 中的 根本不会呈现。您必须在 中有一个空块layout.html，并在 中覆盖该块index.html。

layout.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Social Network{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="{% static 'network/styles.css' %}" rel="stylesheet">
    </head>
    <body>
        {% block content %}{% endblock content %}
    </body>
</html>

index.html

{% extends "network/layout.html" %}
{% load static %}
{% block content %}
<script src="{% static 'network/messages.js' %}"></script>
{% endblock content %}

尝试将 HTML 添加到您当前的index.html. 它不会显示。您必须将所有内容都包含在blocks 中才能正常工作。

推荐阅读