今日、Javascriptの相対パスでの経験に驚いた。私は、次のように状況を煮詰めてきました:Javascriptでフェッチした相対パス
のようなディレクトリ構造があるとします。すべての私のapp.html
はありませんが実行され
app/
|
+--app.html
+--js/
|
+--app.js
+--data.json
js/app.js
<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>
app.js
は、JSONファイルをロードし、 body
の先頭に貼り付けます。
// js/app.js
fetch('js/data.json') // <-- this path surprises me
.then(response => response.json())
.then(data => app.data = data)
データが有効なJSON、単なる文字列です:
"Hello World"
これはfetch
のかなり最小限の使用量があるが、私は私がfetch
に渡すURLがapp.html
に対する代わりのに比べなければならないことに驚いていますapp.js
。 data.json
とapp.js
が同じディレクトリ(js/
)であるので、私は、このパスが動作することを期待します:
fetch('data.json') // nope
は、このようなケースである理由の説明はありますか?
JSは、SOPのためにフォルダを指すことができない場所から来る可能性があります。したがって、ページは常に相対的です。 – dandavis
JavaScriptにはあまり関係がないことに注意してください。 WebブラウザがHTTP要求のパスを解釈する方法です。メインページでは、スクリプト参照、イメージ、スタイルシート、XHRなど、すべてのURLコンテキストを定義します。 – Pointy
こんにちは、CSSパスはこのようには動作しませんが、スタイルシートのソースディレクトリとの関連性があります。たとえばbody {background-image:url(pic.gif)}がcss/styles.cssの場合、ブラウザはpic.gifを/ではなくcss /で探します。それは私がJSで期待する動作ですが、明らかにそれは真実ではありません。 – pat