web-dev-qa-db-ja.com

Flaskで実行すると、外部JavaScriptファイルが追加されない

showMap.htmlという名前の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フレームワークを使用していますが、面白いのは、HTMLファイル内のJavaScriptコードを展開しても同じことがうまくいくことです。唯一の問題は外部ファイルにあります。

javascriptpythonflaskexternal
43
Tony

map.jsファイルを 静的リソース として提供します。

  • ファイルをパッケージのstatic/サブディレクトリに移動します

  • 次のように、Jinja2テンプレートで静的URLを生成します。

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

ステップ1：プロジェクトルートにstaticという名前のフォルダーを作成します

ステップ2：静的フォルダーに静的ファイルを追加する

ステップテンプレートに追加

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

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') }}"/>

0
Mykhailo Seniutovych

スタイルシートの場合、URL_FORは機能しますが、JavaScriptの場合も同じ問題が発生します。書かなければなりませんでした

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

それは私のために働いた

0
Muyinda Rogers