Ich war überrascht von einer Erfahrung mit relativen Pfaden in Javascript heute. Ich habe die Situation an folgende kocht:Relative Pfade mit fetch in Javascript
Angenommen, Sie eine Verzeichnisstruktur haben wie:
app/
|
+--app.html
+--js/
|
+--app.js
+--data.json
Alle meine app.html
läuft wird js/app.js
<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>
app.js
lädt die JSON-Datei und klebt es am Anfang von body
:
// js/app.js
fetch('js/data.json') // <-- this path surprises me
.then(response => response.json())
.then(data => app.data = data)
Die Daten gültig JSON, nur eine Zeichenfolge:
"Hello World"
Dies ist eine ziemlich geringe Nutzung von fetch
, aber ich bin überrascht, dass die URL, die ich fetch
passieren muss, anstatt relativ zu app.html
sie relativ zu app.js
. Ich würde erwarten, dass dieser Weg zu arbeiten, da data.json
und app.js
sind im gleichen Verzeichnis (js/
):
fetch('data.json') // nope
Gibt es eine Erklärung dafür, warum dies der Fall ist?
JS kann von Orten kommen, auf deren Ordner aufgrund von SOP nicht gezeigt werden kann, daher war es immer seitenbezogen. – dandavis
Beachten Sie, dass dies nicht wirklich viel mit JavaScript zu tun hat; Auf diese Weise interpretieren Web-Browser Pfade in HTTP-Anfragen. Die Hauptseite definiert den URL-Kontext für alles: Skriptreferenzen, Bilder, Stylesheets und XHRs. – Pointy
Hallo, für was es wert ist CSS-Pfade funktionieren nicht auf diese Weise, sie sind relativ zum Quellverzeichnis des Stylesheets - wenn Sie sagen, Körper {background-image: url (pic.gif)} in css/styles.css sucht der Browser nach pic.gif in css /, not /. Das ist das Verhalten, das ich mit JS erwarten würde, aber anscheinend ist es nicht wahr. – pat