Совет: меняем поведение относительных 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
Просмотров: 36719
Правила перепечатки

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

^ Наверх ^