Các đề xuất cho thẻ html <base> là gì?


462

Tôi chưa bao giờ thấy <base>thẻ HTML thực sự được sử dụng ở bất cứ đâu trước đây. Có những cạm bẫy để sử dụng nó có nghĩa là tôi nên tránh nó?

Việc tôi chưa bao giờ nhận thấy nó được sử dụng trên một trang sản xuất hiện đại (hoặc bất kỳ trang nào) khiến tôi không hài lòng về nó, mặc dù có vẻ như nó có thể có các ứng dụng hữu ích để đơn giản hóa các liên kết trên trang web của tôi.


Biên tập

Sau khi sử dụng thẻ cơ sở trong một vài tuần, cuối cùng tôi đã tìm thấy một số vấn đề chính bằng cách sử dụng thẻ cơ sở khiến nó ít được mong muốn hơn so với lần đầu tiên xuất hiện. Về cơ bản, các thay đổi đến href='#topic'href=''bên dưới thẻ cơ sở rất không tương thích với hành vi mặc định của chúng và thay đổi này từ hành vi mặc định có thể dễ dàng khiến các thư viện bên thứ ba nằm ngoài tầm kiểm soát của bạn rất không đáng tin cậy theo những cách không ngờ tới, vì chúng sẽ phụ thuộc một cách hợp lý vào hành vi mặc định. Thông thường các thay đổi là tinh tế và dẫn đến các vấn đề không rõ ràng ngay lập tức khi xử lý một cơ sở mã lớn. Kể từ đó tôi đã tạo ra một câu trả lời chi tiết các vấn đề mà tôi gặp phải dưới đây. Vì vậy, hãy tự kiểm tra kết quả liên kết trước khi bạn cam kết triển khai rộng rãi <base>, là lời khuyên mới của tôi!


12
Nó thường được sử dụng trong các phiên bản lưu trữ của kết quả của công cụ tìm kiếm để giữ cho các liên kết hoạt động.
Gumbo

11
Chỉ cần lưu ý: Thẻ cơ sở cũng tương tác với các neo đơn giản, vì vậy nếu bạn sử dụng cơ sở, cái trước đây chỉ là một neo cho một vị trí trên trang <a href='#anchor1'>Anchor1</a>cũng sẽ sử dụng thẻ cơ sở, ghi đè hành vi mặc định tham chiếu đến trang hiện tại như cơ sở. Vì vậy, đó chắc chắn là điều cần chú ý (mặc dù có thể khắc phục bằng cách sử dụng thẻ cơ sở khác trong các trang sử dụng nhiều neo).
Kzqai

1
Nếu bạn không hài lòng với câu trả lời được chấp nhận, tại sao bạn không chấp nhận và gán lại nó?
Pops

1
Không biết đó là một lựa chọn, nhưng ừ, không muốn làm lại con điếm (nếu nó thậm chí còn cho tôi điểm), nhưng tôi nghĩ trong phân tích cuối cùng, những nhược điểm vượt trội hơn những ưu điểm và muốn làm nổi bật điều đó.
Kzqai

2
Bạn thường không nhìn vào mã nguồn của mọi trang web chính mà bạn truy cập. Tôi tin rằng nhiều người đang sử dụng <base>hơn bạn nghĩ.
Mathias Lykkegaard Lorenzen

Câu trả lời:


259

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 srctrong 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 .


BalusC, Khoảng thời gian tôi viết câu trả lời ở đây stackoverflow.com/a/46539210/632951 đã có hơn 10 bình luận hữu ích theo chủ đề này được đăng bởi nhiều tác giả trong hơn 8 năm thông tin chi tiết về <cơ sở>. Bất kỳ ý tưởng mà liên kết các ý kiến ​​đã được chuyển đến?
Pacerier

162

Phân tích tác dụng của thẻ cơ sở:

Thẻ cơ sở dường như có một số hiệu ứng không trực quan và tôi khuyên bạn nên biết về kết quả và tự mình kiểm tra chúng trước khi dựa vào <base>! Vì tôi đã phát hiện ra chúng sau khi cố gắng sử dụng thẻ cơ sở để xử lý các trang web địa phương với các url khác nhau và chỉ phát hiện ra các hiệu ứng có vấn đề sau đó, đến lúc tôi mất tinh thần, tôi cảm thấy buộc phải tạo ra bản tóm tắt về những cạm bẫy tiềm năng này cho những người khác.

