Python 在 Flask 上运行时未添加外部 JavaScript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14711552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
External JavaScript file is not getting added when running on Flask
提问by Tony
I have an HTML file named showMap.html:
我有一个名为的 HTML 文件showMap.html：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body onload="showPosition()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</body>
</html>
And another JavaScript file map.jsis placed in the jsfolder of the same directory.
另一个 JavaScript 文件map.js放置在js同一目录的文件夹中。
This code works fine when the HTML file is loaded, but this does not work when I run it in the server.
当加载 HTML 文件时，此代码工作正常，但当我在服务器中运行它时，这不起作用。
I use Python's Flask framework for back-end programming and the funny thing is that the same thing will work well if I expand the JavaScript code inside the HTML file. The only problem is with the external file.
我使用 Python 的 Flask 框架进行后端编程，有趣的是，如果我将 JavaScript 代码扩展到 HTML 文件中，同样的事情也能很好地工作。唯一的问题是外部文件。
采纳答案by Martijn Pieters
Serve the map.jsfile as a static resource:
将map.js文件作为静态资源提供：
move the file to a
static/subdirectory of your packagegenerate a static URL for it in a Jinja2 template like so:
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
将文件移动到
static/包的子目录在 Jinja2 模板中为它生成一个静态 URL，如下所示：
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
The filenameparameter takes a relative path; you can use subdirectories was needed.
该filename参数采用相对路径；您可以使用需要的子目录。
回答by AiOsN
Step 1:Create folder with name static on project root
步骤 1：在项目根目录上创建名为 static 的文件夹
Step 2:Add static files in static folder
第二步：在静态文件夹中添加静态文件
Step 3Add in template
步骤 3添加模板
<script type="text/javascript" src="{{ url_for('static', filename = 'hello.js') }}"></script>
回答by Mykhailo Seniutovych
I want to add to Martijn's answer, that you have to link your js file exactly like this:
我想补充 Martijn 的答案，您必须完全像这样链接您的 js 文件：
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
and not like this:
而不是这样：
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"/>
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"/>
回答by Muyinda Rogers
I experience the same issue, for stylesheet, the URL_FOR works but for javascript. I had to write
我遇到了同样的问题，对于样式表，URL_FOR 工作但对于 javascript。我不得不写
<script type="text/javascript" src="static/map.js"/>
It worked for me
它对我有用
