Sebelum memutuskan apakah akan menggunakan <base>
tag atau tidak, Anda perlu memahami cara kerjanya, apa yang dapat digunakan untuk dan apa implikasinya dan akhirnya melebihi keuntungan / kerugiannya.
The <base>
tag terutama memudahkan membuat link relatif template bahasa karena Anda tidak perlu khawatir tentang konteks saat ini di setiap link yang.
Anda bisa melakukannya misalnya
<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" />
dari pada
<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" />
Harap dicatat bahwa <base href>
nilai berakhir dengan garis miring, jika tidak maka akan ditafsirkan relatif terhadap jalur terakhir.
Adapun kompatibilitas browser, ini hanya menyebabkan masalah di IE. The <base>
tag di HTML ditetapkan sebagai tidak memiliki tag akhir </base>
, jadi legit untuk hanya menggunakan <base>
tanpa tag akhir. Namun IE6 berpikir lain dan seluruh isi setelah itu <base>
tag dalam kasus seperti ditempatkan sebagai anak dari <base>
elemen dalam pohon HTML DOM. Hal ini dapat menyebabkan pada pandangan pertama masalah yang tidak dapat dijelaskan dalam Javascript / jQuery / CSS, yaitu elemen yang sama sekali tidak dapat dijangkau dalam penyeleksi tertentu seperti html>body
, sampai Anda menemukan di inspektur HTML DOM bahwa harus ada base
(dan head
) di antaranya.
Perbaikan IE6 yang umum adalah menggunakan komentar bersyarat IE untuk menyertakan tag akhir:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
Jika Anda tidak peduli dengan W3 Validator, atau ketika Anda sudah menggunakan HTML5, maka Anda bisa menutup sendiri, setiap webbrowser mendukungnya:
<base href="http://example.com/en/" />
Menutup <base>
tag juga secara instan memperbaiki kegilaan IE6 pada WinXP SP3 untuk meminta <script>
sumber daya dengan URI relatif di src
dalam loop tak terbatas.
Masalah IE potensial lainnya akan muncul ketika Anda menggunakan URI relatif di <base>
tag, seperti <base href="https://stackoverflow.com//example.com/somefolder/">
atau <base href="https://stackoverflow.com/somefolder/">
. Ini akan gagal di IE6 / 7/8. Namun ini bukan kesalahan browser; menggunakan URI relatif di <base>
tag adalah salah sendiri. The spesifikasi HTML4 menyatakan bahwa itu harus menjadi URI mutlak, sehingga dimulai dengan http://
atau https://
skema. Ini telah dijatuhkan dalam spesifikasi HTML5 . Jadi jika Anda menggunakan HTML5 dan hanya menargetkan browser yang kompatibel dengan HTML5, maka Anda akan baik-baik saja dengan menggunakan URI relatif di <base>
tag.
Untuk menggunakan jangkar fragmen bernama / hash seperti <a href="#anchor">
, kueri jangkar seperti string dan jangkar <a href="?foo=bar">
path fragmen seperti <a href=";foo=bar">
, dengan <base>
tag Anda pada dasarnya mendeklarasikan semua tautan relatif relatif terhadap itu, termasuk jenis jangkar tersebut. Tidak ada tautan relatif yang relatif terhadap URI permintaan saat ini lagi (seperti yang akan terjadi tanpa <base>
tag). Ini mungkin pada awalnya membingungkan bagi pemula. Untuk membangun jangkar tersebut dengan cara yang benar, Anda pada dasarnya perlu menyertakan URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
di mana ${uri}
pada dasarnya diterjemahkan ke $_SERVER['REQUEST_URI']
dalam PHP, ${pageContext.request.requestURI}
di JSP, dan #{request.requestURI}
di JSF. Perlu dicatat bahwa kerangka kerja MVC seperti JSF memiliki tag yang mengurangi semua boilerplate ini dan menghilangkan kebutuhan untuk <base>
. Lihat juga ao URL apa yang digunakan untuk menautkan / menavigasi ke halaman JSF lainnya .