Tôi sẽ sử dụng thẻ cơ sở của: <base href="http://www.example.com/other-subdirectory/">như ví dụ của tôi trong các trường hợp bên dưới và sẽ giả vờ rằng trang đang bật mã là http://localsite.com/origen-subdirectory

Chính:

Không có liên kết hoặc các neo hoặc ô trống được đặt tên nào sẽ trỏ đến thư mục con gốc, trừ khi điều đó được làm rõ: Thẻ cơ sở làm cho mọi thứ liên kết khác nhau, bao gồm các liên kết neo cùng trang đến url của thẻ cơ sở, ví dụ:

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    trở thành
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    trở thành
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

Với một số công việc, bạn có thể khắc phục các sự cố này trên các liên kết mà bạn có quyền kiểm soát, bằng cách chỉ định rõ ràng rằng các liên kết này liên kết đến trang mà chúng đang truy cập, nhưng khi bạn thêm thư viện của bên thứ ba vào hỗn hợp dựa trên hành vi tiêu chuẩn, nó có thể dễ dàng gây ra một mớ hỗn độn lớn

Diễn viên phụ:

Sửa lỗi IE6 yêu cầu nhận xét có điều kiện: Yêu cầu nhận xét có điều kiện cho eg6 để tránh làm hỏng hệ thống phân cấp dom, tức là <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]-->như BalusCđề cập trong câu trả lời của anh ta ở trên.

Vì vậy, về tổng thể, vấn đề chính khiến việc sử dụng trở nên khó khăn trừ khi bạn có toàn quyền kiểm soát mọi liên kết và như tôi sợ ban đầu, điều đó khiến nó gặp nhiều rắc rối hơn giá trị của nó. Bây giờ tôi phải đi ra ngoài và viết lại tất cả các công dụng của tôi về nó! : p

Các liên kết kiểm tra liên quan cho các vấn đề khi sử dụng "đoạn" / băm:

http://www.w3.org/P People / mimasa / test / base /

http://www.w3.org/P People/mimasa/test/base/results


Chỉnh sửa bởi Izzy: Đối với tất cả các bạn gặp phải sự nhầm lẫn giống như tôi liên quan đến các nhận xét:

