Прежде чем решить, использовать <base>
тег или нет, вам необходимо понять, как он работает, для чего он может использоваться и каковы его последствия, и, наконец, перевесить преимущества / недостатки.
Этот <base>
тег в основном облегчает создание относительных ссылок на языках шаблонов, так как вам не нужно беспокоиться о текущем контексте каждой ссылки.
Вы можете сделать, например,
<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" />
вместо
<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" />
Обратите внимание, что <base href>
значение заканчивается косой чертой, иначе оно будет интерпретировано относительно последнего пути.
Что касается совместимости браузера, это вызывает только проблемы в IE. <base>
Тег в HTML указано , как не имеющие конечный тег </base>
, так что это законно , чтобы просто использовать <base>
без закрывающего тега. Однако IE6 думает иначе , и все содержимое после в <base>
теге в таком случае помещенного в качестве ребенка из <base>
элемента в дереве HTML DOM. Это может вызвать на первый взгляд необъяснимые проблемы в Javascript / jQuery / CSS, то есть элементы совершенно недоступны в определенных селекторах, например html>body
, до тех пор, пока вы не обнаружите в инспекторе HTML DOM, что между base
(и head
) должно быть (и ).
Обычное исправление IE6 использует условный комментарий IE для включения конечного тега:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
Если вас не волнует W3 Validator или вы уже используете HTML5, то вы можете просто закрыть его самостоятельно, так или иначе его поддержит каждый веб-браузер:
<base href="http://example.com/en/" />
Закрытие <base>
тега также мгновенно устраняет безумие IE6 в WinXP SP3 для запроса <script>
ресурсов с относительным URI в src
бесконечном цикле.
Другая потенциальная проблема IE проявится, когда вы используете относительный URI в <base>
теге, например <base href="https://stackoverflow.com//example.com/somefolder/">
или <base href="https://stackoverflow.com/somefolder/">
. Это не удастся в IE6 / 7/8. Это, однако, не совсем ошибка браузера; использование относительных URI в <base>
теге само по себе неправильно. В спецификации HTML4 указано, что это должен быть абсолютный URI, поэтому он начинается со схемы http://
or https://
. Это было опущено в спецификации HTML5 . Так что, если вы используете только HTML5 и целевые HTML5-совместимые браузеры, то у вас должно быть все в порядке, если использовать относительный URI в <base>
теге.
Что касается использования привязок фрагментов именованных / хеш-фрагментов, таких как привязки <a href="#anchor">
строк запросов <a href="?foo=bar">
и привязок фрагментов пути <a href=";foo=bar">
, то с <base>
тегом вы в основном объявляете все относительные ссылки, относящиеся к нему, включая такие виды привязок. Ни одна из относительных ссылок больше не относится к текущему URI запроса (как это было бы без <base>
тега). Это может в первую очередь сбить с толку для начинающих. Чтобы правильно построить эти якоря, вам нужно включить URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
где в ${uri}
основном переводится $_SERVER['REQUEST_URI']
в PHP, ${pageContext.request.requestURI}
JSP и #{request.requestURI}
JSF. Следует отметить, что MVC-фреймворки, такие как JSF, имеют теги, уменьшающие весь этот шаблон и устраняющие необходимость <base>
. Смотрите также, какой URL использовать для ссылки / перехода на другие страницы JSF .