6
Tôi đã rất ngạc nhiên bởi trải nghiệm có đường dẫn tương đối trong Javascript ngày hôm nay. Tôi đã luộc xuống tình hình như sau:Đường dẫn tương đối có tìm nạp trong Javascript
Giả sử bạn có một cấu trúc thư mục như:
app/
|
+--app.html
+--js/
|
+--app.js
+--data.json
Tất cả tôi app.html không được chạy js/app.js
<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>
app.js tải file JSON và dính vào đầu số body:
// js/app.js
fetch('js/data.json') // <-- this path surprises me
.then(response => response.json())
.then(data => app.data = data)
Các dữ liệu có giá trị JSON, chỉ là một chuỗi:
"Hello World"
Đây là một cách sử dụng khá tối thiểu của fetch, nhưng tôi ngạc nhiên rằng URL mà tôi vượt qua để fetch phải được liên quan đến app.html thay vì liên quan đến app.js. Tôi mong chờ con đường này để làm việc, kể từ data.json và app.js là trong cùng một thư mục (js/):
fetch('data.json') // nope
Có một lời giải thích cho lý do tại sao đây là trường hợp?
JS có thể đến từ các địa điểm có thư mục không thể được trỏ đến do SOP, vì vậy nó luôn là trang tương đối. – dandavis
Lưu ý rằng điều này không thực sự liên quan nhiều đến JavaScript; đó là cách mà các trình duyệt web diễn giải đường dẫn trong các yêu cầu HTTP. Trang chính xác định ngữ cảnh URL cho mọi thứ: tham chiếu tập lệnh, hình ảnh, biểu định kiểu và XHR. – Pointy
Xin chào, vì đường dẫn CSS đáng giá không hoạt động theo cách này, chúng liên quan đến thư mục nguồn của biểu định kiểu - nếu bạn có, ví dụ: body {background-image: url (pic.gif)} trong css/styles.css, sau đó trình duyệt sẽ tìm pic.gif trong css /, not /. Đó là hành vi tôi mong đợi với JS, nhưng dường như điều đó không đúng. – pat