Tôi vừa tự mình thử nghiệm, với kết quả như sau:

  • dấu gạch chéo hoặc không, không có sự khác biệt với các ví dụ được đưa ra ở đây ( #anchor?queryđơn giản sẽ được thêm vào chỉ định <BASE>).
  • Tuy nhiên, điều này tạo ra sự khác biệt cho các liên kết tương đối: bỏ qua dấu gạch chéo other.htmldir/other.htmlsẽ bắt đầu tại DOCUMENT_ROOTví dụ đã cho, /other-subdirectoryđược xử lý (chính xác) dưới dạng tệp và do đó được bỏ qua.

Vì vậy, đối với các liên kết tương đối, BASEhoạt động tốt với trang được di chuyển - trong khi các neo và ?queriessẽ cần tên tệp được chỉ định rõ ràng ( BASEcó dấu gạch chéo hoặc phần tử cuối cùng không tương ứng với tên của tệp mà nó được sử dụng).

Hãy nghĩ về nó như <BASE>thay thế URL đầy đủ vào chính tệp ( chứ không phải thư mục mà nó cư trú) và bạn sẽ hiểu mọi thứ. Giả sử tệp được sử dụng trong ví dụ này là other-subdirectory/test.html(sau khi nó được chuyển đến vị trí mới), thông số kỹ thuật chính xác phải là:

<base href="http://www.example.com/other-subdirectory/test.html">

- et thì đấy, tất cả mọi thứ công trình như mong đợi: #anchor, ?query, other.html, very/other.html, /completely/other.html.


27

Chà, đợi một chút. Tôi không nghĩ rằng thẻ cơ sở xứng đáng với danh tiếng xấu này.

Điều thú vị về thẻ cơ sở là nó cho phép bạn thực hiện viết lại URL phức tạp với ít rắc rối hơn.

Đây là một ví dụ. Bạn quyết định chuyển http://example.com/product/carget/thisproduct sang http://example.com/product/thisproduct . Bạn thay đổi tệp .htaccess của bạn để viết lại URL đầu tiên thành URL thứ hai.

Với thẻ cơ sở tại chỗ, bạn thực hiện viết lại .htaccess của bạn và đó là nó. Không vấn đề gì. Nhưng không có thẻ cơ sở, tất cả các liên kết tương đối của bạn sẽ bị hỏng.

Viết lại URL thường là cần thiết, bởi vì điều chỉnh chúng có thể giúp kiến ​​trúc trang web và công cụ tìm kiếm của bạn hiển thị. Đúng, bạn sẽ cần giải pháp cho các vấn đề "#" và '' mà mọi người đã đề cập. Nhưng thẻ cơ sở xứng đáng có một vị trí trong bộ công cụ.


10
Theo quan điểm của tôi, vấn đề là bằng chứng trong tương lai. Nếu bạn sử dụng thẻ cơ sở trên một trang, tất cả các thư viện khác tương tác với trang sẽ bị ảnh hưởng bởi thẻ cơ sở, bao gồm các thư viện bên thứ ba có thể dựa vào hành vi mặc định của thẻ neo trần hoặc hàm băm.
Kzqai

4
@Kzqai, +1 Điểm tốt, nhưng có nhiều trang web không sử dụng các thư viện thiếu sót. Vấn đề không nằm ở cơ sở, đó là với thư viện và nó cần được sửa ở đó.
Pacerier

2
@Pacerier, tôi muốn nói rằng vấn đề thực sự là với cơ sở. Hay đúng hơn, vấn đề là các trình duyệt dường như không đủ thông minh để đơn giản là nó không ảnh hưởng đến neo href bắt đầu bằng #. Tôi đã cố gắng khắc phục điều này bằng javascript và điều đó gây ra sự cố với các thư viện sử dụng các href='#'liên kết (ví dụ bootstrap). Đổ lỗi cho các thư viện cũng giống như đổ lỗi cho họ về mọi thứ khác xảy ra với HTML. Đó là một công cụ lỗi thời cho một công việc hiện đại, đơn giản như.
Deji

2
"thực hiện viết lại URL phức tạp với ít rắc rối hơn." - Mặc dù, trong trường hợp này, basethẻ được cho là một cách giải quyết cho việc không có (chính xác) các URL liên quan đến gốc được sử dụng (hoặc thậm chí là URL tuyệt đối) ở vị trí đầu tiên.
MrWhite

@Deji, Khi tôi viết "vấn đề", ý tôi là "lỗi". Đúng, sự tồn tại của base href thực sự là một "vấn đề" thực sự, nhưng trong trường hợp trên, tôi đang nói rằng lỗi không phải là với Base href. (Tuy nhiên, không một lần nghĩ rằng tôi hỗ trợ sử dụng cơ sở href, Thật vậy, đứng của tôi là cơ sở href trong phiên bản hiện tại của nó là vô ích : stackoverflow.com/a/46539210/632951 . Latest con đường phía trước tại là không chấp nó Hoặc cho phép nhiều cơ sở vì nó chỉ hữu ích khi có thể sử dụng nhiều)
Pacerier

22

Để quyết định có nên sử dụng nó hay không, bạn nên biết về những gì nó làm và liệu nó có cần thiết hay không. Điều này đã được nêu ra một phần trong câu trả lời này , mà tôi cũng đã đóng góp. Nhưng để dễ hiểu và làm theo, một lời giải thích thứ hai ở đây. Đầu tiên chúng ta cần hiểu:

Làm thế nào các liên kết được trình duyệt xử lý mà không <BASE>được sử dụng?

Đối với một số ví dụ, giả sử chúng ta có các URL này:

A) http://www.example.com/index.html
B) http://www.example.com/
C) http://www.example.com/page.html
D)http://www.example.com/subdir/page.html

Cả A + B đều dẫn đến cùng một tệp ( index.html) được gửi tới trình duyệt, C dĩ nhiên gửi page.htmlvà D gửi /subdir/page.html.

