Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Очень смешная статья


Автор: VingradFan 18.10.2009, 13:45
Цитата

http://xhtml.ru/2005/05/11/target_blank/


Надеюсь поднимет Вам настроение smile
Лично я смеялся очень долго...

Оригинал статьи:
Открываем ссылку в новом окне, не используя атрибут 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>


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

Автор: NightmareZ 18.10.2009, 14:37
Поржал, спасибо  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)