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
パラメータは相対パスを取ります。必要に応じてサブディレクトリを使用することができます。
関連
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] JavaScript の配列からランダムな値を取得する
-
[解決済み】JavaScriptの関数名を文字列で指定して実行する方法
-
[解決済み】GitHubでホストされている外部JavaScriptファイルをリンクして実行する。
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)