Target blank не работает на телефоне
Атрибут target
По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank .
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5 . Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.
Как и _parent , значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.
framename
Символ подчёркивания
Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank :
Код второй ссылки:
Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой ( собственной вкладке ).
Это связано со значением framename , которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “ blank ” интерпретируется как значение типа framename . В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “ blank ”.
Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank .
Например, таким образом только что открытая вкладка может изменить window.opener.location, т.е. вместо предыдущей вкладки незаметно подгрузить совсем другую страницу.
Самое ужасное — то, что эта уязвимость присутствует на многих популярных отечественных и зарубежных сайтах: тогда как в Facebook её исправили несколько дней назад, она всё ещё работает, например, в Яндекс.Почте.
Пример атаки
Опираясь на такое поведение браузеров, можно придумать множество сценариев, вот самый простой:
1. Жертве отправляется письмо, возможно, с поддельного адреса. Содержание письма совершенно неважно: главное — это вынудить жертву перейти по ссылке с вредоносным кодом. Например, это может быть просьба заценить ми-ми-мишных котиков вроде того, что ниже. Target="_blank" Яндекс добавляет во все письма автоматически.
2. Жертва открывает письмо в Яндекс.Почте, кликает на ссылку, по которой в новой вкладке открывается сайт-прокладка, выполняющая вредоносный код, который вместо Яндекс.Почты загружает фишинговый сайт, очень похожий на оригинальный, но, например, просящий повторно ввести логин и пароль, а также, чтобы снять подозрения, действительно делает переадресацию на котиков.
Пример такого кода:
3. Жертва, доверяющая Яндексу и посмотревшая на котиков, возвращается на предыдущую вкладку с почтой. Так как в ней она ничего не открывала, а также адрес не меняла, то, скорее всего, она поведется на фейк и введет свои логин и пароль, которые на самом деле отправятся злоумышленнику.
Единственное, что может вызвать подозрения – другой адрес у страницы, но его можно сделать очень похожим на оригинальный, а на мобильных устройствах он часто скрыт по умолчанию.
Лечение
Если вы не собираетесь ждать, пока это исправят на сайтах и в браузерах, рекомендуем добавить себе в TamperMonkey/GreaseMonkey следующий User Script:
Атрибут target
По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank .
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5 . Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.
Как и _parent , значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.
framename
Символ подчёркивания
Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank :
Код второй ссылки:
Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой ( собственной вкладке ).
Это связано со значением framename , которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “ blank ” интерпретируется как значение типа framename . В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “ blank ”.
Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank .
От автора: У ссылки может быть атрибут target, контролирующий то, что происходит при клике по ней. Одним из возможных значений этого атрибута является _blank, который говорит браузеру при клике по этой ссылке открыть новое окно (или вкладку, если пользователь предпочтет ее).
Это считалось «неправильным» в HTML (может, только в XHTML?), но все равно применялось, потому что работало. В HTML5 все стало абсолютно законным. Но имеются ли значимые причины поступать подобным образом?
Плохой повод: потому что вам так нравится
Плохой повод: вам хочется, чтобы пользователи вообще не покидали вашу страницу
У других сайтов должны быть ссылки в обычном стиле, но наш сайт особенный. Он важнее остальных и его нельзя покидать.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Плохой повод: «внутренние» и «внешние» ссылки различаются.
Наши «внутренние» ссылки (указывающие на наш собственный сайт) ведут себя обычным образом, но «внешние» (указывающие на другие сайты) открываются в новом окне/вкладке. Это связано с двумя вышеприведенными причинами, только это еще хуже. Вы прекрасно понимаете, что идеальны обычные ссылки, но если они означают, что пользователю придется покинуть ваш сайт, вам хочется разрушить этот идеал. Я слышал от множества людей, что это «традиция». Типа подразумевается, что это нужно делать именно так. Но это неверно.
Плохой повод: ссылка на PDF
Или любой другой вид несетевого ресурса. Почему требуется сделать ее по-другому? Можно же вернуться назад с помощью кнопки возврата. Если хотите помочь пользователям скачать файл, не открывая его, то это достойная задача для удобства пользования, но добиться ее можно разными путями. Начинающие могут применить атрибут download.
Плохой повод: так хочет мой клиент
Я понимаю довод: «Не хочу за это сражаться», так как у вас не так много энергии. Но странно, что это вообще оказывается битвой. Если клиент не доверяет вам в этом деле, то в чем же он вам вообще доверяет? Можно зайти с такой стороны:
По умолчанию ссылки открываются обычным образом. Существует несколько причин, по которым можно менять такое поведение, и это увенчается успехом, но для большинства ссылок это невозможно. Мы ведь не хотим навязывать пользователю свои желания и потенциально расстроить его этой мелочью. Нам нужно, чтобы наши пользователи были о нас хорошего мнения.
И надеемся, что ваш спокойный и обоснованный подход поможет вашему клиенту хорошо думать о вас.
Плохой повод: страница с бесконечной прокруткой
Бесконечная прокрутка – коварная штука. С одной стороны, она может оказать хорошее пользовательское впечатление, потому что способна беспрерывно доставлять содержимое. И может оказать плохое впечатление, будучи неправильно выполненной. Возврат «назад» на странице с бесконечной прокруткой в большинстве случаев должен отправлять туда, где вы остановились. Решение этой сложной проблемы – ваша работа. Просто заставить ссылки открываться в новых вкладках для того, чтобы эта проблема никогда не возникала – означает избегать своей работы.
Хорошая причина: пользователем инициируется проигрывание медиаконтента
Мы уже раскрывали здесь эту идею. Если проигрывается медиасреда, обрабатывайте ссылки особым образом. Если не проигрывается, ссылки должны быть в обычном состоянии. Несмотря на то, что я говорю, посмотрите на YouTube’е – при смене видеороликов вас не достают этим вопросом.
Хорошая причина: пользователь работает на этой странице с чем-то, что может потеряться при ее смене
Возможно, пользователь что-то пишет. Или приводит в порядок. Делает что угодно. Щелчок по ссылке и смена страниц может оказаться волнительным, ужасным моментом. Я что, потерял все, что делал? Даже если вами предусмотрена гарантия того, что он не потеряет свою работу, следует избегать введения пользователя в подобное паническое состояние. Я подумал о CodePen, где пользователи часто пишут код. Чтобы помочь им, мы делаем следующее:
Ссылки, ведущие на другие страницы и явно являющиеся ссылками в стиле «Узнать больше» (например, [?]), видные только при взаимодействии с редактором, открываются в новой вкладке.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
У обычных ссылок (например, ссылок нижнего колонтитула) нормальное поведение, но мы определяем, есть ли в редакторе несохраненные изменения и предлагаем сохранить их перед выходом со страницы.
Если вы все же уходите на другой сайт (или ваш браузер падает), мы сохраняем состояние редакторов в localStorage и вы не теряете свою работу.
Окончание работы – совсем другое дело. Конечно, вам не хочется терять клиентов при выходе из сайта. Ссылки на что-то вроде «Информации о доставке» должны открываться без необходимости покидать сайт. «Прочтение статьи», по моему мнению, не даст вам никакого опыта. Так как (обычно) вернуться обратно очень легко (большинство браузеров даже делают прокрутку до того места, где вы перед этим находились), то на самом деле риск потерять что-то отсутствует.
Хорошая причина: некая техническая точка зрения
Читайте также: