Как открыть ссылку в новой вкладке HTML

ссылку открыть в новом окне

Приветствую вас!

Сегодня мы разберем несколько вариантов, как открыть ссылку в новой вкладке html.

Чаще всего, этот прием используют для удержания посетителей на своем сайте, если на сайте присутствуют ссылки, ведущие на сторонние ресурсы. Открытие ссылки в новой вкладке html позволяет задержать посетителя на своем сайте. Так как, при нажатии на ссылку, происходит открытие в отдельной вкладке, и, формально, посетитель остается на вашем сайте.

Способов, как открыть ссылку в новой вкладке html, несколько, но мы остановимся на двух, самых удобных и практичных.

Атрибут target=_ blank

Этот способ является наиболее распространенным, и известен практически каждому веб-разработчику, и заключается он в добавлении в тег < а> специального атрибута target с присвоенным значение _blank.

Выглядеть это будет следующим образом:

Работает это так:

Интересная статья

При своей простоте этот вариант имеет свои недостатки:

  1. 1.При проверке кода валидатором, возможно возникновение ошибок.
  2. 2.Пользуясь данным методом, вы лишаете пользователя свободы действия, что может вызвать недовольство. Опытные веб-разработчики придерживаются мнения, что пользователю необходимо оставлять свободу выбора в этом вопросе. Использование данного способа считается плохим тоном.

Тег base

Позволяет не указывать для каждой ссылки атрибут target. То есть открытие всех ссылок автоматически происходи в отдельной вкладке. Для использования данного способа нужно в начале страницы, перед < /head>, добавить следующую строку:

Код:

Открытие ссылки с помощью JavaScript

Как сделать, что бы открывалась ссылка в новой вкладке html, но при этом не использовать атрибут target?

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

Для реализации данного способа, ссылки должны меть следующий вид:

Пример работы:

Много полезной информации

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

Надеюсь, данная информация будет полезна для вас. До встречи в следующих статьях.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif