Đường dẫn tương đối trong javascript cho url

Một thứ mà bạn luôn sử dụng, nhưng không phải lúc nào cũng nhận ra, đó là cách trình duyệt web sẽ yêu cầu tài nguyên trong tệp html với url tương đối

Ví dụ

    

sẽ được phục vụ từ ví dụ. com như http://example.com/libs/jquery.min.js - với điều kiện trang web đang nằm trong máy chủ web gốc e. g

    
0 hoặc
    
1

Thay vào đó, nếu ứng dụng nằm trong thư mục con/thư mục ảo, đoạn mã trên sẽ vẫn hoạt động, ngay cả khi nó có thể đến từ

    
2. Điều này thật tuyệt, vì nó cho phép chúng tôi tách rời cấu trúc ứng dụng của mình khỏi nơi nó được triển khai

Điều gì sẽ xảy ra nếu chúng tôi thay đổi URL một chút?

    

Với sự thay đổi này,

    
3 hàng đầu cho biết thư mục gốc của trang web. Nó vẫn là một đường dẫn tương đối, nhưng nó “tương đối” với thư mục gốc của trang web. http://example.com/libs/jquery.min.js sẽ vẫn hoạt động, nhưng
    
5 thì không. Đây có thể là một lỗi nhỏ, vì hầu hết các ứng dụng chạy cục bộ đều nằm ở vị trí
    
6 hoặc bất cứ thứ gì, nhưng nhiều ứng dụng không được triển khai tới thư mục gốc của web

Sử dụng dấu gạch chéo hàng đầu sẽ loại bỏ rất nhiều tính linh hoạt trong tương lai. Vậy tại sao bạn lại muốn nó? . Bạn có một tệp tập lệnh có phần phụ thuộc jquery, tồn tại tại

    
7. Tài liệu tham khảo này sẽ không còn hoạt động

    

Nó sẽ trả về dưới dạng

    
8 oops

Lý do điều này không hoạt động là do đường dẫn tương đối được xây dựng dựa trên vị trí cửa sổ hiện tại của bạn, đường dẫn này sẽ thay đổi theo các url khác nhau

http://example.com
http://example.com/salesapp
http://example.com/salesapp/accounts

Nó sẽ phải là một trong số này

    
    
    

Trong số ba, cái thứ 2 có lẽ là linh hoạt nhất, nhưng khó đọc và viết (đặc biệt nếu cây nguồn của bạn sâu)

Điều bạn thực sự muốn làm là đặt url của bạn tương ứng với đường dẫn của ứng dụng. Điều này có thể sử dụng thẻ

    
9. theo mdn

“HTML

phần tử chỉ định URL cơ sở để sử dụng cho tất cả các URL tương đối có trong tài liệu. ”

Ví dụ: nếu bạn thiết lập thẻ

    
9 như sau


    

Điều này thiết lập một cách hiệu quả tất cả các đường dẫn tương đối liên quan đến thư mục gốc của trang web

    
1 sẽ được đọc là
    
2, và do đó
    
3

Để đặt đường dẫn cụ thể cho ứng dụng, bạn có thể sử dụng


    

    
1 sẽ được đọc là
    
5, và do đó là
    
2

điều này hoạt động tốt khi triển khai đến các điểm cuối khác nhau vì chỉ cần thay đổi tham chiếu

    
9, có thể dễ dàng xử lý thông qua hệ thống xây dựng

Mặc dù vậy, hãy cẩn thận, việc chỉ định các đường dẫn tương đối bằng dấu gạch chéo ở đầu sẽ bỏ qua

    
9 đã chỉ định

Cuối cùng, bạn cũng có thể chỉ định đường dẫn cơ sở thư mục trống/hiện tại


    

hoặc là


    

Điều này thực sự giống như chỉ định không có

    
9. Bạn có thể sử dụng điều này để phát triển địa phương

Ngoài ra, bạn có thể tự động viết

    
9 bằng một tập lệnh, nhưng có vẻ như đây không phải là cách tiếp cận được đề xuất. Có vẻ tốt hơn là để điều này tùy thuộc vào hệ thống xây dựng/triển khai của bạn

Tin tốt là các đường dẫn bị hỏng thường dễ phát hiện khi trình duyệt của bạn ở chế độ phát triển - chỉ cần tìm các yêu cầu màu đỏ trong tab mạng và kiểm tra đường dẫn. Bạn sẽ biết điều gì đó không ổn khi đường dẫn đúng một phần, nhưng chứa các cấp độ bổ sung hoặc cấp độ bị thiếu hoàn toàn

Cách lấy URL tương đối trong JavaScript?

Điều này hoạt động giống như cách chuyển hướng đến bất kỳ URL nào trong javascript. .
Cách tiếp cận 1. Để chuyển hướng đến một URL tương đối trong JavaScript, bạn có thể sử dụng cửa sổ. vị trí. href = '/đường dẫn'; . vị trí. href trả về href (URL) của trang hiện tại. .
Cách tiếp cận 2. Để chuyển hướng đến một url tương đối, bạn có thể sử dụng. tài liệu

Làm cách nào để đặt URL trong JavaScript?

Cú pháp tạo đối tượng URL mới. .
URL mới(url, [base])
hãy để url = URL mới ('https. //javascript. thông tin/hồ sơ/quản trị viên');
URL mới ('https. //Google. com/tìm kiếm?

Làm cách nào để có được đường dẫn URL tuyệt đối trong JavaScript?

JavaScript . createElement('a'); a. href = url; . href; . No matter how you pass in the URL string, the URL will come out absolute.

Ví dụ về URL tương đối là gì?

Thay vì bao gồm toàn bộ URL cho mỗi trang bạn liên kết, các URL tương đối cắt giảm khối lượng công việc và thời gian cần thiết. Ví dụ: viết mã /about/ nhanh hơn nhiều so với https. //www. thí dụ. com/về.