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コードを展開しても同じことがうまくいくことです。唯一の問題は外部ファイルにあります。
map.js
ファイルを 静的リソース として提供します。
ファイルをパッケージのstatic/
サブディレクトリに移動します
次のように、Jinja2テンプレートで静的URLを生成します。
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
ステップ1:プロジェクトルートにstaticという名前のフォルダーを作成します
ステップ2:静的フォルダーに静的ファイルを追加する
ステップテンプレートに追加
<script type="text/javascript" src="{{ url_for('static', filename = 'hello.js') }}"></script>
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') }}"/>
スタイルシートの場合、URL_FORは機能しますが、JavaScriptの場合も同じ問題が発生します。書かなければなりませんでした
<script type="text/javascript" src="static/map.js"/>
それは私のために働いた