Открываем ссылку в новом окне, не используя атрибут target в коде страницы

Рекомендации W3C для HTML 4.01 Strict и XHTML 1.0 Strict более не включают атрибут target для тега <a>. Переходные (Transitional) версии спецификаций допускают его применение, но стандарты для того и разработаны, чтобы ими пользоваться. Поэтому далее рассмотрим, как все-таки открывать ссылки в новом окне, не используя при этом устаревший атрибут target в (X)HTML-коде документа.

Итак, спецификаця HTML 4.01 убирает атрибут target, но при этом добавляет другой атрибут: rel. Этот атрибут создан для того, чтобы установить взаимоотношения между документом, содержащим ссылку и целью этой ссылки. В спецификации определены несколько стандартных значений этого атрибута (next, previous, chapter, section), большая часть которых обозначает отношения между отдельными секциями большого документа. Однако, спецификация допускает и нестандартные, определяемые автором документа значения атрибута rel. Поэтому со спокойной совестью для всех ссылок, которые будут открываться в новом окне, определим значение атрибуту rel к примеру: external.

В результате, старые ссылки типа <a href="document.html" target="_blank">в новое окно</a> теперь будут выглядеть как <a href="document.html" rel="external">в новое окно</a>. Таким образом отмечаем ссылки, которые будут открываться в новом окне, при этом код страницы остается в рамках стандартов. Для того, чтобы ссылки действительно открывались в новом окне, надо добавить JavaScript, который возьмет эту задачу на себя.

Скрипт запускается один раз при загрузке страницы и находит все ссылки, которым мы ранее установили атрибут rel="external", чтобы затем сделать их открываемыми в новом окне.

Сперва определим, сможет браузер сделать задуманное нами:


if (!document.getElementsByTagName) return;

getElementsByTagName — метод стандартный для Объектной Модели Документа (DOM1), поддерживаемый современными браузерами, тем не менее проверка никогда не лишена смысла. Убедившись, что браузер понимает этот метод, используем его для поиска и построения списка всех элементов <a> в документе:


var anchors = document.getElementsByTagName("a");

Теперь anchors содержит массив, каждый элемент которого представлен тегом <a> в документе. Затем нужно перебрать все теги <a>, чтобы найти ссылки, которые планировали открывать в новом окне и немного их модифицировать. Для этого воспользуемся циклом for:


for (var i=0; i < anchors.length; i++) {
	if (anchors[i].getAttribute("href") &&
	anchors[i].getAttribute("rel") == "external") {
		anchors[i].target = "_blank";
	}
}


В этом цикле последовательно перебираем все элементы массива anchors, проверяем каждый элемент: является ли он ссылкой (наличие атрибута href) и если у него есть установленный нами атрибут rel="external", то добавляем тегу атрибут target, которому присваиваем значение _blank.

Осталось объявить функцию (например, назовем ее externalLinks) и запустить ее после загрузки страницы, используя событие окна onload. Полный код скрипта получится таким:


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";
	}
}
}
window.onload = externalLinks;

Чтобы использовать скрипт на всем сайте, сохраним его в отдельном файле script.js, например. И в блоке <head> на каждой странице вызовем его:


<script type="text/javascript" src="script.js">
</script>

Вот и все! Теперь ссылки, которые должны открывать новое окно, будут делать именно так. Стандарты соблюдены, в чем легко убедиться, воспользовавшись валидатором.



Много комментариев (27) к “Открываем ссылку в новом окне, не используя атрибут target в коде страницы”

  1. Александр Шевченко :

    и в чем тогда выигрыш?…
    по моему это всего лишь формальное соблюдение стандартов.


  2. korah :

    Что-то сулит этот способ геморрой, мне кажется.


  3. Eugene Efremov :

    Для чего вообще это правило ввели в стандарт?

    А для того, чтобы кто попало не указывал мне, как и в каких окнах открывать новые ссылки. Если я захочу открыть ссылку в новом окне, я уж как-нибудь сумею нажать на ту кнопку мыши, на какую нужно.

    Сколько раз было: надоел сайт, нажимаю на ведущую с него ссылку — а эта дрянь открывает новое окно! :-E Хорошо хоть оно не пытается это делать, когда я открываю страницу в новой вкладке…

    Иными словами — предложенный способ есть обман по отношению к валидаторам и неуважительное поведение по отношению к пользователям сайта.


  4. Paul Yanchenko :

    Полностью согласен с Eugene Efremov, это способ обмануть валидатор, внутри браузера документ будет невалидный.

    Если тебе нужны target’ы – используй Transitional, если уж выбрал Strict – так соблюдай.

    А вообще, подобные методы делают обоснованным отключение пользователями Javascript вообще. Ибо, если сайт вообще способен работать без JS — его поведение всегда очевидно и предсказуемо, никаких неожиданностей. С JS же то и дело сталкиваешься с какими-то неожиданными сюрпризами.


  5. ScableR :

    Уважаемые, а Вы подумали о том, что нормальные люди делают рядом со ссылками значки вроде уменьшенного окна? Я лично видел такое не один раз на страницах как ру-нета, так и ближнего/дальнего зарубежья =). Дескать хочешь – открывай в том же окне кликая по ссылке, не хочешь кликни на окошко – откроется в новом. А данный пример – как раз лучший способ выкрутиться с соблюдением стандартов.

    Спасибо автору!


  6. Баранов Андрей :

    Не стоит описанное выше воспринимать как руководство к действию. Это лишь пример. При разработке веб-сайта нельзя ограничиваться только копированием готовых фрагментов кода. Можно подключить фантазию, немного изменить JavaScript и показать пользователю, что произойдет, когда он кликнет по ссылке.


  7. re_action :

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


  8. вася :

    При загловке application/xhtml+xml (что является правельным заголовком для XHTML-документов) этот способ не сработает в броузере Firefox.


  9. Tb :

    С высказанным мнением по поводу отмирания target, я не согласен. Просмотрите спецификацию разрабатываемого css3. Там есть и target, и куча его значений, в том числе и открытие в новом окне:
    a {
    target: new;
    }
    А насчет обхода валидатора, так это просто трюк. Я лично склонен использовать только тот вариант XHTML, который действительно на 100% подходит к данному документу. Сайт ведь не перестанет работать, если он будет, в самом деле transitional.


  10. Баранов Андрей :

    На самом деле, вместо добавления атрибута target и его значения (anchors[i].target = “_blank”; см. выше), правильнее по onclick открывать новое окно с помощью window.open(strUrl, strWindowName [, strWindowFeatures]), где strWindowName и есть имя окна. если окно с таким именем еще не открыто, открывается новое окно и ему присваивается это имя. если окно с таким именем существует – strUrl будет открыто именно в этом окне.


  11. Fixer :

    Реально бред какой-то, во первых правильные браузер начинают показывать страницу ДО того как она загрузилась, пользователь нажавший на ссылку ДО того как сработал яваскрипт target`ом получит по самые не балуй, ибо его нет, зато есть валидный rel, никому правда не нужный.

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


  12. Игорь :

    А вот так не пробовали? Я уже давно так пользуюсь, так чисто опытом поделиться, лепут внести в это не лёгкое дело, создание сайтов.
    © 1999-2006, Powered Web-Manager v.2.9 by Dimtex, s.r.o.


  13. Игорь :

    Упс, как говориться
    a href=”http://www.dimtex.cz” onclick=”window.open(this.href); return false;” title=”© 1999-2006, Powered Web-Manager v.2.9 by Dimtex, s.r.o.”>Dimtex, s.r.o.


  14. Vbnzq :

    To Игорь: валидатор на ваш метод все равно ругается…


  15. Vbnzq :

    Ой сорри, у самого руки кривые… выпрямил :)


  16. XPraptor :

    Это кто тут такой умный ява скриптом ссылки открывать в новом окне? А поисковых роботов сразу послать на х…?
    И кто тут такой умный, что сам решает где ему ссылку открывать? А потом пишет в поддержку почему его уводят от цели ссылки со страницы? Есть страница со списком 20 объявлений, представленных только заголовками и ссылки в НОВОМ окне на полный текст если заголовок понравился. В новом окне еще реклама по этой же теме и поехали мы дальше от начальной страницы с объявлениями ,а потом зае..ся бэкать, чтобы попасть на нужную страницу. И кому на х… надо такой сайт? xhtml с отсутствием target перемудрил, не предоставив ничего взамен.


  17. Dark-Demon :

    onclick=”return !window.open(this.href)”


  18. Игорь :

    Dark Demon, спасибо, так будет по короче.
    Раптор, не багуй, а то видать умный, аж жуть. Если надо открыть ссылку в новом окне, так без вариантов, это только в крайнем случае, а вот что бы ссылка была валидная(кстати не ругается валидатор на яву), так извиняй, таргет нету в стрикте


  19. Николай :

    Думаю, все-таки открывать в новом окне – не очень хорошо, тем более через Javascript, который может быть отключен. Как правильно, когда-то кто-то заметил – если не открывать в новом окне – у пользователя есть выбор, если автоматически открывать в новом окне, то у пользователя нет выбора. Ребят, мы для кого сайты делаем? Для себя или для пользователей?

    С ув. Николай Яровой

    Студия ControlStyle, разработка, создание сайтов


  20. dead_star :

    [b]вот чудики то :-D[/b]

    Да, неспорю, надо выбирать места где нужно использовать этот скрипт, а где не. Например возмем рекламнуй баннер или ссылку на портнерский сайт. Такие ссылки просто нет смысла открывать в томже окне, да и не выгодно.

    А про [b]target[/b] для непонятливых, [b]JS[/b] скрипт это оптимизация под браузеры. Если браузер поддерживает [b]rel[/b] и не поддерживает [b]target[/b](и наоборот) то спосет этот скрипт.

    [b]PS[/b] только я бы поменял [b]target[b/] и [b]rel[b/]. [b]target[/b] поддерживаю старые браузеры и ониже могут [b]не[/b]поддерживать эту команду:
    [code]if (!document.getElementsByTagName) return;[/code]


  21. dead_star :

    вот чудики то :-D

    Да, неспорю, надо выбирать места где нужно использовать этот скрипт, а где не. Например возмем рекламнуй баннер или ссылку на портнерский сайт. Такие ссылки просто нет смысла открывать в томже окне, да и не выгодно.

    А про target для непонятливых, JS скрипт это оптимизация под браузеры. Если браузер поддерживает rel и не поддерживает target(и наоборот) то спосет этот скрипт.

    PS только я бы поменял target и rel. target поддерживаю старые браузеры и ониже могут неподдерживать эту команду:
    if (!document.getElementsByTagName) return;


  22. makaron :

    Можно так:

    Внешняя ссылка


  23. makaron :

    Можно вот так:
    onclick=”this.target=’_blank’”


  24. Vovovich :

    Очень интересное решение, но этот ява-скрипт будет засорять код. Лично мне лучше прописать необходимый параметр.


  25. bopoh13 :

    Идея неплохая. Но я искал вариант открытия в отдельной вкладке (IE7/FF), а не в новом окне.
    Ф топку!


  26. Бесплатный хостинг :

    Идея-фикс… Кстати, по спецификации xhtml 1.1 у меня таргет прокатывает ;) Стоит задуматься – а стоит ли овчинка выделки?


  27. Jangot :

    Странное и сгресивное обсуждение, момоему человек поделился опытом и ни кого ни кчему не принуждает, не ужеди ни у кого не было такого что заказчик или начальник приходят и говорят, эту ссылку нужно открыть в новом окне, а у вас уже сверстано 15страниц по стандарту. Что делать будете. Переверстывать иза несчасной ссылки???

    Бесплатный хостинг, а у меня нет. Странно.



22 queries 0.275 seconds.