Совет: меняем поведение относительных URL с помощью тега base

HTML тег <base> - относительно малоизвестный тег, который не так давно стал частью HTML5. Он позволяет делать следующее:

  1. указать любой URL в качестве базы для относительных URL
  2. указать цель по-умолчанию для ссылок

Основы

Элемент <base> указывается в секции <head>, и указать можно только один такой элемент на страницу. Указывать его в документе нужно как можно раньше, так как его действие распространяется с места его указания. У него есть два возможных атрибута: href и target. Вы можете использовать как один из них, так и оба сразу.

Пример 1: ярлык для зарузки ресурсов

Скажем, ваш сайт хранит изображения и CSS в директории под названием “assets”. Вы можете задать тег <base> следующим образом:

<head>
    <base href="http://www.myepicsite.com/assets/">
</head>

Это позволит вам загружать изображения и CSS следующим образом:

<head>
    <base href="http://www.myepicsite.com/assets/">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="image01.png" />
</body>

Ссылка на style.css будет преобразована в http://www.myepicsite.com/assets/style.css, а image01.png будет загружен из http://www.myepicsite.com/assets/image01.png.

Пример 2: внутренние ссылки со страницы

Что, если у вас есть домен верхнего уровня, с которого производится переадресация на http://thisrocks.com/app/, а все внутренние ссылки должны содержать сегмент app/?

Вы можете указать базовый URL следующим образом:

<base href="http://thisrocks.com/app/">

Таким образом, всякий раз, когда вам нужно было бы сослаться с одной внутренней страницы на другую, вы могли бы использовать:

<a href="anotherpage.htm">LINK</a>

Такая ссылка будет ссылаться на http://thisrocks.com/app/anotherpage.htm

Пример 3: цель ссылки по-умолчанию

С помощью <base> также можно указать цель по-умолчанию для всех ссылок на странице. Если вы укажете:

<base target="_blank">

то каждая ссылка, у которой явно не задан атрибут target будет открываться в новом окне. Атрибут target можно использовать как вместе с атрибутом href, так и без него.

Эта возможность вероятно будет полезна для содержимого, загружаемого из iframe, таким образом, что у вас будет возможность открывать все ссылки на странице в соответствующем iframe.

Недостатки

Хотя базовый URL может быть и полезен, но его недостатком является то, что однажды его задав, он будет действовать везде. Его можно использовать только одним образом, и он будет действовать на все URL на странице. Если вы не хотите использовать базовый URL, заданный посредством <base>, его нужно особым образом переопределить.

Если вы использовали базовый URL, чтобы упростить подключение ресурсов, а после решили использовать его для ссылок на внутренние страницы, у вас возникнут проблемы (например, с такой ссылкой: <a href="page.html">Страница</a>).

Это из-за того, что базовый URL теперь http://www.myepicsite.com/assets/, и ваши пользователи будут направлены на адрес http://www.myepicsite.com/assets/page.html.

В таком случае вам нужно будет переопределить базовый URL для этой ссылки, указав полный URL на страницу, то есть <a href="http://www.myepicsite.com/page.html">Страница</a>

Якоря

При использовании <base> вы можете столкнуться с проблемой ссылок на внутристраничные якоря.

Обычно ссылка вида <a href="#top">Наверх</a> оставит вас на текущей странице, но перенесет к элементу с id="top", то есть она будет ссылаться на http://thisrocks.com/app/article.html#top.

Но если вы используете тег <base> с заданным атрибутом href, то вы будете перенаправлены на базовый URL с добавленным к адресу сегментом #top, то есть http://thisrocks.com/app/#top.

В этом случае также необходимо переопределить умолчания, заданные тегом <base>, указав страницу, к которой относится ваш якорь, то есть <a href="article.html#top">Наверх</a>

Где уместен тег <base>

Тег <base> лучше всего использовать в случае, когда у вас есть полный контроль над всеми используемыми URL, то есть, если вы знаете, что у вас будет возможность переопределить умолчания так, как вам это нужно. Если вы разрабатываете шаблон для CMS, где есть много неизвестных переменных, то, вероятно, тегом <base>лучше не пользоваться.

Но если вы разрабатываете статичный HTML сайт, то тег <base>может быть очень полезен. И это еще более справедливо, если вы используете шаблонзатор вроде Jade или Handlebars, который позволит вам использовать вставки вроде <a href="{url}#top">Наверх</a>, так что если вам потребуется переопределить умолчания, то это будет несложно.

Если вы точно знаете, каким будет содержимое вашего проекта, и все ссылки и URL под вашим полным контролем, то тег <base> может сэкономить вам время.

Узнать больше о теге <base> можно в вики W3C и в спецификации HTML5:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://code.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399
Перевел: Станислав Протасевич
Урок создан: 2 Июля 2014
Просмотров: 33723
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Июля 2014 05:50
    shoydullo
    http://www.rd.uz/ru/index.php Как узнать сколько раз клик ваш адрес URL
  • 16 Июля 2014 14:14
    seregaponarin
    Не вижу смысла в таком теге. Если нужно упростить переход по повторяющимся путям ссылки, определите этот путь в константе и ссылайтесь через нее. Этим же вы избавляетесь от недостатка base, описанного в этой статье
  • 24 Июля 2014 08:18
    СиротА
    Что-то уже 22 дня тишина...
    • 6 Августа 2014 13:03
      marker09
      уже за месяц перевалило(
      • 12 Августа 2014 12:13
        denis_korchagin95
        класс
  • 26 Июля 2014 13:24
    istohnic
    Все сдувается сайтик я уже не чего полезного 3 месяца для себя не нахожу!!! (
  • 26 Июля 2014 13:50
    Shekna
    Отлично!
  • 14 Августа 2014 20:40
    shamko.denis
    Эх, с грустью вспоминаю время интересных уроков для нубов по php типо регистрации, авторизации, рейтингов, подборки ПРОСТЫХ и полезных функций. Сейчас только ума хватает копипастить статьи по bootstrap и html5. Помоему последнее что было полезное это библиотека для авторизации через соц. сети. Евгений, может ты уже займешься сайтом?
  • 5 Сентября 2016 09:06
    indeveler
    Господа, если тег был полезен хотя бы одному разработчику - значит он был разработан не зря. Да, его использование можно исключить, но зачастую необходимо вносить коррективы в архитектуру приложения. Мне этот тег оказался жизненно необходим, когда при рендеринге загруженных html файлов с ресурсами (стили, картинки) мне нужно было сохранить относительные пути. Было два варианта: 1. iframe - пришлось переписывать JS для работы через $('#iframe').contents(), некоторые события через раз срабатывают, решается native-js. Но самое плохое, что при попытке сделать proxy для домена (аналог CNAME, но с использованием пути) браузер не даёт этот iframe подгрузить из-за политики безопасности. Короче, решение не подошло. 2. тег < base > - сработал прекрасно. Где надо - используем абсолютные пути. Да, возможно придётся кое-что поправить, но по крайней мне с Yii2 ничего переписывать не пришлось, я лишь меняю baseUrl в контроллере там, где есть ajax-запросы (более подробно тут https://toster.ru/q/350922)
^ Наверх ^