Внешний файл JavaScript не добавляется при работе на Flask

У меня есть 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>

И еще один файл JavaScript map.js находится в папке js того же каталога.

Этот код работает нормально, когда загружается файл HTML, но он не работает, когда я запускаю его на сервере.

Я использую инфраструктуру Python Flask для внутреннего программирования, и забавно то, что то же самое будет хорошо работать, если я раскрою код JavaScript внутри HTML файла. Единственная проблема - с внешним файлом.

Ответ 1

Служите файлу map.js как статическому ресурсу:

переместите файл в подкаталог static/ вашего пакета
сгенерировать статический URL для него в шаблоне Jinja2 следующим образом:
```
 <script type="text/javascript"
         src="{{ url_for('static', filename='map.js') }}"></script>
```

Параметр filename принимает относительный путь; Вы можете использовать подкаталоги было необходимо.

Ответ 2

Шаг 1: Создать папку с именем static в корне проекта

Шаг 2: Добавить статические файлы в статической папке

Шаг 3 Добавить в шаблон

<script type="text/javascript" src="{{ url_for('static', filename = 'hello.js') }}"></script>

Ответ 3

Я хочу добавить к 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') }}"/>

Ответ 4

Я испытываю ту же проблему, для таблицы стилей, URL_FOR работает, но для javascript. Мне пришлось написать

<script type="text/javascript" src="static/map.js"/>

Это сработало для меня