1. ホーム
  2. javascript

Flask 上で動作させると、外部 JavaScript ファイルが追加されない

2023-10-06 20:09:02

質問

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

どうすれば解決するのか?

を提供する。 map.js ファイルを 静的リソース :

  • に移動させる。 static/ サブディレクトリに移動します。

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

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

filename パラメータは相対パスを取ります。必要に応じてサブディレクトリを使用することができます。