Giả sử thêm, cả hai trang đều chứa một tập hợp các liên kết:

1) liên kết tuyệt đối đủ điều kiện ( http://www...)
2) liên kết tuyệt đối cục bộ ( /some/dir/page.html)
3) liên kết tương đối bao gồm tên tệp ( dir/page.html) và
4) liên kết tương đối chỉ với "phân đoạn" ( #anchor, ?foo=bar).

Trình duyệt nhận trang và hiển thị HTML. Nếu nó tìm thấy một số URL, nó cần biết nơi để trỏ nó đến. Điều đó luôn rõ ràng đối với Liên kết 1), được thực hiện như hiện trạng. Tất cả những thứ khác phụ thuộc vào URL của trang được hiển thị:

URL     | Link | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

Bây giờ những gì thay đổi với <BASE> việc được sử dụng?

<BASE>được cho là thay thế URL khi nó xuất hiện trên trình duyệt . Vì vậy, nó kết xuất tất cả các liên kết như thể người dùng đã gọi URL được chỉ định trong <BASE>. Điều này giải thích một số nhầm lẫn trong một số câu trả lời khác:

  • một lần nữa, không có gì thay đổi đối với "liên kết tuyệt đối đủ điều kiện" ("loại 1")
  • đối với các liên kết tuyệt đối cục bộ, máy chủ được nhắm mục tiêu có thể thay đổi (nếu một liên kết được chỉ định <BASE>khác với máy chủ được gọi ban đầu từ người dùng)
  • URL tương đối trở nên quan trọng ở đây, vì vậy bạn phải quan tâm đặc biệt đến cách bạn đặt <BASE>:
    • tốt hơn tránh đặt nó vào một thư mục . Làm như vậy, các liên kết của "loại 3" có thể tiếp tục hoạt động, nhưng chắc chắn nó sẽ phá vỡ các liên kết của "loại 4" (ngoại trừ "trường hợp B")
    • đặt nó thành tên tệp đủ điều kiện tạo ra, trong hầu hết các trường hợp, kết quả mong muốn.

Một ví dụ giải thích nó tốt nhất

Giả sử bạn muốn "tô điểm" một số URL bằng cách sử dụng mod_rewrite:

  • tập tin thực sự: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • URL thực: http://www.example.com/some/dir/file.php?lang=en
  • URL thân thiện với người dùng: http://www.example.com/en/file

Giả sử mod_rewriteđược sử dụng để minh bạch viết lại URL thân thiện với một thực tế (không có bên ngoài lại trực tiếp, do đó, "người dùng thân thiện", một ở lại trong thanh địa chỉ trình duyệt, trong khi thực tế-one được nạp). Làm gì bây giờ?

  • không <BASE>được chỉ định: phá vỡ tất cả các liên kết tương đối (vì chúng sẽ được dựa trên http://www.example.com/en/filebây giờ)
  • <BASE HREF='http://www.example.com/some/dir>: Hoàn toàn sai. dirsẽ được coi là một phần tệp của URL được chỉ định, do đó, tất cả các liên kết tương đối đều bị hỏng.
  • <BASE HREF='http://www.example.com/some/dir/>: Tốt hơn rồi. Nhưng các liên kết tương đối của "loại 4" vẫn bị hỏng (ngoại trừ "trường hợp B").
  • <BASE HREF='http://www.example.com/some/dir/file.php>: Chính xác. Tất cả mọi thứ nên được làm việc với cái này.

Một lưu ý cuối cùng

Hãy ghi nhớ điều này áp dụng cho tất cả các URL trong tài liệu của bạn:

  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=
  • Giáo dục

đề cập đến ghi chú cuối cùng của bạn ... Tôi tò mò .. nó cũng thay đổi cách yêu cầu jQuery ajax sẽ được diễn giải. Điều này khác hơn<SCRIPT SRC=
bkwdesign

@bkwdesign Tôi không sử dụng jQuery, nhưng tôi cho là vậy.
Izzy

@Izzy, Re "ví dụ" Trên thực tế , nếu bạn sắp xếp lại </some/dir/file.php?lang=en> thành </ en / file>, bạn cũng sẽ muốn làm đẹp </ some / dir / page2? = en> và </ some / dir / script> thành </ en / page2> và </ en / script>. Do đó, đường dẫn tương đối của bạn sẽ hoạt động như họ cần .
Pacerier

Làm thế nào sẽ <BASE HREF='http://www.example.com/some/dir/file.php>hoạt động với "loại 4"? sẽ không giống như " example.com/some/dir/file.php?foo=bar " thay vì example.com/subdir/page.html?foo=bar
ANewGuyInTown

@ANewGuyInTown Có, và đó là điều nên làm - như trong ví dụ của tôi http://www.example.com/some/dir/file.phplà "vị trí thực" (xem "một ví dụ giải thích điều đó tốt nhất") và chỉ #anchorcó thể giải quyết một đoạn ( ) ở đó.
Izzy

12

Drupal ban đầu dựa vào <base>thẻ và sau đó đã đưa ra quyết định không sử dụng do các vấn đề với bộ thu thập & bộ đệm HTTP.

Tôi thường không thích bài liên kết. Nhưng điều này thực sự đáng để chia sẻ vì nó có thể mang lại lợi ích cho những người tìm kiếm chi tiết về trải nghiệm trong thế giới thực với <base>thẻ:

http://drupal.org/node/13148


Liên kết chỉ đến một cuộc thảo luận đã có tám năm trước câu trả lời này, vì vậy bây giờ gần một thập kỷ trước. Tôi nghĩ rằng cần phải có thêm một chút thử nghiệm nếu đây vẫn là một vấn đề, thay vì liên kết với một mô tả cũ như vậy về một vấn đề có thể không tồn tại.
Sami Kuhmonen

Đúng, nhưng IMHO nó vẫn còn một cái mở mắt như những gì các vấn đề bạn cần phải kiểm tra của bạn <base>thực hiện dựa chống lại, không chỉ là neo của bạn hoạt động ngay trong trình duyệt của bạn.
Amr Mostafa

@AmrMostafa, Chỉ cần không sử dụng cơ sở href.
Pacerier

10

Nó làm cho các trang dễ dàng hơn để xem ngoại tuyến; bạn có thể đặt URL đủ điều kiện vào thẻ cơ sở và sau đó tài nguyên từ xa của bạn sẽ tải đúng cách.


@Erik, Ngoài việc xem ngoại tuyến, nó cũng hoạt động đối với tất cả các giai đoạn dừng lại cần phải giới thiệu một trang của một tên miền trên một tên miền khác. Ví dụ: khi giới thiệu một trang trên jsfiddle, bạn có thể sử dụng cơ sở để làm cơ sở cho tên miền của mình thay vì tên miền của jsfiddle. Mặc dù nói một cách thực tế, việc tạo một thẻ chỉ cho các usecase stopgap như vậy không phải là một thiết kế tốt, do đó, cơ sở nên không được chấp nhận và loại bỏ ngay cả khi nó có thể hữu ích cho các usecase stopgap đó.
Pacerier

5

Hàm băm "#" hiện hoạt động cho các liên kết nhảy kết hợp với phần tử cơ bản, nhưng chỉ trong các phiên bản mới nhất của Google Chrome và Firefox, KHÔNG phải IE9.

IE9 dường như khiến trang được tải lại mà không phải nhảy ở bất cứ đâu. Nếu bạn đang sử dụng các liên kết nhảy ở bên ngoài iframe, trong khi chỉ đạo khung để tải các liên kết nhảy trên một trang riêng trong khung, thay vào đó, bạn sẽ nhận được một bản sao thứ hai của trang liên kết nhảy được tải bên trong khung.


5

Nó có lẽ không phổ biến lắm vì nó không nổi tiếng. Tôi sẽ không sợ sử dụng nó vì tất cả các trình duyệt chính đều hỗ trợ nó.

Nếu trang web của bạn sử dụng AJAX, bạn sẽ muốn đảm bảo tất cả các trang của mình được đặt chính xác hoặc bạn có thể kết thúc bằng các liên kết không thể giải quyết.

Chỉ không sử dụng targetthuộc tính trong trang nghiêm ngặt HTML 4.01.


Trên thực tế basetarget có thể hữu ích, nhưng không phải là cơ sở. Thật vậy, nó không phổ biến vì nó không hữu ích . Xem ans của tôi.
Pacerier

Bây giờ tất cả các trình duyệt hỗ trợ basethẻ.
Vitaly Zdanevich

3

Trong trường hợp hình ảnh SVG được nội tuyến trong trang, có một vấn đề quan trọng khác phát sinh khi basethẻ được sử dụng:

Vì với basethẻ (như đã lưu ý ở trên), bạn thực sự mất khả năng sử dụng các URL băm tương đối như trong

<a href="#foo">

bởi vì chúng sẽ được giải quyết theo URL cơ sở thay vì vị trí của tài liệu hiện tại và do đó không còn tương đối nữa. Vì vậy, bạn sẽ phải thêm đường dẫn của tài liệu hiện tại vào các loại liên kết như trong

<a href="https://stackoverflow.com/path/to/this/page/name.html#foo">

Vì vậy, một trong những khía cạnh có vẻ tích cực của basethẻ (đó là di chuyển các tiền tố URL dài ra khỏi thẻ neo và nhận được các neo tốt hơn, ngắn hơn) hoàn toàn phản hồi cho các URL băm cục bộ.

Điều này đặc biệt khó chịu khi nội tuyến SVG trong trang của bạn, có thể là SVG tĩnh hoặc SVG được tạo động bởi vì trong SVG có thể có rất nhiều tài liệu tham khảo như vậy và tất cả chúng sẽ bị hỏng ngay khi basesử dụng thẻ, nhưng không phải tất cả người dùng triển khai tác nhân (ít nhất Chrome vẫn hoạt động trong các tình huống này tại thời điểm viết).

Nếu bạn đang sử dụng một hệ thống tạo khuôn mẫu hoặc chuỗi công cụ khác xử lý / tạo các trang của bạn, tôi sẽ luôn cố gắng loại bỏ basethẻ, vì như tôi thấy, nó mang lại nhiều vấn đề hơn cho bảng hơn là giải quyết.


Có hoặc không có SVG, thẻ cơ sở là vô dụng và được coi là có hại . Xem công phu của tôi: stackoverflow.com/a/46539210/632951
Pacerier

3

Ngoài ra, bạn nên nhớ rằng nếu bạn chạy máy chủ web của mình ở cổng không chuẩn, bạn cũng cần bao gồm số cổng tại cơ sở href:

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above

2

Tôi chưa bao giờ thực sự thấy một điểm trong việc sử dụng nó. Cung cấp rất ít lợi thế, và thậm chí có thể làm cho mọi thứ khó sử dụng hơn.

Trừ khi bạn có hàng trăm hoặc hàng ngàn liên kết, tất cả đều vào cùng một thư mục con. Sau đó, nó có thể giúp bạn tiết kiệm một vài byte băng thông.

Như một suy nghĩ lại, tôi dường như nhớ lại rằng có một số vấn đề với thẻ trong IE6. Bạn có thể đặt chúng ở bất cứ đâu trong cơ thể, chuyển hướng các phần khác nhau của trang web đến các vị trí khác nhau. Điều này đã được sửa trong IE7, đã phá vỡ rất nhiều trang web.


3
Ưu điểm có lẽ không phải là tiết kiệm băng thông, nhưng các url sạch hơn và ngắn hơn. Thật không may, những thay đổi tinh vi trong hành vi đối với tất cả các liên kết thực sự không đáng giá, hóa ra là.
Kzqai

1
Các basethẻ là một giải pháp cho một số vấn đề. Nếu bạn không gặp vấn đề gì thì đừng sử dụng basethẻ. Ví dụ: 1. Sử dụng lại nội dung HTML trong các hệ thống khác nhau. Các liên kết được giữ tương đối trong nội dung và một basethẻ thích hợp được đặt (bởi CMS) để các liên kết giải quyết chính xác. 2. Một trang web hiện tại sử dụng các URL tương đối trong suốt nhưng sau đó quyết định triển khai các URL "đẹp" làm thay đổi độ sâu đường dẫn URL. Một basethẻ có thể được xem là thích hợp hơn để "sửa chữa" tất cả các URL tương đối.
MrWhite

@MrWhite, CMS không cần sử dụng thẻ cơ sở để giải quyết các liên kết chính xác vì HTML đã hỗ trợ các đường dẫn tương đối mặc định cho thư mục hiện tại. Xem chi tiết tại đây: stackoverflow.com/a/46539210/632951
Pacerier

1
@Pacerier Điều đó phụ thuộc vào vị trí của nội dung (FWIW Tôi không đề cập đến WordPress et al).
MrWhite

@MrWhite thường là một CMS sẽ không sử dụng các liên kết tĩnh ở vị trí đầu tiên, vì vậy ví dụ đó là loại lạ. Trên thực tế, rất ít trang web ngày nay được xây dựng bằng HTML tĩnh. - Tôi có thể thấy quan điểm của bạn ở đó, nhưng đó là những giải pháp cho các vấn đề về cơ bản đã lỗi thời. (Mọi người và ông bà của họ đang sử dụng WordPress, hoặc tương tự, cho tất cả mọi thứ.)
Atli

2

cũng có một trang web nơi sử dụng thẻ cơ sở và đã xảy ra sự cố được mô tả. (sau khi nâng cấp jquery), đã có thể sửa nó bằng cách sử dụng các url như thế này:

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

điều này làm cho họ "địa phương"

tài liệu tham khảo tôi đã sử dụng:

http://bugs.jqueryui.com/ticket/7822 http://htmlhelp.com/reference/html40/head/base.html http://tjvantoll.com/2013/02/17/using-jquery-ui- thẻ-với-cơ sở-thẻ /


2

Làm việc với AngularJS, thẻ BASE đã phá vỡ $ cookieStore và tôi phải mất một lúc để tìm hiểu lý do tại sao ứng dụng của tôi không thể viết cookie nữa. Được cảnh báo ...


1

Một điều cần lưu ý:

Nếu bạn phát triển một trang web sẽ được hiển thị trong UIWebView trên iOS, thì bạn phải sử dụng thẻ BASE. Nó chỉ đơn giản là không hoạt động khác. Là JavaScript, CSS, hình ảnh - không ai trong số chúng sẽ hoạt động với các liên kết tương đối trong UIWebView, trừ khi thẻ BASE được chỉ định.

Tôi đã bị bắt bởi điều này trước đây, cho đến khi tôi phát hiện ra.


1

Tôi đã tìm thấy một cách để sử dụng <base>và neo liên kết dựa trên. Bạn có thể sử dụng JavaScript để giữ các liên kết như hoạt #contactđộng như chúng phải làm. Tôi đã sử dụng nó trong một số trang thị sai và nó hoạt động với tôi.

<base href="http://www.mywebsite.com/templates/"><!--[if lte IE 6]></base><![endif]-->

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

Bạn nên sử dụng ở cuối trang


0

Đề nghị của tôi là KHÔNG sử dụng <base>phần tử trong việc quản lý đường dẫn url . Tại sao?

Nó chỉ giao dịch một vấn đề cho một vấn đề khác. Nếu không có phần tử cơ sở, bạn có thể sử dụng bất kỳ hệ thống đường dẫn nào bạn thích cho các đường dẫn và liên kết tương đối của mình mà không sợ chúng bị hỏng. Giây phút bạn đặt phần tử cơ sở thành một đường dẫn mà bạn "bị khóa" để thiết kế tất cả các url của bạn để xử lý đường dẫn đó và bây giờ sẽ phải thay đổi TẤT CẢ các đường dẫn để hoạt động từ đường dẫn cơ sở. Ý kiến ​​tồi!

Điều đó có nghĩa là bây giờ bạn phải viết các đường dẫn DÀI HẠN VÀ theo dõi xem mỗi đường dẫn có liên quan đến cơ sở này. Tệ hơn ..... khi sử dụng <base>phần tử mà họ khuyên bạn nên sử dụng đường dẫn cơ sở đủ điều kiện để hỗ trợ các trình duyệt cũ hơn (" https://www.example.com/ "), vì vậy bây giờ bạn đã mã hóa tên miền của mình vào tên miền của mình trang hoặc thực hiện tất cả các liên kết của bạn phụ thuộc vào một đường dẫn tên miền hợp lệ.

Mặt khác, ngay khi bạn xóa lại đường dẫn cơ sở khỏi trang web của mình, bạn lại được tự do sử dụng các đường dẫn tương đối ngắn hơn, có thể đủ điều kiện, sử dụng các đường dẫn tuyệt đối từ gốc hoặc sử dụng các đường dẫn thực sự liên quan đến tập tin và thư mục bạn đang ở. Nó linh hoạt hơn nhiều. Và tốt nhất trong tất cả các đoạn như "#hello" hoạt động chính xác mà không cần sửa chữa thêm. Một lần nữa, mọi người đang tạo ra những vấn đề không tồn tại.

Ngoài ra, lập luận ở trên rằng việc sử dụng url cơ sở của bạn để giúp bạn di chuyển các thư mục của các trang web đến các vị trí thư mục con mới không thực sự quan trọng hiện nay vì hầu hết các máy chủ hiện đại cho phép bạn nhanh chóng thiết lập bất kỳ thư mục con nào dưới dạng thư mục gốc ứng dụng mới trong bất kỳ miền nào. Định nghĩa hoặc "gốc" của một ứng dụng web hiện không bị hạn chế bởi các thư mục hoặc tên miền.

Có vẻ như loại ngớ ngẩn này toàn bộ cuộc tranh luận. Vì vậy, tôi nói bỏ url cơ sở và hỗ trợ hệ thống đường dẫn mặc định máy chủ-máy khách cũ không sử dụng nó.

Lưu ý: Nếu sự cố bạn gặp phải là kiểm soát các đường dẫn do một số hệ thống API mới, thì giải pháp rất đơn giản ... hãy nhất quán trong cách bạn đường dẫn tất cả các url và liên kết trong API của bạn. Đừng dựa vào sự hỗ trợ của trình duyệt về các thủ thuật xiếc cơ bản hoặc HTML5 hoặc các trò xiếc mới hơn như các kiddies API javascript làm. Đơn giản chỉ cần đường dẫn tất cả các thẻ neo của bạn một cách nhất quán và bạn sẽ không bao giờ có vấn đề. Hơn nữa, ứng dụng web của bạn có thể được chuyển đến các máy chủ mới ngay lập tức bất kể hệ thống đường dẫn được sử dụng.

Cái gì cũ là mới nữa! Yếu tố cơ bản rõ ràng là về việc cố gắng tạo ra một giải pháp cho một vấn đề chưa từng tồn tại trong Thế giới Web 20 năm trước, ngày nay ít hơn nhiều.


-1

Ví dụ cơ bản

Nói một trang điển hình với các liên kết:

<a href=home>home</a> <a href=faq>faq</a> <a href=etc>etc</a>

.and liên kết đến một thư mục khác:

..<a href=../p2/home>Portal2home</a> <a href=../p2/faq>p2faq</a> <a href=../p2/etc>p2etc</a>..

Với cơ sở , chúng ta có thể tránh lặp lại thư mục cơ sở:

<base href=../p2/>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

Vì vậy, đó là một chiến thắng .. nhưng các trang quá thường chứa các url cho các cơ sở khác nhau Và trang web hiện tại chỉ hỗ trợ một cơ sở trên mỗi trang , do đó, chiến thắng sẽ nhanh chóng bị mất vì các cơ sở không được lặp lại, ví dụ:

<a href=../p1/home>home</a> <a href=../p1/faq>faq</a> <a href=../p1/etc>etc</a>
<!--.. <../p1/> basepath is repeated -->

<base href=../p2>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>


Phần kết luận

( Mục tiêu cơ sở có thể hữu ích.) Base href là vô dụng như:

  • trang cũng WET kể từ:
    • cơ sở mặc định [thư mục mật khẩu] ⇌ hoàn hảo (trừ khi ngoại lệ không cần thiết / hiếm gặp 𝒞1 & 2 ).
    • web hiện tại nhiều cơ sở không được hỗ trợ .

Liên quan


Một số @downvoters nhất định sẽ không thể giải thích được bashref hữu ích như thế nào, đặc biệt là khi toàn bộ các ngành công nghiệp khuyến nghị không nên sử dụng nó.
Pacerier
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.