Открытие ссылки в новой вкладке – Открытие ссылки в новой вкладке

Как сделать, чтобы ссылки открывались в новом окне или на новой вкладке

Один из посетителей сайта спросил, как открыть ссылку в новом окне HTML. В этой статье я отвечу на данный вопрос.

Посетитель не уточнил, каким редактором пользуется, поэтому будем считать, что он работает напрямую в HTML. Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать HTML-код.

Например, если вы работаете в Expression Web, можно отредактировать код страницы, переключившись в «Режим кода» (Code mode).

Короткий ответ: просто добавьте к своим ссылкам (тегу <a>) атрибут target=»_blank».

Допустим, что у вас есть следующая ссылка:

<a href="https://www.thesitewizard.com/">thesitewizard.com</a>

Измените её, чтобы она выглядела следующим образом:

<a href="https://www.thesitewizard.com/" target="_blank">thesitewizard.com</a>

Теперь, когда пользователи кликнут по этой ссылке, она откроется в новом окне или на новой вкладке (в зависимости от того, каким браузером они пользуются, и как он настроен).

Обратите внимание, что если вы используете 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». Пример, приведённый в начале статьи, будет выглядеть следующим образом:

<a href="https://www.thesitewizard.com/" rel="noopener noreferrer" target="_blank">thesitewizard.com</a>

Теоретически, как 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» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

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

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

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

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

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

Навигация по статье:

Атрибут target=_ blank

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

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

<a href=»//impuls-web.ru» target=»_blank»>Интересная статья</a>

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

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

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

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

Тег base

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

Код:

<!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, но при этом не использовать атрибут

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

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

<a href=»//impuls-web.ru»>текст</a>

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

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

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

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

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

impuls-web.ru

Ссылка на новое окно | htmlbook.ru

Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется атрибут target=»_blank» тега <a>.

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

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

Пример 1. Создание ссылки на новое окно

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="http://htmlbook.ru">Обычная ссылка на сайт www.htmlbook.ru</a></p>
  <p><a href="http://htmlbook.ru" target="_blank">Ссылка 
  открывает новое окно на сайт www.htmlbook.ru</a></p> 
 </body>
</html>

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

Пример 2. Использование тега <base>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="1.html">Ссылка откроется в новом окне</a></p>
  <p><a href="2.html" target="_self">Ссылка откроется в 
  текущем окне</a></p>
 </body>
</html>

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

Учтите, что атрибут target не является валидным для строгого <!DOCTYPE>.

htmlbook.ru

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

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

Реклама на nextontext.ru

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

Хотите открыть ссылку в отдельном окне? Это довольно просто сделать. Удерживайте нажатой клавишу “Shift”, затем щелкните ссылку которую хотите открыть в отдельном окне.

Эта функция дублируется в контекстном меню браузера. Открыть ссылку в новом окне можно нажав по ней правой клавишей мыши и выбрать “Открыть ссылку в новом окне».

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

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

Также, как и в предыдущем случае, открытие вкладки заложено в контекстном меню браузера. Просто наведите курсор на ссылку — нажмите правой клавишей мыши — в контекстном меню выберите опцию “Открыть ссылку в новой вкладке”.

Реклама на nextontext.ru

Ничего сложного друзья! Также хочу заметить, что эти методы работают во всех основных интернет-браузерах, доступных для Microsoft Windows.

Послесловие

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

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

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

Представим, Вы пишите ссылку таким образом:

Чтобы ссылка открывалась так как Вам нужно (в новом окне), необходимо добавить атрибут target=»_blank», и тогда ссылка примет следующий вид, и будет открываться по нажатию в новом окне:

nextontext.ru

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

Добрый день! Уважаемые читатели и гости IT блога Pyatilistnik.org. В прошлый раз мы с вами разобрали, как отключить оповещения в браузере. Сегодня мы рассмотрим такой вопрос, который так же связан с браузерами, а именно. Буквально вчера после обновления Google Chrome я был не приятно удивлен, что все ссылки в результатах поиска, стали открываться не в новой вкладке, а стали открываться в текущей. Это дико не удобно и раздражающе, так как заставляют вас постоянно возвращаться на результаты поиска, что дает лишний трафик, лишние задержки и лишний просмотр рекламы в мобильной версии. Меня эта ситуация слегка напрягла и я стал устранять данное неудобство. В статье я хочу поделиться своим опытом.

Описание проблемы

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

Как настроить открытие ссылок из поиска в новом окне для десктопной версии Google Chrome

Для начала разберем, как это сделать для компьютерной версии. Откройте главную страницу Google.

Хочу отметить, что страница https://www.google.com и https://www.google.ru, это разные поисковые инструменты, поэтому для каждой из них нужно выполнить описанные ниже действия

Находясь на главной странице, в правом углу нажмите кнопку «Настройки».

Далее нажимаем «Настройки поиска».

В разделе «Открывать результаты», убедитесь, что установлена галка «В новом окне», если она стоит, то снимите ее и заново проставьте, так же выставите в разделе «Озвучивание результатов» выставите пункт «Только текст«. После чего вы сохраняете настройки. Проверяем открытие ссылок из результата поиска в Google Chrome.

Вас сообщат, что настройки сохранены.

Еще метод, чтобы Google chrome открывал ссылки в новой вкладке, это изменение настроек на самой поисковой выдаче. Предположим, что вы получили страницу с результатами поиска. Под строкой поиска, есть дополнительные пункты настроек. Выберите «Настройки». В результате вы попадете в окно, где мы уже производили манипуляции.

Так же если вы хотите открывать любую ссылку в Google Chrome или другом браузере в номом окне, то вы можете кликать по ней кнопкой скрола (колесика) мышки. Данный метод всегда работает.

Как открывать ссылки в новом окне на мобильной версии Google Chrome

Так как самый распространенный браузер на мобильных устройствах Android, это Google Chrome и как выяснилось, он в последних версиях так же перестал открывать результаты поиска в новой вкладке. Чтобы это исправить выполните следующие действия. В браузере, в правом верхнем углу нажмите кнопку настроек, в виде трех вертикальных точек, из меню выберите пункт «Полная версия».

У вас будет открыт обычный компьютерный вариант браузера. Теперь снова откройте окно настроек. Откройте новую вкладку и сделайте поисковый запрос. В итоге у вас будет поисковая выдача, тем не менее вы можете нажать под поисковой строкой кнопку «Настройки поиска».

Попав в них выставите галку «В новом окне», если она стоит, то снимаем ее и заново устанавливаем. В итоге теперь все ссылки из результатов поиска будут открываться в новой вкладке.

На этом у меня все. С вами был Иван Семин, автор и создатель IT блога Pyatilistnik.org.

pyatilistnik.org

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

<p><a href="http://www.yandex.ru">Ссылка на яндекс</a></p>

<p><a href="http://www.yandex.ru" target="_blank">Ссылка</a></p>

<a href="http://www.yandex.ru">
<img src="image.jpg" alt="Ссылка"></a>

<p>На этот элемент ведёт ссылка</p>
<div></div>
<a href="#ab">Ссылка на абзац</p>