Один из посетителей сайта спросил, как открыть ссылку в новом окне HTML . В этой статье я отвечу на данный вопрос.
Что вам потребуетсяПосетитель не уточнил, каким редактором пользуется, поэтому будем считать, что он работает напрямую в HTML . Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать HTML-код .
Например, если вы работаете в Expression Web , можно отредактировать код страницы, переключившись в «Режим кода » (Code mode ).
Как настроить открытие ссылок в новой вкладке или в новом окне браузераthesitewizard.com
Измените её, чтобы она выглядела следующим образом:
thesitewizard.com
Теперь, когда пользователи кликнут по этой ссылке, она откроется в новом окне или на новой вкладке (в зависимости от того, каким браузером они пользуются, и как он настроен ).
Обратите внимание, что если вы используете 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» . Пример, приведённый в начале статьи, будет выглядеть следующим образом:
thesitewizard.com
Теоретически, как 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 . Конечно, в некоторых случаях этого не избежать. В этой ситуации можно предупредить посетителей сайта о том, что «ссылка открывается в новом окне ». Это не сильно поможет среднестатистическому пользователю и не защитит его от фишинговых атак через ваш сайт, но хотя бы не будет раздражать более опытных пользователей.
Задача РешениеПо умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank , как показано в примере 1.
HTML5 IE Cr Op Sa Fx
Ссылки
Учтите, что при использовании строгого атрибут target в HTML4 и XHTML осуждается и код с ним не пройдет валидацию. Чтобы в таком случае сделать ссылку для открытия в новом окне и соблюсти корректность кода, одних HTML и CSS недостаточно, поэтому придется обратиться к скриптам. Вначале необходимо как-то выделить ссылки, которые будут открываться в новом окне, например, атрибутом rel со значением external . Этот атрибут кратко описывает ссылку или куда она ведет. Браузеры не воспринимают этот атрибут, но это и не требуется, поскольку мы будем проверять все ссылки через JavaScript (пример 2). К нужным ссылкам добавляется все тот же target . Но так как это делается программно, то валидатор уловки не заметит.
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ссылка в новом окне /* */
Выражение открыть ссылку в новом окне, в этой статье обозначает, что ссылки будут открываться в новой вкладке или новом окне, в зависимости от настроек вашего браузера. В любом случае подразумевается, что страница, с которой был совершен переход по ссылке, останется открытой.
Для чего это может понадобиться? Посетитель в данный момент находиться на вашем сайте, а в статье или на странице сайта есть внешняя ссылка. Если эта ссылка чем-то заинтересовала посетителя, то он после нажатия на такую внешнюю ссылку попадет на другой сайт.
На другом сайте он может открыть еще несколько страниц и после этого ему будет трудно опять попасть на ваш сайт. Он не дочитал вашу статью, а как снова попасть на ваш сайт не всякий пользователь компьютера сразу поймет, ведь у людей разная подготовка и начинающим бывает не всегда понятно, что нужно делать в этом случае.
В браузере можно переходить по кнопке назад, а посетитель ведь мог вообще закрыть окно на другом сайте, а он ведь хотел дочитать вашу статью, а не ту статью, на которую он случайно попал по внешней ссылке.
Открыть ссылку в новой вкладке браузера можно вручную вставляя в каждую такую ссылку атрибут «target» со значением «_blank» тэга . В HTML это будет выглядеть таким образом - target=”_blank” . Но таких ссылок может быть очень много, и не всегда запомнишь, в какие внешние ссылки еще не был вставлен этот атрибут.
При добавлении новых ссылок и изображений в статье, в админ-панели WordPress, в текстовом редакторе, есть соответствующие пункты, активация которых позволяет открывать добавленные ссылки и изображения в новом окне.
Есть несколько способов сделать так, чтобы ссылки открывались в новом окне. В этой статье я опишу только те способы, которые работали на моем сайте.
Некоторые способы некорректно работали на моем сайте, в предыдущем шаблоне, поэтому о них я не буду рассказывать. В частности некорректно отображалась главная страница в способе, который требует подключения библиотеки JavaScript - jQuery. Кроме того, этот способ не работал бы при отключении JavaScript.
Как открыть ссылку в новом окнеДля того, чтобы открывать на сайте абсолютно все ссылки в новых окнах или вкладках, потребуется вставить специальный код в файл «Заголовок (header.php)».
Для вставки этого кода нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Заголовок (header.php)».
В файле «Заголовок (header.php)» между тэгами и необходимо вставить прямо перед закрывающим тэгом вот такой код:
Мне такая настройка открытия страниц в новом окне или во вкладке кажется не очень удобной, потому что при этом открывается множество окон или вкладок в браузере. Но, я знаю, что некоторым, наоборот, будет удобно иметь возможность открывать таким способом внешние и внутренние ссылки на своем сайте.
Плагин Target Blank In Posts And CommentsПлагин Target Blank In Posts And Comments помогает открывать ссылки в комментариях и в постах в новом окне, не затрагивая при этом другие внутренние ссылки на сайте.
Скачать плагин Target Blank In Posts And Comments можно отсюда .
Этот плагин долго не обновлялся, но он хорошо работает на последней версии движка WordPress, и прекрасно справляется со своими обязанностями. Он некоторое время работал и на моем сайте.
Для установки плагина Target Blank In Posts And Comments потребуется войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый» => «Установить плагины» => «Загрузить». После загрузки плагин нужно установить и активировать.
Плагин Target Blank In Posts And Comments не требует никаких настроек и начинает работать сразу после своей активации.
Использование этого плагина позволит вам вернуть посетителей на ваш сайт, которые совершили переход по внешней ссылке с вашего сайта. Ведь часто бывает так, что посетитель долго искал нужную информацию, а потом вдруг совершил переход по заинтересовавшей его ссылке с комментария или со статьи, потом перешел куда-то еще, и таким образом посетитель часто не может найти тот сайт, с которого он первоначально переходил.
Плагин Target Blank In Posts And Comments хорошо справляется со своими функциями, он позволяет задерживать и возвращать посетителей на ваш сайт.
Открытие ссылки с комментариев в новом окнеЕсли вам необходимо открывать ссылки с комментариями без помощи плагина, то это можно сделать после изменения соответствующего кода. Изменения нужно будет произвести в коде файла «comment-template.php», который находится в папке «wp-includes».
Для этого нужно будет подключиться к своему сайту по FTP соединению с помощью таких программ, как FileZilla или Total Commander. Это также можно сделать с помощью файлового менеджера, который находится в Панели управления вашего хостинга.
Файл «comment-template.php» расположен примерно по такому пути - domains/название вашего сайта/public_htlm/wp-includes/comment-template.php.
Внимание! Перед изменением в файле «comment-template.php» обязательно необходимо сделать его копию. В случае неполадок, после изменения в коде файла, ваш сайт может перестать работать в штатном режиме. В этом случае вам придется заменить измененный вами файл, на сохраненную оригинальную копию этого файла.
Со мной произошел подобный случай, и мне пришлось делать откат сайта до работоспособного состояния с помощью технической поддержки моего хостинга. Я не сохранил копию оригинального файла, внес неправильные изменения в код файла, и после этого мой сайт на некоторое время перестал отображаться в Интернете.
Этого бы не произошло, если бы я сделал копию файла перед его изменением, потому что я бы сразу заменил нерабочий на работоспособный файл.
Вам нужно будет скопировать файл «comment-template.php» к себе на компьютер и сохранить его. С сохраненного файла необходимо сделать копию и в ней произвести изменения в коде файла, открыв его при помощи текстового редактора Notepad++. Открыть файл можно и в блокноте, но в блокноте будет очень трудно найти нужные строки кода для его изменения.
Далее следует дополнить строку, начинающую с $return = ”
