Валидное открытие ссылки в новом окне
Все, кто уже неплохо разбирается в HTML, прекрасно знают о существовании атрибута target у тега <a>. Однако, не все знают, что данного атрибута в спецификации XHTML Strict уже нет. И встаёт вопрос, как открыть ссылку в новом окне с валидным кодом. Об этом я и напишу сейчас.
Я приведу 2 способа открытия ссылки в новом окне с валидным кодом. Оба они используют JavaScript. Давайте разберём 1-й способ:
<a href="http://myrusakov.ru" onclick="return !window.open(this.href)">Как создать свой сайт</a>
Данный код достаточно хитрый, поскольку он ещё учитывает наличие блокировок окон в браузере. Если таковое имеется, то ссылка просто откроется в этом же окне (лучше, чем если вообще не откроется), а если нет, то всё хорошо, и ссылка откроется именно в новом окне.
Данный вариант подходит для редкого использования, однако, не всегда ссылка будет открываться так, как Вы хотите (как раз из-за наличия блокировок окон). Вдобавок, если таких ссылок много, то копировать код будет весьма неудобно. Поэтому есть другой способ, который я сам использую:
<script type="text/javascript">
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++) {
if (anchors[i].getAttribute("href") && anchors[i].getAttribute("rel") == "external")
anchors[i].target = "_blank";
}
}
</script>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<script type="text/javascript">
externalLinks();
</script>
В данном коде мы в самом конце (перед закрывающим </body>) вызываем функцию externalLinks(), которая во все ссылки, у которых есть атрибут "rel" со значением "external", добавляет target="_blank". Но валидатор этого не видит и считает код валидным. Саму функцию можно вынести в отдельный файл, который подключать на каждой странице. А вызывать функцию необходимо в самом конце, опять же на каждой странице. Тогда останется лишь добавлять соответствующий атрибут в те ссылки, которые должны открываться в новом окне. Причём это будет работать всегда и во всех браузерах, независимо от их блокировок, а вставляемый код в такую ссылку будет минимальным и, главное, валидным.
-
Создано 18.06.2012 05:43:10
-
Михаил Русаков
Комментарии (3):
Поскажите новичку где ошибка, почему код не валидный. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <meta name="robots" content="INDEX,FOLLOW"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="Content-Language" content="ru"> <link href="iru.css" rel="stylesheet" type="text/css"> </head> <body> <p>Ни кротостью, ни негой ясной Черты любимых муз не привлекают нас. </p> </body> </html>
Ответить
Стоит лишний слеш после объявления кодировки. Надо так: charset=utf-8">
Ответить
Второй способ открывает ссылку в том же окне(точнее вкладке), даже если код не валидный
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.