Новое окно

Как открыть ссылку в новой вкладке — объяснение HTML атрибута target

Будут времена, когда вы захотите, чтобы ваш пользователь щелкнул ссылку на веб-сайт и открыл ее в новой вкладке браузера. Но как это сделать в HTML?

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

Как открыть новую вкладку браузера с помощью target=»_blank»

Атрибут target=»_blank» используется внутри открывающего тега привязки следующим образом:

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

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

Когда вы нажмете на ссылку FrontendColors, она откроет для вас новую вкладку браузера.

Если бы я опустил этот target=»_blank» атрибут, то поведение по умолчанию состояло бы в том, чтобы покинуть текущую веб-страницу и перейти непосредственно к ссылке, не открывая новую вкладку браузера.

Что такое noopener ключевое слово?

Ключевое noopenerслово в rel атрибуте используется в первую очередь из соображений безопасности, чтобы злоумышленники не могли вмешиваться в исходную веб-страницу через Window.opener свойство. Если злоумышленник получит доступ к вашему оконному объекту, он может перенаправить вашу страницу на вредоносный URL-адрес.

Вы можете использовать noopener ключевое слово, чтобы предотвратить возникновение этой проблемы безопасности. Вот как используется это noopener ключевое слово:

Обновления noopener ключевого слова

В 2021 году было сделано обновление, в котором современные браузеры теперь устанавливают rel=noopenerлюбую ссылку с использованием target=_blank атрибута. Даже с этим обновлением многие разработчики по-прежнему будут использовать атрибут rel=noopener для ссылок target=_blank

Следует ли вам использовать target=»_blank» атрибут все время?

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

Вы должны тщательно подумать о том, когда будет подходящее время для использования этого target=»_blank» атрибута. Хорошим примером может быть случай, когда пользователь работает на странице и не хочет покидать эту страницу, если нажмет на ссылку.

Источник

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

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

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.

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

Источник

Атрибут target

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

_blank — загружает страницу в новое окно браузера;

_self — загружает страницу в текущее окно;

_parent — загружает страницу во фрейм-родитель;

_top — отменяет все фреймы и загружает страницу в полном окне браузера.

В примере 1 показано создание ссылки на сайт, который открывается в новом окне.

Пример 1. Открытие документа в новом окне

      
Ссылка открывает новое окно на сайт htmlbook.ru
  

Для создания валидного кода атрибут target может использоваться только при переходном , как показано во всех примерах этой статьи.

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма (пример 2).

Пример 2. Открытие документа во фрейме

      
Сайт htmlbook.ru
  

Ссылка в примере 2 ведет на сайт htmlbook.ru, открывающийся во фрейме с именем newframe .

Когда у target указано неизвестное значение, например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается в новом окне.

Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, нет необходимости добавлять во все теги target=»_blank» . Код можно сократить, если вначале страницы добавить строку , как показано в примере 3.

Пример 3. Использование тега

     
Ссылка откроется в новом окне
 
Ссылка откроется в текущем окне
  

Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.

Источник

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

Количество покупок и заказов на сайте зависит от того, насколько удобно пользователям им пользоваться. Сделать многостраничный сайт достаточно удобным для пользователей сложнее, чем лендинг или сайт-мультиссылку. Некоторые считают, что открытие новой страницы, ссылки сайта в новой вкладке будет удобным пользователям. Разберемся, так ли это. И как настроить открытие новой страницы при помощи html кода.

Как открыть ссылку в новой вкладке, используя HTML

Почему использовать HTML для открытия новых вкладок небезопасно

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

— Опытные юзеры сами контролируют работу с веб-ресурсами, раздражаются от подобных действий. Если все же решили использовать HTML команду открытия нового окна, добавьте уведомление о перенаправлении.

— Когда используется код HTML и команда target=»_blank», доступ к вашему ресурсу получает страница, на которую ведет ссылка. Имея доступ, можно изменять контент. Это прямая угроза кражи данных посетителей, называемая фишингом. Когда посетитель открыл в новой вкладке страницу входа/регистрации, оплаты, вредоносный код подменяет вашу страницу своей. Пользователь введет данные, пароли, CVC-коды карты на странице мошенников.

Альтернатива стандартным сайтам

Многим представителя малого бизнеса, блогерам, небольшим интернет-магазинам не нужен большой многостраничный сайт. Быстрым и простым решением может стать минисайт — мультиссылка.

Это страница похожа на лендинг, где собрана информация о продукте, услуге, человеке. Такой вид сайтов — не новый, широко распространен среди блогеров и малого бизеса в социальных сетях, особенно Instagram.

Создавая сайт в сервисе Hipolink, не придется задумываться о кодах HTML, атрибутах, правильности их ввода. Весь функционал запрограммирован заранее и готов к использованию. Сервис работает как конструктор. Вам нужно только выбрать подходящие блоки.

После регистрации создавайте новый дизайн лендинга, длобавляйте блоки текста, фотографий, видео, ссылок, кнопки мессенджеров и приема оплат. Подключайте дополнительные опции — сбор и аналитика метрики, автоответчик JivoSite.

Помимо стандартных блоков доступна опция встраивания HTML кода. Блок HTML предусмотрен для расширения функционала, подключения метрики и Pixel Facebook, Pixel VK.

Уже более 140.000 пользователей создали лендинги при помощи сервиса Хиполинк, не тратя время и деньги на веб-разработчиков и дизайнеров.

Источник