Открываем ссылку в новом окне, не используя атрибут target в коде страницы
Рекомендации W3C для HTML 4.01 Strict и XHTML 1.0 Strict более не включают атрибут target для тега . Переходные (Transitional) версии спецификаций допускают его применение, но стандарты для того и разработаны, чтобы ими пользоваться. Поэтому далее рассмотрим, как все-таки открывать ссылки в новом окне, не используя при этом устаревший атрибут target в (X)HTML-коде документа.
?так, спецификаця HTML 4.01 убирает атрибут target, но при этом добавляет другой атрибут: rel. Этот атрибут создан для того, чтобы установить взаимоотношения между документом, содержащим ссылку и целью этой ссылки. В спецификации определены несколько стандартных значений этого атрибута (next, previous, chapter, section), большая часть которых обозначает отношения между отдельными секциями большого документа. Однако, спецификация допускает и нестандартные, определяемые автором документа значения атрибута rel. Поэтому со спокойной совестью для всех ссылок, которые будут открываться в новом окне, определим значение атрибуту rel к примеру: external.
В результате, старые ссылки типа target="_blank">в новое окно теперь будут выглядеть как rel="external">в новое окно. Таким образом отмечаем ссылки, которые будут открываться в новом окне, при этом код страницы остается в рамках стандартов. Для того, чтобы ссылки действительно открывались в новом окне, надо добавить JavaScript, который возьмет эту задачу на себя.
Скрипт запускается один раз при загрузке страницы и находит все ссылки, которым мы ранее установили атрибут rel="external", чтобы затем сделать их открываемыми в новом окне.
Сперва определим, сможет браузер сделать задуманное нами:
if (!document.getElementsByTagName) return;
getElementsByTagName — метод стандартный для Объектной Модели Документа (DOM1), поддерживаемый современными браузерами, тем не менее проверка никогда не лишена смысла. Убедившись, что браузер понимает этот метод, используем его для поиска и построения списка всех элементов в документе:
var anchors = document.getElementsByTagName("a");
Теперь anchors содержит массив, каждый элемент которого представлен тегом в документе. Затем нужно перебрать все теги , чтобы найти ссылки, которые планировали открывать в новом окне и немного их модифицировать. Для этого воспользуемся циклом for:
for (var i=0; i
В этом цикле последовательно перебираем все элементы массива anchors, проверяем каждый элемент: является ли он ссылкой (наличие атрибута href) и если у него есть установленный нами атрибут rel="external", то добавляем тегу атрибут target, которому присваиваем значение _blank.
Осталось объявить функцию (например, назовем ее externalLinks) и запустить ее после загрузки страницы, используя событие окна onload. Полный код скрипта получится таким:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i
Чтобы использовать скрипт на всем сайте, сохраним его в отдельном файле script.js, например. ? в блоке на каждой странице вызовем его:
Вот и все! Теперь ссылки, которые должны открывать новое окно, будут делать именно так. Стандарты соблюдены, в чем легко убедиться, воспользовавшись валидатором.
и в чем тогда выигрыш?…
по моему это всего лишь формальное соблюдение стандартов.
2005-11-03 at 6:34 pm
Что-то сулит этот способ геморрой, мне кажется.
2005-11-11 at 12:51 pm
Для чего вообще это правило ввели в стандарт?
А для того, чтобы кто попало не указывал мне, как и в каких окнах открывать новые ссылки. Если я захочу открыть ссылку в новом окне, я уж как-нибудь сумею нажать на ту кнопку мыши, на какую нужно.
Сколько раз было: надоел сайт, нажимаю на ведущую с него ссылку — а эта дрянь открывает новое окно! :-E Хорошо хоть оно не пытается это делать, когда я открываю страницу в новой вкладке…
?ными словами — предложенный способ есть обман по отношению к валидаторам и неуважительное поведение по отношению к пользователям сайта.
2005-11-20 at 12:51 am
Полностью согласен с Eugene Efremov, это способ обмануть валидатор, внутри браузера документ будет невалидный.
Если тебе нужны target’ы – используй Transitional, если уж выбрал Strict – так соблюдай.
А вообще, подобные методы делают обоснованным отключение пользователями Javascript вообще. ?бо, если сайт вообще способен работать без JS — его поведение всегда очевидно и предсказуемо, никаких неожиданностей. С JS же то и дело сталкиваешься с какими-то неожиданными сюрпризами.
2005-11-21 at 5:51 am
Уважаемые, а Вы подумали о том, что нормальные люди делают рядом со ссылками значки вроде уменьшенного окна? Я лично видел такое не один раз на страницах как ру-нета, так и ближнего/дальнего зарубежья =). Дескать хочешь – открывай в том же окне кликая по ссылке, не хочешь кликни на окошко – откроется в новом. А данный пример – как раз лучший способ выкрутиться с соблюдением стандартов.
Спасибо автору!
2005-12-05 at 2:17 am
Не стоит описанное выше воспринимать как руководство к действию. Это лишь пример. При разработке веб-сайта нельзя ограничиваться только копированием готовых фрагментов кода. Можно подключить фантазию, немного изменить JavaScript и показать пользователю, что произойдет, когда он кликнет по ссылке.
2005-12-07 at 11:49 am
Предложенный вариант никак не поможет, когда браузеры перестанут поддерживать target
2005-12-29 at 5:15 pm
При загловке application/xhtml+xml (что является правельным заголовком для XHTML-документов) этот способ не сработает в броузере Firefox.
2005-12-31 at 1:17 pm
С высказанным мнением по поводу отмирания target, я не согласен. Просмотрите спецификацию разрабатываемого css3. Там есть и target, и куча его значений, в том числе и открытие в новом окне:
a {
target: new;
}
А насчет обхода валидатора, так это просто трюк. Я лично склонен использовать только тот вариант XHTML, который действительно на 100% подходит к данному документу. Сайт ведь не перестанет работать, если он будет, в самом деле transitional.
2006-02-01 at 8:49 am
На самом деле, вместо добавления атрибута target и его значения (anchors[i].target = “_blank”; см. выше), правильнее по onclick открывать новое окно с помощью window.open(strUrl, strWindowName [, strWindowFeatures]), где strWindowName и есть имя окна. если окно с таким именем еще не открыто, открывается новое окно и ему присваивается это имя. если окно с таким именем существует – strUrl будет открыто именно в этом окне.
2006-02-03 at 1:43 am
Реально бред какой-то, во первых правильные браузер начинают показывать страницу ДО того как она загрузилась, пользователь нажавший на ссылку ДО того как сработал яваскрипт target`ом получит по самые не балуй, ибо его нет, зато есть валидный rel, никому правда не нужный.
Пост явно откудато содран, по крайней мере я уже давно встречал нечто подобное, да и тема глупа, не один адекватный человек пользовать это не станет.
2006-03-12 at 12:35 am
А вот так не пробовали? Я уже давно так пользуюсь, так чисто опытом поделиться, лепут внести в это не лёгкое дело, создание сайтов.
© 1999-2006, Powered Web-Manager v.2.9 by Dimtex, s.r.o.
2006-06-22 at 12:40 am
Упс, как говориться
a href=”http://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.
2006-06-22 at 12:41 am
To ?горь: валидатор на ваш метод все равно ругается…
2007-01-09 at 7:34 pm
Ой сорри, у самого руки кривые… выпрямил :)
2007-01-09 at 8:03 pm
Это кто тут такой умный ява скриптом ссылки открывать в новом окне? А поисковых роботов сразу послать на х…?
? кто тут такой умный, что сам решает где ему ссылку открывать? А потом пишет в поддержку почему его уводят от цели ссылки со страницы? Есть страница со списком 20 объявлений, представленных только заголовками и ссылки в НОВОМ окне на полный текст если заголовок понравился. В новом окне еще реклама по этой же теме и поехали мы дальше от начальной страницы с объявлениями ,а потом зае..ся бэкать, чтобы попасть на нужную страницу. ? кому на х… надо такой сайт? xhtml с отсутствием target перемудрил, не предоставив ничего взамен.
2007-03-28 at 12:51 pm
onclick=”return !window.open(this.href)”
2007-03-28 at 7:32 pm
Dark Demon, спасибо, так будет по короче.
Раптор, не багуй, а то видать умный, аж жуть. Если надо открыть ссылку в новом окне, так без вариантов, это только в крайнем случае, а вот что бы ссылка была валидная(кстати не ругается валидатор на яву), так извиняй, таргет нету в стрикте
2007-04-17 at 1:10 pm
Думаю, все-таки открывать в новом окне – не очень хорошо, тем более через Javascript, который может быть отключен. Как правильно, когда-то кто-то заметил – если не открывать в новом окне – у пользователя есть выбор, если автоматически открывать в новом окне, то у пользователя нет выбора. Ребят, мы для кого сайты делаем? Для себя или для пользователей?
С ув. Николай Яровой
Студия ControlStyle, разработка, создание сайтов
2007-07-07 at 11:07 am
[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]
2007-08-03 at 10:48 am
вот чудики то :-D
Да, неспорю, надо выбирать места где нужно использовать этот скрипт, а где не. Например возмем рекламнуй баннер или ссылку на портнерский сайт. Такие ссылки просто нет смысла открывать в томже окне, да и не выгодно.
А про target для непонятливых, JS скрипт это оптимизация под браузеры. Если браузер поддерживает rel и не поддерживает target(и наоборот) то спосет этот скрипт.
PS только я бы поменял target и rel. target поддерживаю старые браузеры и ониже могут неподдерживать эту команду:
if (!document.getElementsByTagName) return;2007-08-03 at 10:50 am
Можно так:
Внешняя ссылка
2007-09-12 at 2:45 pm
Можно вот так:
onclick=”this.target=’_blank’”
2007-09-12 at 2:50 pm
Очень интересное решение, но этот ява-скрипт будет засорять код. Лично мне лучше прописать необходимый параметр.
2007-12-25 at 6:34 pm
?дея неплохая. Но я искал вариант открытия в отдельной вкладке (IE7/FF), а не в новом окне.
Ф топку!
2008-04-05 at 9:13 am
?дея-фикс… Кстати, по спецификации xhtml 1.1 у меня таргет прокатывает ;) Стоит задуматься – а стоит ли овчинка выделки?
2008-04-23 at 9:28 pm
Странное и сгресивное обсуждение, момоему человек поделился опытом и ни кого ни кчему не принуждает, не ужеди ни у кого не было такого что заказчик или начальник приходят и говорят, эту ссылку нужно открыть в новом окне, а у вас уже сверстано 15страниц по стандарту. Что делать будете. Переверстывать иза несчасной ссылки???
Бесплатный хостинг, а у меня нет. Странно.
2008-07-01 at 1:55 pm