Trước khi quyết định có nên sử dụng <base>
thẻ hay không, bạn cần phải hiểu cách thức hoạt động của nó, nó có thể được sử dụng để làm gì và ý nghĩa của nó là gì và cuối cùng vượt xa những lợi thế / bất lợi.
Các <base>
thẻ chủ yếu là giúp giảm bớt tạo liên kết tương đối trong templating ngôn ngữ là bạn không cần phải lo lắng về bối cảnh hiện nay trong mỗi liên kết.
Bạn có thể làm ví dụ
<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />
thay vì
<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />
Xin lưu ý rằng <base href>
giá trị kết thúc bằng dấu gạch chéo, nếu không nó sẽ được giải thích liên quan đến đường dẫn cuối cùng.
Về khả năng tương thích trình duyệt, điều này chỉ gây ra sự cố trong IE. Các <base>
thẻ trong HTML được chỉ định như không có một thẻ kết thúc </base>
, vì vậy nó là legit để chỉ sử dụng <base>
mà không có một thẻ kết thúc. Tuy nhiên IE6 lại nghĩ khác và toàn bộ nội dung sau khi các <base>
thẻ là trong trường hợp như vậy đặt là con của <base>
phần tử trong cây HTML DOM. Điều này có thể gây ra những vấn đề đầu tiên không thể giải thích được trong Javascript / jQuery / CSS, tức là các yếu tố hoàn toàn không thể truy cập được trong các bộ chọn cụ thể như html>body
, cho đến khi bạn phát hiện ra trong trình kiểm tra HTML DOM nên có một base
(và head
) ở giữa.
Một sửa chữa IE6 phổ biến là sử dụng một nhận xét có điều kiện IE để bao gồm thẻ kết thúc:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
Nếu bạn không quan tâm đến Trình xác thực W3 hoặc khi bạn đã sử dụng HTML5, thì bạn chỉ có thể tự đóng nó, mọi trình duyệt web đều hỗ trợ nó:
<base href="http://example.com/en/" />
Đóng <base>
thẻ cũng khắc phục ngay sự điên rồ của IE6 trên WinXP SP3 để yêu cầu <script>
tài nguyên với URI tương đối src
trong một vòng lặp vô hạn.
Một vấn đề IE tiềm năng khác sẽ biểu hiện khi bạn sử dụng URI tương đối trong <base>
thẻ, chẳng hạn như <base href="https://stackoverflow.com//example.com/somefolder/">
hoặc <base href="https://stackoverflow.com/somefolder/">
. Điều này sẽ thất bại trong IE6 / 7/8. Tuy nhiên, đây không phải là lỗi chính xác của trình duyệt; sử dụng các URI tương đối trong <base>
thẻ cụ thể là sai. Đặc tả HTML4 nói rằng nó phải là một URI tuyệt đối, do đó bắt đầu bằng http://
hoặc https://
lược đồ. Điều này đã được loại bỏ trong đặc tả HTML5 . Vì vậy, nếu bạn chỉ sử dụng HTML5 và nhắm mục tiêu các trình duyệt tương thích với HTML5, thì bạn sẽ ổn thôi bằng cách sử dụng URI tương đối trong <base>
thẻ.
Đối với việc sử dụng các neo mảnh được đặt tên / băm như <a href="#anchor">
, các chuỗi neo truy vấn thích <a href="?foo=bar">
và các neo của đoạn đường dẫn như thế nào <a href=";foo=bar">
, với <base>
thẻ về cơ bản bạn đang khai báo tất cả các liên kết tương đối liên quan đến nó, bao gồm cả các loại neo đó. Không có liên kết tương đối nào liên quan đến URI yêu cầu hiện tại nữa (như sẽ xảy ra nếu không có <base>
thẻ). Điều này có thể ở nơi đầu tiên gây nhầm lẫn cho người mới bắt đầu. Để xây dựng các neo đó đúng cách, về cơ bản bạn cần bao gồm URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
nơi ${uri}
về cơ bản dịch để $_SERVER['REQUEST_URI']
trong PHP, ${pageContext.request.requestURI}
trong JSP, và #{request.requestURI}
trong JSF. Cần lưu ý rằng các khung MVC như JSF có các thẻ làm giảm tất cả các mẫu soạn sẵn này và loại bỏ nhu cầu <base>
. Xem thêm ao Sử dụng URL nào để liên kết / điều hướng đến các trang JSF khác .