HTML: Открытие ссылки в новой вкладке
Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне.
Другая страница. Если вы установите для атрибута target значение _blank, то ссылка откроется в новом окне.
В таблице приведены все доступные значения для атрибута target.
| Значение | Описание |
|---|---|
| _blank | Открывает документ в новом окне. |
| _self | Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию). |
| _parent | Открывает документ в родительском окне. |
| _top | Открывает документ на весь экран. |
| имя_фрейма | Открывает документ в указанном фрейме. |
Примечание: если ваш браузер поддерживает вкладки, то ссылки с target=»_blank» будут открываться не в новом окне, а в новом вкладке. В этом случае, если вам требуется, чтобы ссылка открывала именно новое окно, надо воспользоваться языком программирования (например, JavaScript).
С этой темой смотрят:
- Как сделать ссылку в html
- Абсолютные и относительные ссылки html
- Как сделать картинку ссылкой
- Ссылка на раздел страницы в html
- HTML тег
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Узнайте как открыть ссылку в новом окне или на новой вкладке
Один из посетителей сайта спросил, как открыть ссылку в новом окне HTML . В этой статье я отвечу на данный вопрос.
Обновлено: 2022-04-20 17:26:27 МК Михаил Кузнецов автор материала
Что вам потребуется
Посетитель не уточнил, каким редактором пользуется, поэтому будем считать, что он работает напрямую в HTML . Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать HTML-код .
Например, если вы работаете в Expression Web , можно отредактировать код страницы, переключившись в « Режим кода » ( Code mode ).
Как открыть ссылку в новой вкладке или в новом окне браузера (автоматически)
Короткий ответ: просто добавьте к своим ссылкам (тегу ) атрибут target=»_blank» .
Допустим, что у вас есть следующая ссылка:
Измените её, чтобы она выглядела следующим образом:
Теперь, когда пользователи кликнут по этой ссылке, она откроется в новом окне или на новой вкладке ( в зависимости от того, каким браузером они пользуются, и как он настроен ).
Обратите внимание, что если вы используете DOCTYPE со строгим синтаксисом XHTML 1.0 или 1.1 , то не получится одновременно использовать приведённый выше код и пройти валидацию страницы. Но подозреваю, что этими стандартами никто не пользуется. « Переходные » версии этих стандартов для открытия в новом окне HTML нам вполне подойдут, и в них также поддерживается атрибут target .
Если вы работаете в Expression Web, Dreamweaver, BlueGriffon или KompoZer, кликните по ссылке, которую хотите изменить, перейдите в режим изменения HTML-кода и добавьте атрибут target=»_blank».
У этого метода не так много плюсов
Многие начинающие вебмастера думают, что, открывая ссылки в новом окне, пользователи с меньшей вероятностью покинут сайт. Это в корне неверно. Если кто-то кликнет по ссылке, а потом захочет вернуться на ваш сайт, они просто нажмут кнопку « Назад ». Об этой функции даже не самые технически подкованные люди узнают сразу после знакомства с интернетом. Продвинутые пользователи к тому же знают, что можно использовать опцию « Открыть ссылку в новой вкладке » (или « Открыть ссылку в новом окне »).
Создавая ссылки, которые открываются в новом окне, вы мешаете пользователям вернуться на сайт. Может показаться, что они без труда вернутся в первое окно с вашим сайтом. Мой опыт показывает, что это не так — людей сбивает с толку неработающая кнопка « Назад ». Они даже не подозревают, что перед ними новая вкладка или новое окно. Когда у них не получается быстро вернуться на предыдущую страницу, они просто сдаются и переходят на другие ресурсы.
С опытными пользователями дела обстоят не лучше. Их очень раздражает « привычка » вашего сайта открывать новые окна без разрешения. На то они и опытные пользователи — если бы они хотели открыть новую вкладку, они бы сделали это сами, и им нисколько не нравится, что это делают без их согласия. Ещё хуже, если все ваши ссылки открываются в новом окне.
Сайт становится уязвим для фишинговых атак
Если вы применяете кнопку HTML открыть в новом окне, используя target=»_blank» , сайт, на который ведёт ссылка, получает доступ к окну/вкладке с вашей страницей и может подменить её содержимое.
Это не только не удержит пользователей на сайте ( если вы открывали новые вкладки именно с этой целью ), но и подвергнет угрозе посетителей. Например, если у вас есть страница входа пользователя, находящийся по ссылке сайт может заменить её на копию вашей, но при этом собирающую логины и пароли пользователей. Такой вид атак называется « фишинг ».
И это не теоретическая уязвимость. Специалисты отдела безопасности Google отметили «значительное количество сообщений» о подобном перехвате вкладок с целью внедрения вредоносного программного обеспечения.
Для тех, кому интересно — технические подробности. Открытый в новом окне сайт получает доступ к вашей странице через объект window.opener в JavaScript. Этот объект с функциями чтения/записи, которым можно управлять. В том числе, можно изменить свойство window.opener.location и заставить браузер перейти по новому адресу, чтобы открыть картинку в новом окне HTML.
Некоторые браузеры позволяют предотвратить подобное поведение добавлением к ссылке атрибута rel=»noopener noreferrer» . Пример, приведённый в начале статьи, будет выглядеть следующим образом:
Теоретически, как rel=»noopener» , так и rel=»noreferrer» должно быть достаточно, чтобы защититься от подобной атаки при открытии страницы в новом окне HTML . При этом корректнее использовать атрибут rel=»noopener» , так как у rel=»noreferrer» есть побочный эффект — браузер не будет передавать сайту URL источника запроса. Но на данный момент не все браузеры поддерживают атрибут rel=»noopener» . Аналогично, rel=»noreferrer» не поддерживается некоторыми браузерами. Поэтому, если захотите защитить пользователей как можно большего числа браузеров, вероятно, придётся использовать оба атрибута.
Тем не менее, этот приём работает только на актуальных версиях Chrome , Firefox и Safari . Internet Explorer данную функцию не поддерживает, хотя я успел быстро проверить 11 версию IE , и она, вроде бы, защищена от подобной атаки при настройках безопасности, применяемых по умолчанию. Насчёт браузера Microsoft Edge точно сказать не могу.
Другими словами, описанный выше метод нельзя назвать стопроцентной защитой. Лучший способ избежать этой проблемы — использовать нормальные ссылки без атрибута target=»_blank» .
Заключение
Общая рекомендация — по возможности избегать открытия вкладок в новом окне HTML . Конечно, в некоторых случаях этого не избежать. В этой ситуации можно предупредить посетителей сайта о том, что « ссылка открывается в новом окне ». Это не сильно поможет среднестатистическому пользователю и не защитит его от фишинговых атак через ваш сайт, но хотя бы не будет раздражать более опытных пользователей.
МК Михаил Кузнецов автор-переводчик статьи « How to Make Links Open in a New Window or Tab »
Ссылка в новой вкладке
Урок рассказывает, как сделать ссылку, которая открывается в новой вкладке.
HTML
Открытие ссылки в новом окне бывает полезным, если необходимо перенаправить посетителя на другой сайт. Для того чтобы открыть ссылку в новой вкладке используется атрибут target=»_blank» тега .
Ссылка откроется в текущей вкладке
Откроется в новой вкладке
Также можно использовать тег для того чтобы задать действие по умолчанию. Пример:
Ссылка откроется в новой вкладке Ссылка откроется в текущей вкладке
На этом всё, не пропустите новые уроки ��
Когда нужно открывать ссылку в новой вкладке
Должны ли ссылки на сайте открываться в новой вкладке или в той же вкладке, где находится пользователь? В целом, всё просто. Все внутренние ссылки должны открываться в том же окне, а внешние ― в новом. Почему? Ссылка на страницу внутри сайта является навигационной, она ведет пользователя по сайту и не должна запутывать его кучей вкладок. Если же ссылка ведет на внешний источник, то важно не потерять пользователя после того, как он перейдет по ссылке. Например, в своей статье вы ссылаетесь на материалы другого автора. В этом случае важно настроить открытие ссылки в новой вкладке, чтобы пользователь не потерял исходную страницу и смог вернуться на ваш сайт.
Что касается внутренних ссылок, то их традиционно принято открывать в том же окне браузера, где и находился пользователь. Но бывают исключения. Про них и поговорим
В каких случаях новая вкладка оправдана?
- Ссылка ведёт на подсайт или страницу с другим дизайном/структурой. Подсайт — это страница, раздел сайта или мини-сайт, расположенный на поддомене. Например, основной сайт находится на домене magazin.ru, а подсайт ― на поддомене mebel.magazin.ru. На подсайтах могут располагаться, например, промо-страницы для продвижения рекламных акций. Или интернет-магазины разных направлений розничных продаж, принадлежащие одному бренду. Подсайты, как правило, имеют отдельную структуру, навигацию, а зачастую и отдельный дизайн. Если ссылка на подсайт откроется в том же окне, то к основному сайту пользователь уже не вернется. Для сохранения ориентира для навигации открытие таких ссылок лучше делать в новой вкладке.
- По ссылке пользователь получит не html-страницу сайта, а другой формат контента. Например, изображение или PDF-файл для чтения.
- Для удобства пользователю могут понадобиться несколько вкладок. Заранее продумайте, как могут повести себя пользователи на вашем сайте, и какие действия они могут совершить. Например, у вас сайт туристической компании и нет функции сравнения туров. Как правило, клиент выбирает из нескольких вариантов и тщательно изучает отличия путевок. В этом случае целесообразно будет открывать страницы туров в новых вкладках, чтобы клиент мог быстро переключаться между ними и самостоятельно сравнивать условия.
- Контент сайта логически предполагает открытие ссылок в новых вкладках. Например, компания оказывает услуги облачного хранения документов. Каждый файл при клике открывается в новой вкладке, и клиенту будет удобно работать со своей документацией.
Итого
Все внешние ссылки всегда должны открываться в новой вкладке. Что касается открытия внутренних ссылок ― нужно учитывать контекст текущей страницы и целевой страницы, формат контента, сценарии пользовательского поведения, удобство пользователей. Для изучения последнего хорошо помогает юзабилити-тестирование .