Приветствую вас!
Сегодня мы разберем несколько вариантов, как открыть ссылку в новой вкладке html.
Чаще всего, этот прием используют для удержания посетителей на своем сайте, если на сайте присутствуют ссылки, ведущие на сторонние ресурсы. Открытие ссылки в новой вкладке html позволяет задержать посетителя на своем сайте. Так как, при нажатии на ссылку, происходит открытие в отдельной вкладке, и, формально, посетитель остается на вашем сайте.
Способов, как открыть ссылку в новой вкладке html, несколько, но мы остановимся на двух, самых удобных и практичных.
Навигация по статье:
Атрибут target=_ blank
Этот способ является наиболее распространенным, и известен практически каждому веб-разработчику, и заключается он в добавлении в тег < а> специального атрибута target с присвоенным значение _blank.
Выглядеть это будет следующим образом:
|
1 |
<a href="//impuls-web.ru" target="_blank">Интересная статья</a> |
Работает это так:
При своей простоте этот вариант имеет свои недостатки:
- 1.При проверке кода валидатором, возможно возникновение ошибок.
- 2.Пользуясь данным методом, вы лишаете пользователя свободы действия, что может вызвать недовольство. Опытные веб-разработчики придерживаются мнения, что пользователю необходимо оставлять свободу выбора в этом вопросе. Использование данного способа считается плохим тоном.
Тег base
Позволяет не указывать для каждой ссылки атрибут target. То есть открытие всех ссылок автоматически происходи в отдельной вкладке. Для использования данного способа нужно в начале страницы, перед < /head>, добавить следующую строку:
|
1 |
<base target="_blank"> |
Код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <base target="_blank"> </head> <body> <p><a href="//impuls-web.ru">текст</a></p> <p><a href="//impuls-web.ru">текст</a></p> <p><a href="//impuls-web.ru">текст</a></p> </body> </html> |
Открытие ссылки с помощью JavaScript
Как сделать, что бы открывалась ссылка в новой вкладке html, но при этом не использовать атрибут target?
Можно использовать функцию JavaScript window.open() с проверкой наличия блокировки всплывающих окон в браузере. В случае, если блокировка не включена, то ссылки будут открываться так, как нам нужно. Если же пользователь включил блокировку, то ссылки будут открываться в текущей вкладке.
Для реализации данного способа, ссылки должны меть следующий вид:
|
1 |
<a href="//impuls-web.ru" onclick="return !window.open(this.href)">текст</a> |
Пример работы:
Как видите, данный способ открытия ссылки в новой вкладке, по трудоемкости, не многим отличается от первого, но имеет ощутимое преимущество, так как дает некоторую свободу выбора посетителю и не влияет на валидность кода страницы.
Надеюсь, данная информация будет полезна для вас. До встречи в следующих статьях.
С уважением Юлия Гусарь
