Итак, спецификаця 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", чтобы затем сделать их открываемыми в новом окне.

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

1. if (!document.getElementsByTagName) return;

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

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

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

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

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

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

1. function externalLinks() {
2.         if (!document.getElementsByTagName) return;
3.         var anchors = document.getElementsByTagName("a");
4. for (var i=0; i < anchors.length; i++) {
5.         if (anchors[i].getAttribute("href") &&
6.  
7.         anchors[i].getAttribute("rel") == "external") {
8.                 anchors[i].target = "_blank";
9.         }
10. }
11. }
12. window.onload = externalLinks;

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

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

Статьи по теме:

• Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS