| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > Очень смешная статья |
| Автор: VingradFan 18.10.2009, 13:45 | ||
Надеюсь поднимет Вам настроение Лично я смеялся очень долго... Оригинал статьи: Открываем ссылку в новом окне, не используя атрибут 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 |
| Поржал, спасибо |