Как сделать гиперссылку в браузере

Обновлено: 06.07.2024

HTML-код для открытия ссылок в новой вкладке или окне браузера

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

Предпосылки

Поскольку посетитель не указал, какой веб-редактор он использовал, я буду предполагать, что он работает непосредственно в HTML.

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

Например, если вы используете Expression Web, вы можете изменить HTML-код своей веб-страницы, переключившись в режим кода. Инструкции по этому поводу можно найти в статье Как вставить HTML-код на веб-страницу с помощью Expression Web. Точно так же пользователи Dreamweaver могут выполнить шаги, описанные в разделе «Как вставить необработанный HTML-код в Dreamweaver», пользователи BlueGriffon — в руководстве «Как вставить HTML-код в BlueGriffon», а пользователи KompoZer — в руководстве «Как вставить HTML-код в KompoZer».

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

Короткий ответ: просто добавьте атрибут target="_blank" к своим ссылкам (тегам привязки).

Например, если у вас есть ссылка со следующим текстом:

Измените вышеприведенное так, чтобы теперь было сказано:

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

Обратите внимание, что если ваша веб-страница использует "строгий" DOCTYPE XHTML 1.0 или 1.1, вы не сможете сделать вышеперечисленное, и ваша страница по-прежнему будет проверяться как правильная. Однако я подозреваю, что их практически никто не использует, так что не волнуйтесь, если вы не понимаете, что я только что сказал в этом абзаце. Тем не менее, "переходные" версии этих DOCTYPE подходят, поскольку целевой атрибут все еще поддерживается там.

Если вы используете Expression Web, Dreamweaver, BlueGriffon или KompoZer, просто щелкните в любом месте ссылки, которую вы хотите изменить, переключитесь в режим, позволяющий изменить код HTML (см. учебные пособия, перечисленные ранее в разделе «Предварительные условия»). чтобы узнать, как это сделать), и добавьте атрибут target="_blank".

Это не дает той пользы, о которой вы думаете

Я знаю, что у некоторых новых веб-мастеров сложилось впечатление, что открытие внешних ссылок в новом окне помогает удержать людей от ухода с вашего сайта. Это ошибочное предположение. Если кто-то нажмет на ссылку и захочет вернуться на ваш сайт, он просто нажмет кнопку «Назад» в своем браузере. Большинство людей, даже не разбирающихся в компьютерах, изучают эту функцию своего браузера в течение короткого времени после знакомства с Интернетом. Кроме того, опытные пользователи узнают, как щелкнуть ссылку правой кнопкой мыши и выбрать "Открыть в новой вкладке" (или окне), когда им нужно, чтобы ссылка отображалась в отдельной вкладке или окне.

Когда вы создаете ссылки, которые открываются в новом окне, вы фактически предотвращаете возвращение новичков на ваш сайт. Вы можете подумать, что они знают, как просто вернуться к исходному окну. Мой опыт общения с такими людьми говорит об обратном; они зашли в тупик из-за того, что кнопка «Назад» не работает, и даже не осознают, что смотрят на новую вкладку или окно. Когда они не могут понять, как решить проблему, они сдаются и переходят к другим вещам.

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

Это делает ваш сайт уязвимым для фишинговых атак

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

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

Эта уязвимость не является гипотетической.Сотрудники группы безопасности Google отметили «значительное количество сообщений» о том, что такие «вкладки» используются для доставки вредоносного ПО.

Технические подробности (только для тех, кто заинтересован): вновь открытый сайт получает ограниченный доступ к вашей странице через объект JavaScript window.opener. Это объект для чтения/записи, которым они могут манипулировать. У него есть свойство, называемое window.opener.location, которое можно изменить, заставив браузер перейти на новый URL-адрес вместо того, чтобы оставаться на вашей странице. Если вы не понимаете этот абзац, пропустите его. Это просто техническая версия объяснения, данного ранее.

Вы можете предотвратить это в некоторых браузерах, добавив rel="noopener noreferrer" к своей ссылке. С этим добавлением приведенный выше пример становится:

Теоретически, либо rel="noopener", либо rel="noreferrer" достаточно для предотвращения этой проблемы, при этом rel="noopener" является правильным атрибутом для использования. (Другой, rel="noreferrer" , имеет побочный эффект, заключающийся в том, что браузер также будет скрывать URL перехода.) Однако в настоящее время не все браузеры поддерживают rel="noopener" . Аналогично, rel="noreferrer" также не поддерживается некоторыми браузерами. Поскольку список браузеров, поддерживающих любой из атрибутов, не идентичен, если вам нужна эта защита от максимально возможного подмножества браузеров, вам, вероятно, придется использовать оба.

При этом обходной путь помогает только в более поздних версиях Chrome, Firefox и Safari. Internet Explorer не имеет такой возможности, хотя мой беглый тест показал, что версия 11 невосприимчива к атакам в зоне безопасности по умолчанию. Я не уверен в Microsoft Edge.

Другими словами, описанный выше метод не на 100% надежен. Лучший способ избежать этой проблемы — использовать обычные ссылки без target="_blank" .

Заключение

Моя общая рекомендация — по возможности не открывать ссылки в новом окне или вкладке. Конечно, могут быть определенные случаи, когда это необходимо (вот почему такое средство существует в первую очередь, для тех редких случаев, когда это может потребоваться). Если это так, вы можете предупредить своих посетителей, сказав что-то вроде «открывается в новом окне» рядом со своей ссылкой (если это уместно). Это не поможет обычному интернет-пользователю, который не будет знать, о чем вы говорите и как с этим бороться, и не защитит их от атак с использованием вашего сайта, но, по крайней мере, вы не будете раздражать более опытные посетители Интернета.

Эта статья защищена авторским правом. Пожалуйста, не воспроизводите и не распространяйте эту статью полностью или частично в любой форме.

Он появится на вашей странице как:

Авторское право © 2015-2019 Кристофер Хенг. Все права защищены.
thesitewizard™, thefreecountry™ и HowToHaven™ являются товарными знаками Кристофера Хенга.
Последнее обновление этой страницы состоялось 23 декабря 2019 года.

В этом уроке вы узнаете, как создавать ссылки на другие страницы в HTML.

Создание ссылок в HTML

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

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

По умолчанию в большинстве браузеров ссылки отображаются следующим образом:

Непосещенная ссылка подчеркнута и окрашена в синий цвет.
Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
Активная ссылка подчеркнута и окрашена в красный цвет.

Однако вы можете перезаписать это с помощью CSS. Узнайте больше о стилях ссылок.

Синтаксис ссылки HTML

Ссылки указываются в HTML с помощью тега.

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

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

Пример

Атрибут href указывает цель ссылки. Его значение может быть абсолютным или относительным URL-адресом.

Установка целей для ссылок

Атрибут target сообщает браузеру, где открыть связанный документ. Существует четыре определенных цели, и имя каждой цели начинается с символа подчеркивания ( _ ):

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

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

Пример

Совет. Если ваша веб-страница размещена внутри iframe, вы можете использовать target="_top" в ссылках, чтобы выйти из iframe и отобразить целевую страницу в полном окне браузера.

Создание привязок к закладкам

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

Пример

Создание ссылок для скачивания

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

В следующем примере мы создали ссылки для загрузки файлов ZIP, PDF и JPG.

Пример

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

Крис Койсигава

Вкладки — это здорово, не так ли? Они позволяют многозадачному человеку одновременно совмещать множество онлайн-задач.

Сейчас вкладки настолько распространены, что при нажатии на ссылку она, скорее всего, откроется в новой вкладке.

Если вы когда-нибудь задумывались, как сделать это со своими собственными ссылками, вы обратились по адресу.

Якорный элемент

Чтобы создать ссылку на веб-странице, необходимо поместить элемент (текст, изображение и т. д.) в элемент привязки ( ) и установить для его атрибута href URL-адрес, на который вы хотите установить ссылку.

Если щелкнуть ссылку выше, браузер откроет ссылку в текущем окне или вкладке. Это поведение по умолчанию в каждом браузере.

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

Целевой атрибут

Этот атрибут сообщает браузеру, как открыть ссылку.

Чтобы открыть ссылку в новой вкладке, просто установите для атрибута target значение _blank :

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

Проблемы безопасности с target="_blank"

Я настоятельно рекомендую всегда добавлять rel="noreferrer noopener" к элементу привязки всякий раз, когда вы используете целевой атрибут:

В результате получается следующий результат:

Атрибут rel устанавливает связь между вашей страницей и URL-адресом ссылки. Установка значения noopener noreferrer предназначена для предотвращения фишинга, известного как вкладки.

Что такое вкладки?

Табуляция, иногда называемая обратной табуляцией, представляет собой эксплойт, который использует поведение браузера по умолчанию с target="_blank" для получения частичного доступа к вашей странице через API window.object.

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

Затем, когда человек вернется на вкладку с вашей страницей, вместо этого он увидит фальшивую страницу входа и может ввести свои данные для входа.

Если вам интересно узнать больше о том, как работает табуляция и что злоумышленники могут сделать с помощью эксплойта, ознакомьтесь со статьей Алекса Юмашева и этой статьей OWASP.

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

Вкратце

С помощью HTML легко открыть ссылку в новой вкладке. Вам просто нужен элемент привязки ( ) с тремя важными атрибутами:

Атрибут href задает URL-адрес страницы, на которую вы хотите сослаться
Атрибут target имеет значение _blank , что указывает браузеру открывать ссылку в новой вкладке/окне в зависимости от настроек браузера.
Атрибут rel имеет значение noreferrer noopener, чтобы предотвратить возможные вредоносные атаки со страниц, на которые вы ссылаетесь.

И снова полный рабочий пример:

Что приводит к следующему выводу в браузере:

Еще раз спасибо за чтение. Удачного кодирования.

Крис Койсигава

Прочитайте больше сообщений этого автора.

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

Научитесь программировать бесплатно.Учебная программа freeCodeCamp с открытым исходным кодом помогла более 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

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

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

Сегодняшний краткий совет объясняет, как использовать специальные веб-протоколы внутри гипертекстовых ссылок, чтобы заставить веб-страницы или файлы открываться в определенных браузерах в Windows или iOS.

Чтобы увидеть, как заставить ссылки открываться в браузере Microsoft Edge, вставьте обычный тег (тег привязки) в исходный код страницы, например:

Теперь поместите microsoft-edge: перед гипертекстовой ссылкой:

Ниже показан скриншот страницы, содержащей одну из специальных ссылок "microsoft-edge", просматриваемых в Firefox. Как видите, это выглядит как стандартная гипертекстовая ссылка, но если пользователь щелкнет по этой специальной ссылке, он откроет браузер Microsoft Edge:

Стивен Гласскис

Сама Microsoft использует этот же метод на своей странице Bing Rewards. Компания поощряет пользователей дополнительными призовыми баллами, если Microsoft Edge используется с Bing, и помогает пользователям начать работу с помощью специальной ссылки «Получить бонус сейчас», выделенной ниже:

Стивен Гласскис

Просмотр свойств показывает, что Microsoft указывает протокол "microsoft-edge:" внутри URL-адреса перенаправления для элемента:

iOS и GoodReader

Для iOS существует аналогичный способ заставить ссылки или документы открываться только на этих устройствах, если установлено приложение GoodReader. А если вы еще не слышали о GoodReader, вам стоит познакомиться, потому что это одно из самых полезных служебных приложений для iOS. Наряду с превосходными функциями просмотра PDF и аннотирования, GoodReader отлично подходит как файловый менеджер и утилита-проводник. Используйте его, чтобы легко просматривать, копировать, удалять и переименовывать файлы или папки на FTP-сайтах, общих ресурсах в локальной сети и популярных облачных хранилищах.

Опять же, используя наш пример URL:

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

Чтобы проиллюстрировать эту концепцию, я создал страницу Apache и открыл ее в браузере Safari iOS на iPad. На снимке экрана ниже показана еще одна синяя гиперссылка, которая на самом деле является ссылкой Ghttp GoodReader. Использование псевдо-«протокола ghttp» заставляет Safari открывать GoodReader, который, в свою очередь, загружает связанный файл — в данном случае PDF-документ.

Или, если хотите, подключите iPad или iPhone к домашнему компьютеру, а затем переместите сохраненные файлы с помощью iTunes из хранилища GoodReader на ПК или жесткий диск Mac.

Стивен Гласскис

При нажатии на ссылку Safari выдает запрос "Открыть в GoodReader?" диалог:

Нажмите кнопку «Открыть», чтобы GoodReader «делал свое дело» — сохранял файл на iPad или iPhone.

Эта статья "Как открывать определенные веб-браузеры с помощью гиперссылок" была первоначально опубликована ITworld .

Стивен Гласскис – блогер, наблюдатель за блогами, писатель и разработчик. Постоянный поклонник веселых людей, собак и кофе.

Читайте также: