Как открыть ссылку в новом окне
Как сделать, чтобы ссылки открывались в новом окне или на новой вкладке
Один из посетителей сайта спросил, как открыть ссылку в новом окне 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» , подготовленной дружной командой проекта Интернет-технологии.ру
html - Открыть ссылку в новой вкладке или окне
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
HTML ссылка в новом окне
Как открыть ссылку в новом окне или новой вкладке.
Открыть ссылку в новом окне или вкладке
Чтобы открыть ссылку в новом окне / вкладке, добавьте target = "_ blank" внутри тега :
target = "_ blank" > Открыть страницу в новом окне
Код создаст эту ссылку:
Открыть страницу в новом окне
В новом окне или в новой вкладке
Невозможно указать, будет ли ссылка открываться в новом окне или в новом окне. таб.Это зависит от настроек браузера.
Открыть ссылку в новом окне с указанным размером
Чтобы открыть ссылку в новом окне, добавьте команду Javascript onclick = "window.open ('text-link.htm', 'name', 'width = 600, height = 400') внутри тега :
Код создаст эту ссылку:
Открыть страницу в новом окне
См. Также
.Как открывать внешние ссылки в новом окне или вкладке с помощью WordPress
Вы хотите открывать внешние ссылки из сообщений вашего блога в новом окне?
Открытие внешних ссылок в новом окне позволяет пользователям переходить по ссылке, не покидая вашего веб-сайта.
Многие новички не могут найти возможность открыть ссылку в окне в основном потому, что она не сразу видна, когда вы добавляете ссылку в WordPress.
В этом руководстве для начинающих мы покажем, как легко открывать внешние ссылки в новом окне на вашем сайте WordPress.Мы также покажем различные способы сделать это, чтобы вы могли выбрать тот, который вам больше всего подходит.
Почему и когда следует открывать внешние ссылки в новом окне?
Внешние ссылки - это ссылки на веб-сайты, которыми вы не владеете или не контролируете. Обычно, если вы добавляете ссылку на внешний веб-сайт, ваши посетители просто покидают ваш сайт, щелкнув ссылку.
Хотя некоторые эксперты по пользовательскому опыту говорят, что вам не следует открывать внешние ссылки в новом окне, мы с этим не согласны.
Видите ли, большинство пользователей легко забывают последний сайт, который они посещали. Если у них открыто несколько вкладок, велика вероятность, что они никогда больше не смогут найти ваш сайт.
Для удобства пользователей мы рекомендуем открывать внешние ссылки в новом окне или на новой вкладке. Таким образом, исходная веб-страница не теряется, и пользователи могут возобновить просмотр вашего веб-сайта, переключившись обратно.
Еще одно преимущество открытия внешних ссылок в новом окне - это увеличение количества просмотров страниц и вовлеченности пользователей на вашем сайте.Пользователи с большей вероятностью вернутся на предыдущую вкладку и дочитают статью.
Пользователи, которые проводят больше времени на вашем сайте, с большей вероятностью будут подписываться на вашу электронную рассылку новостей, подписываться на вас в социальных сетях, оставлять комментарии и покупать ваши продукты.
При этом давайте посмотрим, как легко открывать внешние ссылки в новом окне WordPress.
Открыть внешнюю ссылку в новом окне редактора Гутенберга
Новый редактор блоков WordPress имеет встроенную функцию, которая позволяет открывать внешние ссылки в новом окне.Однако опция скрыта за кнопкой, поэтому новички часто ее не замечают.
Просто отредактируйте сообщение в блоге или страницу, на которую вы хотите добавить внешнюю ссылку. Затем выберите текст, который вы хотите связать, и нажмите кнопку вставки ссылки (или нажмите CTRL + K в Windows / Command + K в Mac).
Появится всплывающее окно для вставки ссылки. Просто введите ссылку и нажмите на стрелку вниз рядом с ней. Это откроет возможность открыть новую вкладку ссылки.
Щелкните, чтобы переключить параметр, а затем нажмите клавишу ввода. Теперь выбранный вами текст будет связан, и вы сможете просмотреть его, посетив свой веб-сайт.
Открыть внешнюю ссылку в новом окне с помощью классического редактора
WordPress представил новый редактор блоков с WordPress 5.0. Многие пользователи предпочитают использовать старый редактор, установив плагин классического редактора.
Если вы все еще пользуетесь классическим редактором, мы рекомендуем вам начать использовать новый редактор. Он современный, быстрый и включает в себя множество новых функций, которые вам не хватает.
Однако, если вы по-прежнему хотите использовать классический редактор, то вы можете открыть ссылку в новом окне с помощью классического редактора.
Во-первых, вам нужно отредактировать сообщение или страницу, на которую вы хотите добавить ссылку. Затем выберите текст, который вы хотите связать, и нажмите кнопку добавления ссылки.
Появится всплывающее окно, в котором вы можете добавить внешнюю ссылку. После этого нажмите на значок шестеренки рядом с ним. Это вызовет всплывающее окно с расширенной вставкой ссылки.
Отсюда вам нужно установить флажок «Открыть ссылку в новой вкладке», а затем нажать кнопку «Обновить», чтобы добавить ссылку.
Теперь вы можете сохранить свой пост и просмотреть его, чтобы увидеть ссылку в действии.
Открыть ссылку в новой вкладке с помощью вкладки текста в классическом редакторе
Если вы используете HTML-редактор с пометкой «Текст» в старом классическом редакторе, то вот как вы открываете внешнюю ссылку в новом окне.
Просто выделите текст, который вы хотите связать, и нажмите кнопку «Добавить ссылку».Это вызовет расширенное всплывающее окно для вставки ссылки.
Отсюда вы можете добавить ссылку и установить флажок «Открыть ссылку в новой вкладке». После этого нажмите кнопку «Добавить ссылку», и всплывающее окно исчезнет. Теперь вы увидите HTML-код ссылки в текстовом редакторе.
Теперь вы можете сохранить изменения и просмотреть сообщение, чтобы увидеть внешнюю ссылку в действии.
Как открывать внешние ссылки в новом окне с помощью HTML
Иногда вам может потребоваться написать HTML, чтобы добавить ссылку в WordPress.Например, когда вы используете режим HTML в новом редакторе блоков или добавляете ссылку в файл шаблона темы WordPress.
Вам нужно будет добавить ссылку, используя следующий HTML-код.
Текст ссылки
Просто замените example.com на URL-адрес внешней ссылки, а текст ссылки - на текст, который вы хотите связать.
Целевой параметр в этом коде указывает браузерам открывать ссылку в новом окне или на новой вкладке.
Автоматически открывать все внешние ссылки в новом окне с помощью плагина WordPress
Может показаться, что вручную проверять параметр для каждой внешней ссылки, которую вы добавляете, требует дополнительной работы. Однако со временем вы к этому привыкнете.
Если вы ведете блог с несколькими авторами или часто забываете открывать внешние ссылки в новой вкладке, вы можете использовать для этого плагин.
Во-первых, вам необходимо установить и активировать плагин «Открыть внешние ссылки в новом окне». Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.
Плагин работает "из коробки" и автоматически открывает внешние ссылки в новом окне.
Это фактически не меняет внешние ссылки в сообщениях вашего блога. Вместо этого он использует JavaScript для открытия внешних ссылок в новом окне.
Примечание: Имейте в виду, что при деактивации плагина не будут открываться внешние ссылки в новом окне.
Мы надеемся, что эта статья помогла вам узнать, как легко открывать внешние ссылки в новом окне WordPress.Вы также можете увидеть наш полный список самых полезных советов, приемов и приемов WordPress, которые вы можете использовать на своем веб-сайте.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.
.javascript - Открыть URL-адрес в новой вкладке (а не в новом окне)
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии
