Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Открываем ссылки в новой вкладке браузера. Чем плох target="_blank"?

Дата:3.12.15 в 18:32
Раздел: 

В статье указываются основные принципы использования атрибута target="_blank", а также предлагается альтернатива использования этого атрибута, при которой код останется валидным.

Валидность при использовании target

Довольно часто встречается такая практика, когда при клике на ссылку переход на целевую страницу осуществляется в новой вкладке браузера. Таким приемом очень часто пользуются при указании разработчика веб-ресурса или ответа на запрос в поисковой системе. Этот прием осуществляется благодаря использованию атрибута target тега a. Ниже представлен пример кода:

HTML

<a href="#" target="_blank">Ссылка, открывающаяся в новой вкладке</a>

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

Некоторые поясняют использование атрибута target тем, что при его использовании, даже если пользователь нашел то, что искал на другом ресурсе (на который отправляла ссылка), после закрытия новооткрытой вкладки он опять вернется на предыдущий сайт. Это, якобы, повышает вероятность конвертации случайного посетителя в постоянного пользователя. Это утверждение ошибочно! Завоевать постоянное внимание пользователя можно только интересным и качественным контентом. Зря информация считается одним из наиболее ценных ресурсов.

Кроме всего прочего, согласно спецификации XHTML 1.0 Strict, использование атрибута target является недопустимым. В противном случае код не будет считаться валидным. А сам валидатор выдаст вот такое сообщение

Валидатор

Открытие ссылки в новой вкладке через JavaScript

Как было упомянуто ранее, использование атрибута target для перехода по ссылке в новом окне браузера не соответствует спецификациям и не считается валидным решением задачи. Однако это не единственный способ решения поставленной задачи. Аналогичный эффект можно получить при использовании js-кода.

Принцип организации такого процесса основывается на событии onclick. В значении этого события будет написана функция для открытия новой вкладки браузера - window.open(), а также блокиратор, который отменит переход на нужный адрес в текущем окне - return false. В коде все эти действия будут выглядеть следующим образом:

<a href="#" onclick="window.open(this.href);
 return false">Ссылка, открывающаяся в новой вкладке </a>

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

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

На первый взгляд мы добились рационального решения поставленной задачи, однако при детальной проверке работы метода выяснилось, что если в браузере установлена блокировка всплывающих окон, то метод перестанет работать. Вместо перехода по ссылке появится сообщение о блокировке всплывающего окна.

Модификация js-кода для удачного перехода при любых условиях

Вышеупомянутая функция предназначена для избавления пользователя от излишков рекламы в сети Интернет. Все современные браузеры в своем арсенале имеют такую способность, кроме того некоторые из них могут осуществлять блокировку на разных уровнях. К примеру, все версии Opera, начиная с 9-ой, имеют возможность блокировать только отмеченные окна или все подряд.

Хоть пользователей, устанавливающих блокировку всплывающих окон в своем браузере, наверняка, очень мало, но они все же есть. А мы должны учитывать все возможные варианты для нормального функционирования сайта. Напоминаю, при наличии блока ссылка на нашем js-коде перестанет работать.

Тогда какой же выбор делать: либо не валидный код, либо не всегда рабочие ссылки? И тот, и тот вариант нам не подходит. Альтернативное решение пришло при тестировании ссылки с атрибутом target и включенной блокировкой всплывающих окон. В заданных условиях ссылка открылась, но только в своем окне. Значит нам нужно модифицировать наш js-код таким образом, чтобы при блокировке ссылка работала в текущем окне. Реализуется это следующим образом:

<a href="#" onclick="return !window.open(this.href)">
 Ссылка, открывающаяся в новой вкладке </a>

Принцип работы метода практически не изменился, поменялась форма трактовки действий. В новом коде функция window.open() отрабатывает значение true, если блокировка не установлена, если же она присутствует, то функция отрабатывает значение false. Говоря на русском языке, при установке соответствующих настроек в браузере ссылка будет открываться в текущей сессии, в противном случае – в новой вкладке.

Проверка модифицированного решения для ссылки на главную блога.

Выводы

Исходя из представленной выше информации можно сделать вывод, что наиболее рациональный способ для принудительного открытия ссылок в новых вкладках является использование последнего метода, основывающегося на коде JavaScript.

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

Оценок: 3 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)