Как открыть ссылку в новой вкладке
Перейти к содержимому

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

  • автор:

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

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

Через HTML мы можем указать, как открывать ссылки — в текущем окне или в новом окне. Для этого к элементу следует добавить атрибут target со значением _blank (да, с подчёркиванием впереди), как показано в примере 1.

Пример 1. Открытие ссылки

Результат данного примера показан на рис. 1. Обратите внимание, что ссылки по своему виду ничем друг от друга не отличаются и понять, как и где она откроется, нельзя.

Вид ссылок

Рис. 1. Вид ссылок

Атрибут target со значением _blank позволяет открыть ссылку в новом окне или вкладке. Поведение зависит от настроек браузера, к примеру, в настройках Firefox по умолчанию стоит открывать ссылки во вкладках (рис. 2).

Настройки вкладок в Firefox

Рис. 2. Настройки вкладок в Firefox

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

См. также

  • text-decoration-skip-ink
  • Атрибуты ссылок
  • Использование :hover
  • Наследование в CSS
  • Создание ссылок
  • Ссылки
  • Ссылки
  • Ссылки в HTML
  • Якоря

Ссылка в новой вкладке

Урок рассказывает, как сделать ссылку, которая открывается в новой вкладке.

HTML

Открытие ссылки в новом окне бывает полезным, если необходимо перенаправить посетителя на другой сайт. Для того чтобы открыть ссылку в новой вкладке используется атрибут target=»_blank» тега .

Ссылка откроется в текущей вкладке 
Откроется в новой вкладке

Также можно использовать тег для того чтобы задать действие по умолчанию. Пример:

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

На этом всё, не пропустите новые уроки ��

Открывать ссылку в новой вкладке по её наведению на панель вкладок или иконку новой вкладки

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

jugami @jugami
отредактировано

@jugami Это, на самом деле, касается не только вкладок, а любого текста, выделенного на веб-странице и перенесенного в панель вкладок или на иконку новой вкладки

sedative29rus
отредактировано

03a676de-d7fa-4232-a51b-421dc6ff52d6-image.png

Вообще, ссылки открываются перетаскиванием на панель, если отключена галочка

sedative29rus
отредактировано

Почему-то у меня ощущение, что отсутствие какой-либо реакции на перетаскивание текста — это вообще баг.

RX21 @sedative29rus
отредактировано
@sedative29rus, Нет, это не баг, реакция есть.
RX21 @jugami
отредактировано

@jugami, В Vivaldi это тоже есть: надо нажать на ссылку или выделенный текст, и не отпуская, начинать тащить вертикально, вверх или вниз, главное стронуть ссылку/текст с места, а далее можно тащить как угодно. Если начать тащить сразу вбок или по диагонали, то будет срабатывать выделение текста, а если такое поведение не подходит, то как и сказал @sedative29rus, выделение текста в ссылке можно отключить: @sedative29rus said in Открывать ссылку в новой вкладке по её наведению на панель вкладок или иконку новой вкладки:

03a676de-d7fa-4232-a51b-421dc6ff52d6-image.png

Вообще, ссылки открываются перетаскиванием на панель, если отключена галочка

sedative29rus @RX21
отредактировано

@sedative29rus, Нет, это не баг, реакция есть.

Тут я уже не про ссылку, а именно про текст — типа если выделить слово и перетащить его на плюсик новой вкладки, то должен открыться поисковик по умолчанию с поиском этого слова.

jugami @RX21
отредактировано jugami
RX21 @jugami
отредактировано

4678952674.png

@jugami, Вообще перетаскиванием пользоваться можно, но на мой взгляд — удобнее и быстрее пользоваться контекстным меню(нажать правой кнопкой мышки на выделенный текст или ссылку, и выбрать необходимый Вам пункт меню):

jugami @RX21
отредактировано

@RX21 думаю, это дело привычки, кому как удобнее. Я и так, и так делаю. Просто обратил внимание на то, что в Vivaldi это работает не так, как в других браузерах

RX21 @sedative29rus
отредактировано

Тут я уже не про ссылку, а именно про текст — типа если выделить слово и перетащить его на плюсик новой вкладки, то должен открыться поисковик по умолчанию с поиском этого слова.

Если так, то да, возможно баг. У меня на 5.4.2753.40 , работает как и должно: кидаю на плюсик(в панели вкладок) выделенный текст — открывается новая вкладка, с результатами поиска, в поисковике по умолчанию. Как работает на 6.0 не знаю, сейчас проверить возможности нет, возможно обязательно должен быть включён поиск в адресной строке.

jugami @RX21
отредактировано
@RX21 в версии 6.0 эта функция перестала работать. Надеюсь, в последующих обновлениях исправят.
sphera
отредактировано sphera

Вы изобретаете то, что придумано десятки лет назад. Сколько я себя помню . этих расширений «Drag & Drop» сотни, половина уже умерла, а вы все придумываете .
Многие были еще до Вивальди, для всех движков. Я их коллекционирую, могу список.
А вы перетаскивание на плюсик обсуждаете. А если от ссылки до него полметра ?
Наверное, если поискать темы, то эти предложения были на форуме много лет назад.
Есть расширения с 8 вариантами Drag, во все поисковые системы , википедии и свои варианты, с интерфейсом как в Win95.
А с рисунками жестами — вариантов бесконечно.
Жесты со ссылками работают ?
А чем средняя кнопка не устраивает ?
Люди ставят эти расширения от безысходности , т.к. от разработчиков не дождешься. В каких-то старых браузерах было «Drag & Drop» хоть 1 вариант. Но можно закрыть эту тему с таким итогом:
перетаскивание ссылок, текста, картинок — сложная тема с большим числом вариантов. Своими жестами и подсказками, обучением. Там настроек — на половину Вивальди. Если возьметесь, сделайте лучше чем smartUp
(пока искал, вижу этих smartUp много, есть даже разводилы на фин. рынке). Даю ссылку.
Хотя в части жестов Вивальди вполне конкурентен.
Ждать от Вивальди похожего функционала — не все доживут. Приоритеты не совпадают.
Хотя бы «Drag & Drop» хоть 1 вариант в любую сторону , ссылки или текста, new tab — это такой минимум , который должен быть в любом браузере, и изобретён лет 20 назад .

Загружаем больше сообщений

  • Сначала старые
  • Сначала новые
  • По количеству голосов

Узнайте как открыть ссылку в новом окне или на новой вкладке

Один из посетителей сайта спросил, как открыть ссылку в новом окне 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 »

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

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