使用flask在html中调用外部Javascript函数，显示未定义函数答案

【问题标题】：Calling an external Javascript function in html using flask, showing function not defined使用flask在html中调用外部Javascript函数，显示未定义函数
【发布时间】：2019-04-04 04:55:53
【问题描述】：

我正在使用烧瓶 {% extends "base.html" %} 并插入 {% block js_file %}，然后我调用 .js 文件中定义的函数但收到 未定义未捕获的引用错误。 我有一个 base.html 包含所有页面中的所有基本元素。好像

<!DOCTYPE html>
<html>
    <head>
        <title>
            {% block title %}{% endblock %}
        </title>
        <!--css file code-->
        {% block cssfile %}{% endblock %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='header.css') }}">
    </head>
    <body> 
        ...
         {% block content %}{% endblock %}
         ...
         {% block js_files %}{% endblock %}
    </body>
    ....

然后在名为 mark.html 的特定页面中，我首先扩展和插入元素，并希望在单独的 functions.js 文件中测试一个函数：

{% extends "base.html" %}
{% block cssfile %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mark.css') }}">
{% endblock %}

{% block title %}
    Mark
{% endblock %}

{% block js_files %}
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
    <script src="{{ url_for('static', filename='functions.js') }}"></script>
{% endblock %}

{% block content %}
    ....
    <script>warn();</script>
    ....
{% endblock content %}

functions.js只有一个测试函数：

function warn(){
    alert('fired');
};

最后，在 Chrome Dev Tools 中，最终页面看起来像

<!DOCTYPE html>
<html>
    <head>
        <title>
            Mark
        </title>
        <!--css file code-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='mark.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='header.css') }}">
    </head>
    <body> 
        ...
         <script>warn();</script>
         ...
         <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
        </script>
        <script src="/static/functions.js"></script>
    </body>
    ....

结构对我来说看起来不错，但未定义未捕获的参考错误。我是 web div 的新手，所以这个问题可能很愚蠢，但我感谢任何帮助！

【问题讨论】：

您是否尝试在 HTML 正文之前导入 Jquery？即在导入样式表之后？
我想，这与加载排序有关。因为我使用了` {% extends "base.html" %}` 并插入了{% block js_file %}，所以顺序很混乱。我通过在base.html 中的正确链接来处理这个问题，因为这是所有内容的延伸，所以它肯定会首先加载。

标签： javascript html flask

【解决方案1】：

我想，这与加载排序有关。因为我使用{% extends "base.html" %} 并插入 {% block js_file %} 所以排序很混乱。我通过在 base.html 中添加适当的链接来解决这个问题，因为这是所有内容的延伸，所以它肯定会首先加载。

【讨论】：