[英]Calling an external Javascript function in html using flask, showing function not defined
I am using flask to {% extends "base.html" %} and insert {% block js_file %}, then I call functions defined in .js file but receive uncaught referenceerror is not defined. 我正在使用烧瓶来{%extends“base.html”%}并插入{%block js_file%},然后我调用.js文件中定义的函数,但未定义未捕获的referenceerror。 I have a base.html containing all the basic elements in all pages.
我有一个base.html包含所有页面中的所有基本元素。 It looks like
看起来像
<!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>
....
then in a specific page called mark.html , I extend and insert elements first and want to test a function in a separate functions.js file: 然后在一个名为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 has just a testing function: functions.js只有一个测试功能:
function warn(){
alert('fired');
};
In the end, in Chrome Dev Tools, the entended page looks like 最后,在Chrome开发者工具中,扩展页面看起来像
<!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>
....
The structure looks fine to me but it's uncaught referenceerror is not defined. 结构看起来很好,但它没有被捕获的referenceerror没有定义。 I am new to web div so this question may be dumb but I appreciate any help!
我是web div的新手,所以这个问题可能很愚蠢,但我感谢任何帮助!
I figured, it's to do with loading ordering. 我想,这与装货订单有关。 Because I use
{% extends "base.html" %}
and insert {% block js_file %} so the ordering is confusing. 因为我使用
{% extends "base.html" %}
并插入{%block js_file%}所以排序令人困惑。 I dealt with this by having proper links in base.html because that's where everything extends from, so it will for sure load first. 我通过在base.html中使用适当的链接来解决这个问题,因为这是所有内容的延伸,所以它肯定会首先加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.