wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Target blank: Target = «_blank» и другие значения атрибута target

alexxlab
No Comments

Содержание

Target = «_blank» и другие значения атрибута target

target=»_blank используется, чтобы тег <a> открыл ссылку в новом окне. Но что такое target HTML? Почему он должен быть blank? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.

По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank.

Четыре наиболее распространенных значения атрибута target:

Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.

Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.

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

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

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5. Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.

Как и _parent, значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank», то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:

Код второй ссылки:

<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).

Это связано со значением framename, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank” интерпретируется как значение типа framename. В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank”.

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

Данная публикация является переводом статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE» , подготовленная редакцией проекта.

Target = «_blank» и другие значения атрибута target

target=»_blank используется, чтобы тег <a> открыл ссылку в новом окне. Но что такое target HTML? Почему он должен быть blank? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.

По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank.

Четыре наиболее распространенных значения атрибута target:

Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.

Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.

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

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

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5. Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.

Как и _parent, значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank», то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:

Код второй ссылки:

<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).

Это связано со значением framename, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank” интерпретируется как значение типа framename. В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank”.

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

Данная публикация является переводом статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE» , подготовленная редакцией проекта.

Target = «_blank» и другие значения атрибута target

target=»_blank используется, чтобы тег <a> открыл ссылку в новом окне. Но что такое target HTML? Почему он должен быть blank? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.

По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank.

Четыре наиболее распространенных значения атрибута target:

Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.

Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.

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

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

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5. Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.

Как и _parent, значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank», то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:

Код второй ссылки:

<a href="http://ltconsulting. co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).

Это связано со значением framename, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank” интерпретируется как значение типа framename. В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank”.

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

Данная публикация является переводом статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE» , подготовленная редакцией проекта.

Откуда у target=”_blank” нижнее подчеркивание | by Liudmila Mzhachikh

Задавались когда-нибудь вопросом, почему все атрибуты как атрибуты, а у атрибута ссылки target значение с нижним подчеркиванием? 🤔

<a href="#" target="_blank">Я откроюсь в новом окне<a/>

Согласно спеке, у атрибута target есть 5 возможных значений (да, не только _blank):

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

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

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

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

🔗{framename} — открывает документ во фрейме по имени {framename}

Наверняка, вы никогда и не использовали ничего, кроме _blank, и это не удивительно.

Зачем же тогда все остальные?

Этот вопрос уходит корнями в историю. В незапамятные времена, когда ajax-а не было и в помине, страницы часто делили на множество окошек с помощью тега <frameset>. Например, одно окошко служило навигацией, а другое — контентом. Получалось некое подобие обновления без перезагрузки страницы.

Сайт, разделенный на фреймы

И нужно было как-то указывать браузеру, в каком фрейме показывать ответ. За это и отвечал атрибут target.

А что происходит, когда мы пишем blank без нижнего подчеркивания? Почему ссылка все равно открывается в новом окне?

А происходит вот что. Браузер видит blank и думает, что это имя фрейма. Он пытается открыть документ во фрейме с name=blank, и, не находя такого, открывает его в новом окне и дает ему такое имя.

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

Можно ли писать blank без нижнего подчеркивания? В целом, да, но это не по стандарту (соотвественно, поведение будет как для фрейма).

Будут ли обновлять стандарт, раз frameset-ы давно канули в лету?

Скорее всего нет, т.к. до сих пор существуют сайты с фреймами. Обновление стандарта без обратной совместимости поломает эти сайты.

Ссылки:

target=»_blank» против target= » _new»

В чем разница между <a target="_new"> и <a target="_blank"> и что я должен использовать, если я просто хочу открыть ссылку в новом tab/window?

html

Поделиться

Источник


Alex Grin    

10 февраля 2011 в 23:54

12 ответов

  • php…target=’_blank’

    Я хочу открыть новое окно После нажатия кнопки и пытаюсь изменить код в Zencart. Я думаю, что пытаюсь манипулировать им в нужном месте… но я не знаю, как это сделать.: (Для тех, кто знает Zencart, это было в файле paypalwpp.php, строки 1616-1618) // This is where we actually redirect the…

  • Замена `target=»_blank»`?

    Я использую target=_blank в большинстве гаджетов google, чтобы ссылка открывалась в новом окне, а не в небольшом пространстве гаджета, но она загрязняет браузер windows, и я ищу решение, чтобы окно открывалось в текущем окне просмотра (как обычный просмотр без дополнительного беспорядка окна. …


652

Согласно спецификации HTML5 :

Допустимым именем контекста просмотра является любая строка, содержащая хотя бы один символ, который не начинается с символа нижней строки U+005F. (Имена, начинающиеся с подчеркивания, зарезервированы для специальных ключевых слов.)

Допустимое имя контекста просмотра или ключевое слово-это любая строка, которая либо является допустимым именем контекста просмотра, либо является ASCII-нечувствительным к регистру совпадением для одного из: _blank, _self, _parent или _top.»- Source

Это означает, что в HTML5 нет такого ключевого слова, как _new , и в HTML4 (а следовательно, и в XHTML) тоже . Это означает, что не будет никакого последовательного поведения вообще, если вы используете это как значение для целевого атрибута.

Рекомендация по безопасности

Как указывали Даниэль и Майкл в комментариях, при использовании target _blank , указывающего на ненадежный веб-сайт, вы должны, кроме того, установить rel="noopener" . Это предотвращает возню открывающего узла с открывателем через JavaScript. См. этот пост для получения дополнительной информации.

Поделиться


fresskoma    

11 февраля 2011 в 00:07


127

Использование target="_blank" даст браузеру команду Создать новую вкладку или окно браузера, когда пользователь нажмет на ссылку.

Использование target="_new" технически недопустимо в соответствии со спецификациями, но, насколько я знаю, каждый браузер будет вести себя одинаково:

  • он будет искать вкладку или окно с контекстным именем «_new»
  • если найдена вкладка/окно «_new», то в него загружается URL
  • если он не найден, создается новая вкладка/окно с контекстным именем «_new», и в него загружается URL

Примечание target="_new" будет вести себя точно так же , как target="new", и последнее является допустимым HTML, в то время как первое является недопустимым HTML.

Добавляя некоторую путаницу к этому, в HTML4 атрибут target был устаревшим. В HTML5 году это решение было отменено, и оно снова стало официальной частью спецификации. Все браузеры поддерживают target независимо от того, какую версию HTML вы используете, но некоторые валидаторы отметят использование как устаревшее, если ваш doctype является HTML4.

Поделиться


Abhi Beckert    

15 января 2012 в 02:18


27

TL;DR

USE настроек

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

USAGE: target="xyz"  [don't forget double quotes]

_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent     Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window 
framename   Opens the linked document in a named frame

SINCE «_new» не является ни одним из них, он попадет под «framename», поэтому, если пользователь повторно нажмет на эту гиперссылку, он не откроет новую вкладку, а обновит существующую. В то время как в _blank, если пользователь нажимает дважды, то открываются 2 новые вкладки.

Поделиться


abe312    

26 июля 2015 в 18:30

  • Что такое target=»_new»? валидатор выдает ошибку

    Что такое target=_new ? Валидатор выдает ошибку.. Как вы это делаете с jquery, потому что валидатор вызывает ошибку. На той же странице у меня есть target=_new и target=_blank . target=_new находится в том виде кода, который я получил от email newsletter company. Я использую это для target=_blank…

  • target = «_blank» против target = _blank

    Есть ли разница между target=_blank и target=_blank ? Кажется, у них такое же поведение, но просто хочется убедиться, что одно лучше практиковать, чем другое (и почему). Я всегда использовал цитаты, но читаю учебник rails и понял, что Майкл их не использует.


23

Я знаю, что это старый вопрос , и правильный ответ, use _blank, упоминался несколько раз, но использование <a target="somesite.com" target="_blank">Link</a> -это угроза безопасности .

Рекомендуется (преимущества производительности ) использовать:

<a href="somesite.com" target="_blank" rel="noopener noreferrer">Link</a>

Поделиться


Michal Frystacky    

27 августа 2017 в 06:50


15

Возможно, об этом уже спрашивали раньше, но:

«каждая ссылка, указывающая target=»_new», ищет и находит это окно по имени и открывается в нем.

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

отсюда: http://thedesignspace.net/MT2archives/000316.html

Поделиться


corroded    

10 февраля 2011 в 23:59


13

target="_blank" открывает новую вкладку в большинстве браузеров.

Поделиться


Abudayah    

11 февраля 2011 в 00:10


13

насколько я понимаю, target = whatever будет искать фрейм/окно с таким именем. Если он не найден, то откроется новое окно с этим именем. Если whatever == "_new", то он будет выглядеть так же, как если бы вы использовали _blank за исключением…..

Использование одного из зарезервированных целевых имен позволит обойти фазу «looking». Таким образом, target = "_blank" на дюжине ссылок откроет дюжину пустых windows, но target = whatever на дюжине ссылок откроет только одно окно. target = "_new" на дюжине ссылок может дать непостоянное поведение. Я не пробовал его в нескольких браузерах, но должен открыть только одно окно.

По крайней мере, так я интерпретирую правила.

Поделиться


the Hampster    

25 января 2013 в 19:56


9

Внимание-не забывайте всегда включать «quotes» — по крайней мере, в Chrome target=_blank (без кавычек) не то же самое, что target="_blank" (с кавычками).

Последний открывает каждую ссылку в новом tab/window. первый (отсутствующие кавычки) открывает первую ссылку, которую вы нажимаете в одном новом tab/window,, а затем перезаписывает ту же вкладку/Окно с каждой последующей ссылкой, которую вы нажимаете (которая также называется с отсутствующими кавычками).

Поделиться


cnd    

26 мая 2014 в 08:13


5

  • _blank как целевое значение будет порождать новое окно каждый раз,
  • _new создаст только одно новое окно.

Кроме того, каждая ссылка, щелкнутая с целевым значением _new, заменит страницу, загруженную в ранее созданное окно.

Вы можете нажать здесь, когда использовать _blank или _new , чтобы попробовать его самостоятельно.

Поделиться


James Drinkard    

23 октября 2013 в 14:13


0

Целевой атрибут ссылки заставляет браузер открывать целевую страницу в новом окне браузера. Использование _blank в качестве целевого значения будет порождать новое окно каждый раз, в то время как использование _new будет порождать только одно новое окно, и каждая ссылка, щелкнутая с целевым значением _new , заменит страницу, загруженную в ранее созданное окно

Поделиться


Carlos Guzman    

03 августа 2012 в 21:41


0

Чтобы открыть ссылку в новой вкладке / окне, вы будете использовать <a target="_blank"> .

значение _blank = целевой контекст просмотра: новый: вкладка или окно в зависимости от ваших настроек просмотра

значение _new = недопустимо; нет такого значения в HTML5 для целевого атрибута элемента

целевой атрибут со всеми его значениями на элементе: видео-демонстрация

Поделиться


Daniel    

31 января 2014 в 14:58


-1

Использование _New полезно при работе со страницами, которые являются Iframed. Поскольку target=»_blank» не делает трюка и открывает страницу на том же iframe… target new-лучшее решение для Iframe страниц. Только мои пять центов.

Поделиться


Ozzy Gonzalez    

17 мая 2016 в 15:34

Похожие вопросы:

Значение «_new» в target= атрибут не поддерживается в HTML5?

Я решил перестать использовать _blank и начать использовать _new , чтобы как можно больше не шлепать пользователей новыми windows, а вместо этого иметь один единственный ‘new window’ и иметь все…

mimic target=»_new» для кнопки

допустим, у нас есть ссылка <a href=/something target=_new>blah</a> и теперь я хочу, чтобы кнопка делала то же самое, что и ссылка, без использования jquery. у кого-нибудь есть опыт…

Разница между: target => ‘_blank’ и target: = » _blank»

Недавно я задал вопрос ( вот ссылка ) относительно открытия ссылки на новой странице. Я обнаружил, что есть два ответа. :target => ‘_blank’ target: _blank Я надеялся, что кто-нибудь сможет…

php…target=’_blank’

Я хочу открыть новое окно После нажатия кнопки и пытаюсь изменить код в Zencart. Я думаю, что пытаюсь манипулировать им в нужном месте… но я не знаю, как это сделать.: (Для тех, кто знает Zencart,. ..

Замена `target=»_blank»`?

Я использую target=_blank в большинстве гаджетов google, чтобы ссылка открывалась в новом окне, а не в небольшом пространстве гаджета, но она загрязняет браузер windows, и я ищу решение, чтобы окно…

Что такое target=»_new»? валидатор выдает ошибку

Что такое target=_new ? Валидатор выдает ошибку.. Как вы это делаете с jquery, потому что валидатор вызывает ошибку. На той же странице у меня есть target=_new и target=_blank . target=_new…

target = «_blank» против target = _blank

Есть ли разница между target=_blank и target=_blank ? Кажется, у них такое же поведение, но просто хочется убедиться, что одно лучше практиковать, чем другое (и почему). Я всегда использовал цитаты,…

target=»_new» не работает в окне маркера google map

Я добавил маркер на карту, по щелчку маркера я показываю какой-то текст и гиперссылку с target=_new, вот точный html <a href=http://www.google.com/ ,target=_new> Get Directions</a> но…

Rails удаляет target= » _blank»

У меня есть простое приложение для блога на rails 4.1.4, которое позволяет пользователям создавать посты. Всякий раз, когда пользователь добавляет ссылку в свой пост, тег target=_blank удаляется на…

Как стилизовать якоря target=»_blank»?

Я искал способ изменить css ссылок по всему моему сайту, которые имеют target:_blank; пожалуйста, обратите внимание, что я могу сделать это только в css, а не в js. Спасибо. Пример: <style> a{…

Когда использовать target=_blank

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

Это считалось «неправильным» в HTML (может, только в XHTML?), но все равно применялось, потому что работало. В HTML5 все стало абсолютно законным. Но имеются ли значимые причины поступать подобным образом?

Плохой повод: потому что вам так нравится

Нравится вам это или нет, target=»_blank» изменяет поведение по умолчанию. Ссылки, открывающиеся в той же странице – вот поведение по умолчанию (как будто в ссылке имеется target=»_self»). Возможно, вы вошли во вкус и открываете все ссылки в новых окнах/вкладках. Отлично, но лучше предположите, что большей части пользователей более удобно поведение по умолчанию. И, таким образом, они чувствуют себя менее уютно, когда вы навязываете им другое.

Если это внутренний инструмент исключительно для вас, то делайте что пожелаете. Если сайтом пользуются другие люди, оставьте все как есть. Также стоит отметить, что пользователи могут открыть ссылку в новом окне/вкладке, щелкнув по ссылке правой кнопкой мыши (и выбрав нужный пункт). Это значит, что для ссылок доступны оба типа поведения. Это также значит, что если вам нравится открывать новые вкладки, то вы как хотите, но не следует навязывать кому-либо такое поведение. А при использовании target=»_blank» возможно только оно.

Плохой повод: вам хочется, чтобы пользователи вообще не покидали вашу страницу

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Плохой повод: «внутренние» и «внешние» ссылки различаются.

Наши «внутренние» ссылки (указывающие на наш собственный сайт) ведут себя обычным образом, но «внешние» (указывающие на другие сайты) открываются в новом окне/вкладке. Это связано с двумя вышеприведенными причинами, только это еще хуже. Вы прекрасно понимаете, что идеальны обычные ссылки, но если они означают, что пользователю придется покинуть ваш сайт, вам хочется разрушить этот идеал. Я слышал от множества людей, что это «традиция». Типа подразумевается, что это нужно делать именно так. Но это неверно.

Плохой повод: ссылка на PDF

Или любой другой вид несетевого ресурса. Почему требуется сделать ее по-другому? Можно же вернуться назад с помощью кнопки возврата. Если хотите помочь пользователям скачать файл, не открывая его, то это достойная задача для удобства пользования, но добиться ее можно разными путями. Начинающие могут применить атрибут download.

Плохой повод: так хочет мой клиент

Я понимаю довод: «Не хочу за это сражаться», так как у вас не так много энергии. Но странно, что это вообще оказывается битвой. Если клиент не доверяет вам в этом деле, то в чем же он вам вообще доверяет? Можно зайти с такой стороны:

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

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

Плохой повод: страница с бесконечной прокруткой

Бесконечная прокрутка – коварная штука. С одной стороны, она может оказать хорошее пользовательское впечатление, потому что способна беспрерывно доставлять содержимое. И может оказать плохое впечатление, будучи неправильно выполненной. Возврат «назад» на странице с бесконечной прокруткой в большинстве случаев должен отправлять туда, где вы остановились. Решение этой сложной проблемы – ваша работа. Просто заставить ссылки открываться в новых вкладках для того, чтобы эта проблема никогда не возникала – означает избегать своей работы.

Хорошая причина: пользователем инициируется проигрывание медиаконтента

Например: музыки, видео, подкаста… Пользователь начал проигрывание. Перемещение страниц остановит его. В этот момент пусть ссылки либо открываются в новых вкладках, либо спрашивайте, уверен ли пользователь, что хочет покинуть страницу. Так вы постараетесь и сделать хорошо для него, и не дать ему покинуть страницу.

Мы уже раскрывали здесь эту идею. Если проигрывается медиасреда, обрабатывайте ссылки особым образом. Если не проигрывается, ссылки должны быть в обычном состоянии. Несмотря на то, что я говорю, посмотрите на YouTube’е – при смене видеороликов вас не достают этим вопросом.

Хорошая причина: пользователь работает на этой странице с чем-то, что может потеряться при ее смене

Возможно, пользователь что-то пишет. Или приводит в порядок. Делает что угодно. Щелчок по ссылке и смена страниц может оказаться волнительным, ужасным моментом. Я что, потерял все, что делал? Даже если вами предусмотрена гарантия того, что он не потеряет свою работу, следует избегать введения пользователя в подобное паническое состояние. Я подумал о CodePen, где пользователи часто пишут код. Чтобы помочь им, мы делаем следующее:

Ссылки, ведущие на другие страницы и явно являющиеся ссылками в стиле «Узнать больше» (например, [?]), видные только при взаимодействии с редактором, открываются в новой вкладке.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У обычных ссылок (например, ссылок нижнего колонтитула) нормальное поведение, но мы определяем, есть ли в редакторе несохраненные изменения и предлагаем сохранить их перед выходом со страницы.

Если вы все же уходите на другой сайт (или ваш браузер падает), мы сохраняем состояние редакторов в localStorage и вы не теряете свою работу.

Окончание работы – совсем другое дело. Конечно, вам не хочется терять клиентов при выходе из сайта. Ссылки на что-то вроде «Информации о доставке» должны открываться без необходимости покидать сайт. «Прочтение статьи», по моему мнению, не даст вам никакого опыта. Так как (обычно) вернуться обратно очень легко (большинство браузеров даже делают прокрутку до того места, где вы перед этим находились), то на самом деле риск потерять что-то отсутствует.

Хорошая причина: некая техническая точка зрения

Я создаю электронную почту, которую нужно открывать в Outlook Kangaroo 2009 Enterprise Edition, и ссылки должны иметь target=»blank», иначе они станут открываться в окне просмотра боковой колонки и … Отлично.

Технический аспект

Вдруг вам придется…

Как заставить пользователя подтвердить свое желание покинуть страницу:

window.onbeforeunload = function() {
return «Two buttons will be below this message asking if user wants to stay on this page or leave.»;
}

window.onbeforeunload = function() {

  return «Two buttons will be below this message asking if user wants to stay on this page or leave.»;

}

Драматический накал

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

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

target = «_blank» — сильно недооцененная уязвимость в безопасности

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

Что в действительности происходит, когда вы открываете ссылку в новом окне, указав target=»_blank»?

  • Страница, на которую мы ссылаемся, получает ограниченный доступ к текущей странице через объект window.opener
  • Недавно открытая страница теперь может изменить window. opener.location на любую фишинговую страницу. При таком сценарии использования пользователь доверяет странице на которую переходит с вашего сайта и будет относится к ней без подозрения.

Рассмотрим сценарий возможной атаки

Создайте поддельную «фишинговую» страницу с изображениями милых котиков, который всем понравятся, поделитесь ей на Facebook (который будет открывать вашу ссылку через _blank).

Создайте «фишинговый» сайт например по такому адресу https://phishingwebsite/facebook.com/page.html и разместите следующий код на вашей «фишинговой» странице.

window.opener.location = 'https://phishingwebsite/facebook.com/page.html';

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

Что же произошло?

Вы только что отправили свои личные учетные данные кому-то, кто теперь может войти в вашу учетную запись Facebook и делать в ней все что захочет, например, может изменить учетные данные.

Давайте посмотрим, как мы можем это исправить

Добавьте для ссылки атрибут rel с значением noopener.

<a href= '/share' rel="noopener" target="_blank"/>

Совсем старые браузеры, например такие как IE11, не поддерживают значение «noopener» и для них придется добавить еще одно значение для атрибута rel — «noreferrer»

<a href= '/share' rel="noopener noreferrer" target="_blank"/>

поддержка rel=»noopener» браузерами

Подытоживая все вышесказанное, для ссылок с target=»_blank», всегда следует добавлять rel=»noopener noreferrer», как меру предосторожности против фишинга. Это гарантирует, что значение window.opener будет null, в Chrome и Firefox. В Safari Technology Preview 68, для target=»_blank» задается rel=»noopener» по умолчанию.

Спасибо, что прочитали мои мысли по этой теме.

javascript — можно ли использовать target = «_ blank» в HTML5?

Хотя target = "_ blank" приемлемо в HTML5, я лично стараюсь никогда не использовать его (даже для открытия PDF-файлов в новом окне).

HTML должен определять значение и содержание . Спросите себя: «изменится ли , означающий из как , если удалить целевой атрибут ?» Если нет, код не должен помещаться в HTML. (На самом деле я удивлен, что W3C сохранил это … Я думаю, они просто не могут отпустить.)

Браузер Поведение , в частности, интерактивное поведение с пользователем , должно быть реализовано с помощью клиентских языков сценариев, таких как JavaScript. Поскольку вы хотите, чтобы браузер вел себя определенным образом, то есть открывал новое окно, вам следует использовать JS. Но, как вы упомянули, такое поведение требует, чтобы браузер полагался на JS. (Хотя, если ваш сайт постепенно ухудшается, или постепенно улучшается, или что-то еще, тогда все должно быть в порядке. Пользователи с отключенным JS мало что пропустят.)

При этом ни то, ни другое не является правильным ответом. Где-то есть мнение, что , как открывается ссылка, в конечном итоге должен решать конечный пользователь . Возьмем этот пример.

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

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

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

При этом, веб-разработчики должны четко дать понять, куда идут их ссылки, на какие типы и / или форматы источников они ссылаются и что они делают.Всплывающие подсказки могут быть вашим другом (если вы не используете планшет или телефон; в этом случае укажите их на мобильном сайте). Мы все знаем, как это отстой — оказаться куда-то, чего мы не ожидали, или сделать что-то, чего мы не хотели.

: элемент привязки — HTML: язык разметки гипертекста

HTML элемент (или элемент привязки ) с его атрибутом href , создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес.Содержимое внутри каждого должно указывать на адрес назначения ссылки . Если присутствует атрибут href , нажатие клавиши ввода при фокусировке на элементе активирует его.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Атрибуты этого элемента включают глобальные атрибуты.

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

URL-адрес, на который указывает гиперссылка. Ссылки не ограничиваются URL-адресами на основе HTTP — они могут использовать любую схему URL-адресов, поддерживаемую браузерами:

hreflang
Указывает на человеческий язык связанного URL.Нет встроенного функционала. Допустимые значения такие же, как для глобального атрибута lang .
пинг
Список URL-адресов, разделенных пробелами. При переходе по ссылке браузер отправит на URL-адреса запросов POST с телом PING . Обычно для отслеживания.
referrerpolicy Это экспериментальный API, который не следует использовать в производственном коде.
Сколько реферера отправлять при переходе по ссылке.См. Referrer-Policy для получения информации о возможных значениях и их последствиях.
отн.
Отношение связанного URL-адреса как типов ссылок, разделенных пробелами.
цель
Где отображать связанный URL-адрес, как имя контекста просмотра (вкладка, окно или