К постам Опубликовано: 2016-09-03

Определение базового URL документа из HTML тегом <base>

Сайты построены из массы ссылок, указывающих на страницы и источники, такие как изображения и таблицы стилей. Есть два способа указать URL для ссылок на эти источники: либо использовать абсолютный путь либо относительный путь. Абсолютный путь относится к определенному месту назначения, как правило, он запускается с именем домена (наряду с HTTP), как www.domain.com/папка/источник.jpg. Относительный путь является противоположным: назначенная ссылка зависит от корневого каталога или в большинстве случаев доменного имя вашего сайта. Типичный относительный путь будет выглядеть следующим образом: [code]<img src="/assets/img/image.png" alt="">[/code] Если ваш домен сайта, например, www.code.in.ua, путь изображения будет преобразовано в www.code.in.ua/assets/img/image.png. Вы должны понимать это, если вы занимались разработкой веб-сайта некоторое время. Но большинство из вас, вероятно, не слышали об элементе <base>. Этот HTML-тег был примерно с HTML4, но очень мало видел его реализации в настоящей разработке. W3C описывает этот элемент как:
Базовый элемент позволяет авторам указать документ, базовый URL для целей разрешения относительных URL-адресов, а также имя контекста просмотра по умолчанию для целей следующих гиперссылок.
Этот элемент <base> в основном определяет базовый URL для относительного пути в веб-страницах. Вместо того, чтобы иметь зависимости от корневого местоположения или домена вашего сайта, вы можете указать его куда-нибудь еще, может быть, где ваши ресурсы находятся в CDN (сеть доставки контента). Давайте посмотрим, как это на самом деле работает. <base> определяется возле <meta> и <link> тегов, в <head>. Получим следующий пример, мы установили базовый URL к Google. [code]<base href="http://www.code.in.ua.maxcdn.com/assets/">[/code] Эта спецификация будет влиять на все пути в пределах документа, в том числе тот, который указан в атрибуте HREF и SRC изображений. Таким образом, предполагая, что мы имеем таблицу стилей, изображения и ссылки в наборе документов с относительным путем, как это, например: [code]<link rel="stylesheet" href="path/main.css"> <a href="path/page/sub-page/">Anchor Link</a> <img src="path/image.jpg">[/code] Даже если наша веб-страница находится в dev.www.code.in.ua относительный путь будет относиться к www.code.in.ua.maxcdn.com, после базового пути, указанного в теге <base>. Попробуйте навести курсор над ссылкой, и браузер покажет вам, полный путь . [code]<link rel="stylesheet" href="http://www.code.in.ua.maxcdn.com/assets/path/main.css"> <a href="http://www.code.in.ua.maxcdn.com/assets/path/page/sub-page/">Anchor Link</a> <img src="http://www.code.in.ua.maxcdn.com/assets/path/image.jpg">[/code] Помимо определения базового URL, тег <base> можно также установить цель ссылки по умолчанию с помощью целевого атрибута. Допустим, вы хотите, чтобы все ссылки в документе, открывались в новой вкладке браузера, установите цель с _blank. [code]<base href="http://hongkiat.maxcdn.com/assets/" target="_blank">[/code] Предостережения <base>, однако, имеет несколько изъянов в некоторых обстоятельствах: Во-первых, <base> поддержка браузера велика; она работает в IE6. Но, IE6 считает, что он требует закрывающего тега </>. Это может привести к проблемам иерархии в документе, если закрывающий тег не задан. Простой быстрый способ решения этой проблемы является добавление </base>, закрытия внутри комментария <!--[if lte IE 6]></base><![endif]-->. Если вы используете # в сочетании с <base>, чтобы связать с разделами в документе, вы можете столкнуться с потенциальной проблемой в Internet Explorer 9. Вместо того, чтобы прыгать к упомянутой секции, Internet Explorer 9 будет перезагружать страницу. Кроме того, пустой HREF приведет к базовому URL вместо привязки к текущей директории, где находится страница (это поведение браузера по умолчанию), что может вызвать неожиданные проблемы из ссылками. <base> представляет собой удобную HTML-функцию, которая может упростить указание адресов ссылок в веб-документе. Используйте тег взвешенно, чтобы свести к минимуму подводные камни.