Ссылка на новое окно | htmlbook.ru
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется атрибут target=»_blank» тега <a>.
Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт. В остальных случаях лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя с толку.
Так как ссылки на текущее или новое окно ничем не отличаются друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Пример 1. Создание ссылки на новое окно
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
</head>
<body>
<p><a href="http://htmlbook.ru">Обычная ссылка на сайт www.
htmlbook.ru</a></p>
<p><a href="http://htmlbook.ru" target="_blank">Ссылка
открывает новое окно на сайт www.htmlbook.ru</a></p>
</body>
</html>
Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, то нет необходимости добавлять во все теги <A> атрибут target=»_blank». Код можно сократить, если вначале страницы добавить <base target=»_blank»>, как показано в примере 2.
Пример 2. Использование тега <base>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылки</title> <base target="_blank"> </head> <body> <p><a href="1.html">Ссылка откроется в новом окне</a></p> <p><a href="2.html" target="_self">Ссылка откроется в текущем окне</a></p> </body> </html>
Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно,
если добавить к тегу <a> атрибут target=»_self»,
как показано в данном примере.
Учтите, что атрибут target не является валидным для строгого <!DOCTYPE>.
Как открыть ссылку в новом окне или на новой вкладке?
Один из посетителей сайта спросил, как открыть ссылку в новом окне 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. Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать 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. Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать 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» , подготовленная редакцией проекта.
Открыть ссылку в новом окне
Довольно распространенный вид действий, при работе в интернет-браузере, открытие ссылки, не закрывая текущей страницы (и наверное самый не эффективный с точки зрения понимания информации). Часто бывает так, что когда мы ищем информацию в интернете, мы открываем огромное количество вкладок и окон, зачастую обрастая ими. Это приводит к тому, что дальнейшее восприятие информации становится невозможным. Инструкция сегодня, как раз о том, как открывать ссылки во вкладках и окнах в браузере, и не терять текущей страницы (на случай, если Вы не теряетесь во вкладках и окнах).
Реклама на nextontext.ru
Открыть ссылку в новом окне
Хотите открыть ссылку в отдельном окне? Это довольно просто сделать. Удерживайте нажатой клавишу “Shift”, затем щелкните ссылку которую хотите открыть в отдельном окне.
Эта функция дублируется в контекстном меню браузера. Открыть ссылку в новом окне можно нажав по ней правой клавишей мыши и выбрать “Открыть ссылку в новом окне».
Открыть ссылку в новой вкладке
Если Вы хотите остаться в прежнем окне браузера, и открыть в нем дополнительную вкладку, просто наведите курсор на ссылку и нажмите среднюю кнопку мыши. Дополнительная вкладка откроется в том же окне браузера, где вы работали.
Также, как и в предыдущем случае, открытие вкладки заложено в контекстном меню браузера. Просто наведите курсор на ссылку — нажмите правой клавишей мыши — в контекстном меню выберите опцию “Открыть ссылку в новой вкладке”.
Реклама на nextontext.ru
Ничего сложного друзья! Также хочу заметить, что эти методы работают во всех основных интернет-браузерах, доступных для Microsoft Windows.
Послесловие
Интернет так разнообразен и порой очень сложен в понимании, поэтому зачастую, если Вы ищете одно, в поисковой выдаче может выпадать несколько другое. Равно как с открытием ссылки в новом окне или вкладке. Кто-то из моих читателей искал именно по этому запросу, намереваясь найти ответ как в браузере открывать ссылки в новых окнах и вкладках, а кто-то мог искать ответ на вопрос, как открывать ссылку в новом окне по нажатии на нее, имея в виду верстку HTML.
Открыть ссылку в новой вкладке или окне html
Итак, Вы вставляете ссылку себе на сайт и хотите, чтобы по нажатию на эту ссылку открытие происходило в дополнительном окне.
Представим, Вы пишите ссылку таким образом:
LinkЧтобы ссылка открывалась так как Вам нужно (в новом окне), необходимо добавить атрибут target=»_blank», и тогда ссылка примет следующий вид, и будет открываться по нажатию в новом окне:
LinkКак открывать вкладку в новом окне? — Хабр Q&A
Добрый день,Есть код :
<div> <div> <div> <div> <figure><img alt="ОКНА" src="media/widgetkit/icon_okna-349f469ed987244dda27ec14f10fb941.png" /> <img alt="ОКНА" src="media/widgetkit/cvet_okna-6e04448160c2590d7feb8f57b0bc782e.png" /> <div> </div> </figure> </div> <div>ОКНА</div> </div> <div> <div> <figure><img alt="ДВЕРИ" src="media/widgetkit/icon_dveri-ff15563210dba781d6b8d5e284858229.png" /> <img alt="ДВЕРИ" src="media/widgetkit/cvet_dver-de947d606fdf587635668dfd7d31ec5c.png" /> <div> </div> </figure> </div> <div>ДВЕРИ</div> </div> <div> <div> <figure><img alt="ВХОДНЫЕ ГРУППЫ" src="media/widgetkit/icon_vhodnie_gruppi-4bfce28bc79d18f84132e1f17dc71acd.png" /> <img alt="ВХОДНЫЕ ГРУППЫ" src="media/widgetkit/cvet_vhodnye_gruppy-2286623c97a38a0d2f2d811ab074d7ea.png" /> <div> </div> </figure> </div> <div>ВХОДНЫЕ ГРУППЫ</div> </div> <div> <div> <figure><img alt="ПЕРЕГОРОДКИ" src="media/widgetkit/icon_peregorodki-1d051ea418cad5a438b0e63699dc3416.png" /> <img alt="ПЕРЕГОРОДКИ" src="media/widgetkit/cvet_ofisnaya_peregorodka-89063888696319346175cbbc00cf0708.png" /> <div> </div> </figure> </div> <div>ПЕРЕГОРОДКИ</div> </div> <div> <div> <figure><img alt="Остекление" src="media/widgetkit/icon_osteklenie-1dab42910f5e061d841ac64738d317b2. png" /> <img alt="Остекление" src="media/widgetkit/cvet_osteklenie-7c0f470653d3d3344ffc448e2823ffd3.png" /> <div> </div> </figure> </div> <div>ОСТЕКЛЕНИЕ</div> </div> <div> <div> <figure><img alt="ИНОЕ" src="media/widgetkit/icon_inoe-bb1e5eb5a32ec05abd1b8b084650a995.png" /> <img alt="ИНОЕ" src="media/widgetkit/cvet_inoe-0d020c32b573e6bd2d4dbad14cd04fd4.png" /> <div> </div> </figure> </div> <div>ИНОЕ</div> </div> </div> </div>
Не открывается в новой вкладке при нажатии на среднюю кнопку, так же нет пункта открыть в новой владке если вывести меню правой кнопкой мыши.
Как поправить подскажите пожалуйста.
Открытие ссылки в новом окне из меню Битрикс
Этап 1. Редактирование пункта меню Битрикс
1.
Находим необходимое меню ( содержащее ссылку, которую необходимо открывать в новом окне ), в примере Меню типа «left».
2. В режиме редактирования меню переходим в расширенный режим
3. Пункту меню, который необходимо открывать в новом окне, задаем дополнительные параметры
Название: target Значение: target="_blank"
4. Сохраняем меню
Альтернативный метод
Метод для тех, кто не любит редактор меню. Параметр ссылке можно прописать изменив сам
1. Открываем файл меню в режиме Редактировать как PHP
2. Находим в коде необходимый нам пункт меню
Array( "Создание сайтов на Битрикс", "https://SMSdesign.com.ua", Array(), Array(), "" ),и добавляем в него
Array("target"=>"target=\"_blank\""),
""
получаем конструкцию типаArray( "Создание сайтов на Битрикс", "http://SMSdesign.
com.ua",
Array(),
Array("target"=>"target=\"_blank\""),
""
),
3. Сохраняем файл
Если необходимо открывать в новом окне более одной ссылки ( пункта ), то манипуляции первого этапа необходимо провести для каждой из них.
Этап 2. Редактирование шаблона компонента меню
1. В режиме «Правки» находим нужное нам меню и выбираем в его настройках пункт «Редактировать шаблон компонента»
Если необходимо, копируем шаблон компонента, как нам предлагает Битрикс
2. Находим код
<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>заменяем его на
<a href="<?=$arItem["LINK"]?>" <?=$arItem["PARAMS"]["target"]?>><?=$arItem["TEXT"]?></a>
3. Сохраняем файл.
Готово. Наши пункты стали открываться в новом окне.
Как использовать HTML для открытия ссылки в новой вкладке
Вкладки — это здорово, не правда ли? Они позволяют каждому из нас, кто выполняет несколько задач одновременно, выполнять несколько онлайн-задач.
Вкладки сейчас настолько распространены, что, когда вы нажимаете на ссылку, вполне вероятно, что она откроется в новой вкладке.
Если вы когда-нибудь задумывались, как это сделать с помощью собственных ссылок, вы попали в нужное место.
Элемент привязки
Чтобы создать ссылку на веб-странице, вам необходимо обернуть элемент (текст, изображение и т. Д.) В элемент привязки ( ) и установить его атрибут href к URL-адресу, на который вы хотите создать ссылку.
Посетите freeCodeCamp .
Посетите freeCodeCamp.
Если вы щелкните ссылку выше, браузер откроет ссылку в текущем окне или вкладке. Это поведение по умолчанию в каждом браузере.
Чтобы открыть ссылку на новой вкладке, нам нужно взглянуть на некоторые другие атрибуты других атрибутов элемента привязки.
Целевой атрибут
Этот атрибут сообщает браузеру, как открыть ссылку.
Чтобы открыть ссылку в новой вкладке, просто установите для атрибута target значение _blank :
Проверьте freeCodeCamp .
Теперь, когда кто-то нажимает на ссылку, она открывается в новой вкладке или, возможно, в новом окне в зависимости от настроек браузера пользователя.
Проблемы безопасности с
target = "_ blank" Я настоятельно рекомендую всегда добавлять rel = "noreferrer noopener" к элементу привязки всякий раз, когда вы используете target attribute:
Проверить freeCodeCamp .
В результате получится следующий результат:
Проверить freeCodeCamp.
Атрибут rel устанавливает связь между вашей страницей и связанным URL-адресом.
Установка noopener noreferrer предназначена для предотвращения такого типа фишинга, как табнаббинг.
Что такое табнаббинг?
Табнаббинг, иногда называемый обратным табнабингом, — это эксплойт, который использует поведение браузера по умолчанию с target = "_ blank" , чтобы получить частичный доступ к вашей странице через окно .объект API.
При переходе на табуляцию страница, на которую вы ссылаетесь, может привести к перенаправлению вашей страницы на поддельную страницу входа. Большинству пользователей будет сложно это заметить, потому что фокус будет на только что открытой вкладке, а не на исходной вкладке с вашей страницей.
Затем, когда человек переключается обратно на вкладку с вашей страницей, он вместо этого увидит поддельную страницу входа и может ввести свои данные для входа.
Если вам интересно узнать больше о том, как работает табнабинг и что плохие актеры могут сделать с эксплойтом, ознакомьтесь со статьей Алекса Юмашева и этой статьей OWASP.
Если вы хотите увидеть рабочий пример safe , посетите эту страницу и ее репозиторий GitHub для получения дополнительной информации об эксплойте и атрибуте rel .
Резюме
С помощью HTML легко открыть ссылку в новой вкладке. Вам просто нужен элемент привязки ( ) с тремя важными атрибутами:
- Атрибут
hrefустановлен на URL-адрес страницы, на которую вы хотите ссылаться. - Атрибут цели
_blank, который сообщает браузеру открыть ссылку в новой вкладке / окне, в зависимости от настроек браузера. - Атрибут
relустановлен наnoreferrer noopener, чтобы предотвратить возможные злонамеренные атаки со страниц, на которые вы ссылаетесь
Опять же, вот полный рабочий пример:
Проверьте freeCodeCamp .
В результате в браузере будет получен следующий результат:
Проверьте freeCodeCamp.
Еще раз спасибо для чтения. Удачного кодирования.
Открытие ссылок в новых окнах и вкладках браузера
С 1999 года существует твердое руководство по удобству использования в Интернете: воздерживаются от открывать новые окна браузера по нескольким причинам. Все это также применимо к открытию новых вкладок браузера и действует сегодня:
- Чем больше окон или вкладок, тем больше загромождено информационное пространство пользователя, и для управления им требуется больше усилий.
- Новые окна или вкладки могут дезориентировать, пользователи часто не осознают, что открылось новое окно или вкладка. Эта проблема усугубляется на мобильных устройствах, где старое окно никогда не отображается.
- Менее техническим пользователям сложно управлять несколькими окнами и вкладками, особенно на мобильных устройствах. (На планшетах, где у пользователей может быть несколько окон и вкладок для браузера, это еще более запутанно.)
- Новые окна или вкладки не позволяют использовать кнопку Назад для возврата на предыдущую страницу и заставляют пользователя прилагать усилия, чтобы вернуться к предыдущему содержимому.
- Новые окна или вкладки не подходят для слепых или слабовидящих пользователей, особенно когда они открываются за пределами увеличенной области.
(На планшетах, где у пользователей может быть несколько окон и вкладок для браузера, это еще более запутанно.) Обычно есть одна веская причина для открытия страницы в новом окне, и это то, что пользователю нужно будет обратиться к этому контенту, чтобы выполнить задачу в другом окне. Например, кому-то, кто занимается уплатой налогов, может потребоваться обратиться к документу, подробно описывающему различные законы и постановления в одном окне, а программное обеспечение для подготовки налогов — в другом.Или, если кто-то изучает сложную тему, например медицину, может потребоваться обратиться к материалам курса в одном окне, а информацию о лекарствах и дозировках — в другом.
В таких ситуациях пользователю может быть полезно обратиться к этому второму окну во время работы с первым — при условии, конечно, что два окна могут отображаться на экране рядом.
Два следующих обобщения часто используются в качестве обоснования для открытия ссылок в новых вкладках или окнах браузера:
- Это ссылка на другой тип контента. Однако этот аргумент проблематичен, потому что он предполагает, что пользователи всегда будут делать одно и то же с определенными форматами файлов, что не всегда так. Например, в одном случае мне может потребоваться распечатать PDF-файл флаера для размещения на стене в моем офисе, но в другом случае я могу обратиться к многостраничному PDF-файлу с инструкциями на моем мобильном телефоне, чтобы собрать кусок мебель. В первом случае открытие PDF-файла в новой вкладке было бы благоприятным, поскольку я, скорее всего, закончу работу с документом после печати и закрою его. Во втором случае мне может потребоваться ссылка на информацию на веб-сайте, где изначально были указаны направления. Поскольку я использую свой мобильный телефон, открытие PDF-файла на той же вкладке сохранит кнопку «Назад» и больше подходит для моего канала, контекста и задачи. Однако, если бы я был на рабочем столе и мне нужно было сослаться на PDF-файл и веб-сайт вместе, было бы лучше открыть его в новом окне.
- Это удержит пользователей на нашем сайте. Это рассуждение предполагает, что вкладка или окно, содержащее ваш сайт, останется открытым и будет служить долгим (э) напоминанием для пользователей. Несмотря на то, что это может быть правдой, а иногда даже полезно (особенно, как упоминалось ранее, если пользователям нужно вернуться на ваш сайт, чтобы завершить свою задачу), вы также должны помнить следующее:
- Необоснованно добавляя дополнительное окно или вкладку, вы увеличиваете нагрузку на пользователей по управлению информацией.
- Пользователи должны будут перейти в новое окно или вкладку, чтобы выполнить свою задачу, и нет никакой гарантии, что они вернутся на ваш сайт после этого.
- Люди не глупы: они поймут цель дополнительных окон и вкладок и могут начать не доверять вашему сайту и бренду.
- Если люди хотят покинуть веб-сайт, приложение или документ, они сделают это на своих условиях.
- Необоснованно добавляя дополнительное окно или вкладку, вы увеличиваете нагрузку на пользователей по управлению информацией.
В первом случае открытие PDF-файла в новой вкладке было бы благоприятным, поскольку я, скорее всего, закончу работу с документом после печати и закрою его. Во втором случае мне может потребоваться ссылка на информацию на веб-сайте, где изначально были указаны направления. Поскольку я использую свой мобильный телефон, открытие PDF-файла на той же вкладке сохранит кнопку «Назад» и больше подходит для моего канала, контекста и задачи. Однако, если бы я был на рабочем столе и мне нужно было сослаться на PDF-файл и веб-сайт вместе, было бы лучше открыть его в новом окне.
Причина, по которой мы не можем просто обобщить, когда открывать ссылку в новой вкладке (или окне) браузера по сравнению с тем, чтобы пользователи оставались на той же вкладке браузера, заключается в том, что потребности, ожидания и реакции наших пользователей не зависят от формата файла. или тип ссылки (внутренняя или внешняя).Это решение гораздо больше связано с контекстом, задачей людей и тем, что они будут делать дальше с контентом, размещенным по ссылке.
Факторы, которые следует учитывать
В нашем недавнем исследовании пользователей мы заметили, что реакция участников на открытие ссылок в новой вкладке или окне зависит от:
- Контекст: Пользователи, выполняющие обычные, непринужденные задачи, гораздо меньше беспокоились о новых вкладках или окнах браузера, чем пользователи, которые находились в сценариях с высокой нагрузкой или срочностью.
- Устройство: Мобильный Пользователи больше раздражались, когда ссылки открывались в новых вкладках, поскольку они не могли использовать кнопку Назад для возврата к предыдущему экрану, а доступ к предыдущей вкладке был затруднен.
- Задача: Открытие страницы в новом окне или на новой вкладке было положительно воспринято, когда задача включала один из следующих типов действий:
а. Сравнение содержимого на вкладках или окнах браузера. Например, менеджер контента может редактировать веб-страницу в системе управления контентом на одной вкладке или в одном окне и просматривать предварительный просмотр страницы в другой.Когда ссылка на предварительный просмотр открывается в новой вкладке браузера, менеджеры контента могут легко увидеть, как изменения в системе управления контентом влияют на внешний вид страницы перед публикацией. То же самое можно сделать и с двумя отдельными окнами браузера.
г. Объединение информации из разных вкладок или окон. Например, нетехнический пользователь, пытающийся заполнить документы для открытия новой компании в сети, использовал два окна браузера рядом. В одном из окон было три открытых вкладки, каждая из которых содержала разные справочные материалы с одного и того же веб-сайта.Поскольку каждая ссылка открывалась в новой вкладке, она могла легко использовать их вместе, чтобы уверенно заполнить форму Устав организации , которую она открыла в другом окне.
У пользователя было два открытых бок о бок окна браузера, пока она заполняла документы, чтобы открыть новую компанию в Интернете. Поскольку для нее это был совершенно новый процесс, открытие веб-страниц и форм в новых окнах и вкладках соответствовало ее естественному замыслу и позволяло ей использовать весь контент вместе. г. Использование нескольких вкладок браузера для отслеживания элементов (как при парковке страниц).
Например, пользователь, покупающий новую яму для костра на Wayfair, оценил, когда страницы с описанием продукта открывались в новых вкладках. Она просмотрела варианты, доступные на странице категории, и, когда она щелкнула по интересующим элементам, страница сведений о продукте открывалась в новой вкладке. Это облегчило отслеживание предметов, которые она хотела более подробно рассмотреть, прежде чем принимать решение о покупке.
г. Использование исходной вкладки браузера в качестве отправной точки для других (например, изучение нескольких альтернатив, перечисленных на исходной странице). Например, один пользователь просматривал папку Google Диска, содержащую ссылки на различные формы и документы. Поскольку каждая ссылка открывалась на новой вкладке, она могла легко закрыть ее, когда закончила, и вернуться на исходную вкладку Google Диска, чтобы получить доступ к следующему документу или форме, в которой она нуждалась.
При таких действиях мы часто видели, как пользователи закрывали вкладки браузера после их завершения (вместо того, чтобы пытаться нажимать кнопку Назад ), поэтому в этих случаях более уместно открывать ссылки в новая вкладка.
Когда не открывать новые окна и вкладки
Для следующих типов задач пользователи НЕ оценили отправку на новую вкладку или окно браузера:
- Быстрая проверка новой страницы с последующим возобновлением действия на исходной вкладке или в окне.Например, когда один пользователь заполнял отчет о расходах, он не мог вспомнить, разрешает ли его организация 18% или 15% чаевых на питание, оплачиваемое компанией. Ссылка на политику компании в отношении расходов сразу же дала ответ, но он открылся в новой вкладке. Пользователь был разочарован, когда заметил, что кнопка браузера Назад не работает, чтобы вернуться к отчету о расходах.
- Многоступенчатые рабочие процессы , в которых новые шаги появлялись в другом окне или на другой вкладке. В этих случаях пользователи предпочитали нажимать кнопку Назад , чтобы перейти к предыдущим шагам процесса, независимо от того, находились ли они на одном или разных сайтах.Например, один пользователь пытался отправить ИТ-заявку на ремонт неисправного принтера. Сначала он просмотрел страницу интрасети, чтобы понять, какой тип тикета открыть. Затем он щелкнул ссылку, которая, как он думал, приведет его к форме, чтобы открыть билет. Вместо этого в новой вкладке появилась домашняя страница совершенно другого веб-сайта. Наконец, когда он нашел ссылку для инициирования запроса на новом веб-сайте, форма открылась еще на одной новой вкладке. Излишне говорить, что он изо всех сил пытался вернуться к исходной странице интрасети, с которой он начал. Открытие ссылок в новых вкладках было минус проблематичным, когда не было следующего шага, и задача пользователя по существу завершалась вскоре после нажатия на ссылку. Пользователи могли просто закрыть вкладку, не опасаясь потерять историю своих сеансов.
- Многие вкладки или окна уже открыты. У занятых пользователей часто одновременно открыто много вкладок в браузере, когда они работают, делают покупки или просматривают страницы. Если у пользователей уже было открыто много вкладок, их часто раздражало открытие еще одной.Когда пользователи неоднократно сталкивались со ссылками, открывающимися в новых вкладках, они часто хотели останавливаться и делать паузу между задачами, чтобы очистить свои многочисленные вкладки браузера. Такое служебное поведение указывало на то, что они почувствовали, что интерфейс стал загроможденным и неуправляемым.
Пользователь был разочарован, когда заметил, что кнопка браузера Назад не работает, чтобы вернуться к отчету о расходах.
Открытие ссылок в новых вкладках было минус проблематичным, когда не было следующего шага, и задача пользователя по существу завершалась вскоре после нажатия на ссылку. Пользователи могли просто закрыть вкладку, не опасаясь потерять историю своих сеансов. Вот почему важно следить за тем, чтобы пользователи понимали свою задачу, контекст использования и среду, прежде чем открывать страницу в новой вкладке или окне.
Возможные задачи пользователя могут быть слишком разными, поэтому вы можете не знать наверняка, какое решение будет лучшим.Если в этих случаях вы решите открыть ссылку в новой вкладке или окне браузера, будет использовать контекстные сообщения и, возможно, даже значок , чтобы пользователи знали об этом до того, как они нажмут.
PDF-файлы и другие документы NonHTML
Пользователи часто сбиваются с толку и разочаровываются, когда веб-сайты ссылаются на документы, отличные от HTML, такие как PDF-файлы, документы Word, электронные таблицы и файлы презентаций, вместо того, чтобы предлагать контент непосредственно на веб-странице.Это связано с тем, что эти форматы файлов предлагают пользователям значительно иной опыт, чем обычные HTML-страницы.
Резкое переключение контекста может раздражать людей.
Хотя мы в первую очередь рекомендуем размещать весь цифровой контент на веб-страницах HTML вместо использования документов, отличных от HTML, и объединения цифрового опыта на как можно меньшем количестве веб-сайтов или приложений, мы признаем, что в определенных ситуациях, например во внутренних сетях, это не всегда возможно, и ссылки на другие форматы файлов существуют.
В свете соображений, обсужденных выше и в других местах, вот наши рекомендации относительно этих документов:
- Загружайте файлы в собственном формате напрямую по ссылкам, размещенным в Интернете. Лучше всего использовать страницы шлюза HTML для обобщения и ссылки на такие файлы, как PDF-файлы, документы Word или Pages, электронные таблицы Excel или Numbers, а также презентации PowerPoint или Keynote. При щелчке по ссылке прямая загрузка файла на компьютер пользователей позволит им открывать и редактировать документ в выбранном ими программном обеспечении. В некоторых случаях этот подход может быть более жизнеспособным, чем открытие PDF-документа в браузере. Однако это решение, а также то, открывать ли PDF-файл на той же вкладке или в новой вкладке или окне браузера, полностью зависит от того, что пользователю нужно с ним делать. В общем, избегайте чтения PDF-файлов на экране, насколько это возможно. PDF хорош для печати документов, вот и все.
- Открывайте ссылки на документы PDF в новых вкладках на рабочем столе. Обычно , участникам нашего исследования требовалось объединить информацию в PDF-файле с информацией в исходной вкладке, поэтому им часто приходилось перемещаться между ними.Или они хотели распечатать PDF-файл. В любом случае, когда они были закончены, они часто закрывали PDF-файл, а не нажимали кнопку Назад . Опять же, если ваши пользователи в основном выполняют задачу на мобильных устройствах, не используйте PDF-файл в первую очередь или, если необходимо, по крайней мере, откройте его на той же вкладке, чтобы им было легче вернуться.
В некоторых случаях этот подход может быть более жизнеспособным, чем открытие PDF-документа в браузере. Однако это решение, а также то, открывать ли PDF-файл на той же вкладке или в новой вкладке или окне браузера, полностью зависит от того, что пользователю нужно с ним делать. В общем, избегайте чтения PDF-файлов на экране, насколько это возможно. PDF хорош для печати документов, вот и все.
Подводя итоги: что делать и когда
По большей части, всегда открывают ссылки в одной и той же вкладке или окне браузера .Однако, если вы предполагаете, что открытие новой вкладки или окна может помочь пользователям в их задаче, не основывайте это решение только на типе ссылки или содержания. Положитесь на методы наблюдательного исследования, такие как юзабилити-тестирование, контекстный запрос и полевые исследования, которые помогут вам сделать правильный выбор.
Если вы замечаете, что люди естественным образом тяготеют к одновременному просмотру нескольких фрагментов контента в отдельных окнах браузера, вероятно, будет безопасно открывать эти ссылки в новых окнах, чтобы поддержать их естественные склонности.Однако, если пользователи полагаются на вкладку браузера как на отправную точку и возвращаются к ней позже, внимательно просмотрите содержимое одной вкладки перед переключением на другую (вместо одновременного просмотра содержимого) или если они используют браузер.
окно для организации и отслеживания нескольких вкладок, это хороший признак того, что открытие таких ссылок в новых вкладках может быть приемлемым подходом. Если, с другой стороны, ваши пользователи раздражаются и теряются при открытии новых вкладок или окон, тогда лучше открывать ссылки на той же вкладке и в том же окне.
Не переусердствуйте с открытием ссылок в новых вкладках или окнах браузера просто потому, что вы думаете, что пользователям может понадобиться , чтобы они отображались таким образом в определенных случаях.
Открыть URL-адрес в новой вкладке в JavaScript / jQuery — Techie Delight
В этом посте будет обсуждаться, как открыть указанный ресурс ссылки в новой вкладке в JavaScript и jQuery.
1. Использование метода окна
open () Идея состоит в том, чтобы использовать метод window.open () для открытия ресурса в контексте просмотра.Он принимает URL-адрес ресурса и имя цели, куда должен быть загружен указанный ресурс (в окне или на вкладке).
Хотя браузеры с поддержкой вкладок предпочитают открывать новые вкладки, а не новые окна, вы можете явно принудительно использовать это поведение, передав цель _blank в метод open () .
window.addEventListener («load», event => { var window = window.open («https://www.google.com / «,» _blank «); window.focus (); }); |
Обратите внимание, что некоторые браузеры, такие как Google Chrome, автоматически блокируют отображение всплывающих окон на вашем экране. Чтобы предотвратить блокировку всплывающих окон, вы можете добавить window.open (url, "_blank") в обработчик событий onclick для объекта DOM.
|
2. Создайте скрытый тег привязки
Еще один вероятный способ открыть ресурс, на который имеется ссылка, в новой вкладке — это динамическое создание тега привязки с атрибутом href , установленным на URL ресурса, и атрибутом target , установленным на _blank , чтобы он открывался в новой вкладке. .После создания объекта не прикрепляйте его ни к какому объекту DOM, а запускайте щелчок по нему с помощью метода JavaScript click () .
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 14 |
|
С помощью библиотеки jQuery вы можете создать новый тег привязки, например:
$ (документ).готово (function () { $ («# search»). click (function () { $ (««) .prop ({ target: «_blank», href: «https : //www.google.com « }) [0] .click (); }); }); |
Это все об открытии URL в новой вкладке в JavaScript и jQuery.
Спасибо за чтение.
Используйте наш онлайн-компилятор для публикации кода в комментариях с использованием C, C ++, Java, Python, JavaScript, C #, PHP и многих других популярных языков программирования.
Нам нравится? Направляйте нас к своим друзьям и помогайте нам расти.
Счастливое кодирование 🙂
Как открывать внешние ссылки в новом окне или вкладке с помощью WordPress
Вы хотите открывать внешние ссылки из сообщений вашего блога в новом окне?
Открытие внешних ссылок в новом окне позволяет пользователям переходить по ссылке, не покидая вашего веб-сайта.
Многие новички не могут найти возможность открыть ссылку в окне в основном потому, что она не сразу видна, когда вы добавляете ссылку в WordPress.
В этом руководстве для начинающих мы покажем, как легко открывать внешние ссылки в новом окне на вашем сайте WordPress. Мы также покажем различные способы сделать это, чтобы вы могли выбрать тот, который вам больше всего подходит.
Почему и когда следует открывать внешние ссылки в новом окне?
Внешние ссылки — это ссылки на веб-сайты, которыми вы не владеете или не контролируете. Обычно, если вы добавляете ссылку на внешний веб-сайт, ваши посетители просто покидают ваш сайт, щелкая по ссылке.
Хотя некоторые эксперты по пользовательскому опыту говорят, что не следует открывать внешние ссылки в новом окне, мы с этим не согласны.
Видите ли, большинство пользователей легко забывают последний веб-сайт, который они посещали. Если у них открыто несколько вкладок, велика вероятность, что они никогда больше не смогут найти ваш сайт.
Для удобства пользователей мы рекомендуем открывать внешние ссылки в новом окне или на новой вкладке. Таким образом, исходная веб-страница не теряется, и пользователи могут возобновить просмотр вашего веб-сайта, переключившись обратно.
Еще одно преимущество открытия внешних ссылок в новом окне — это увеличение количества просмотров страниц и вовлеченности пользователей на вашем сайте. Пользователи с большей вероятностью вернутся на предыдущую вкладку и дочитают статью.
Пользователи, которые проводят больше времени на вашем сайте, с большей вероятностью присоединятся к вашей электронной рассылке новостей, подпишутся на вас в социальных сетях, оставят комментарии и купят ваши продукты.
При этом давайте посмотрим, как легко открывать внешние ссылки в новом окне WordPress.
Видеоурок
Подписаться на WPBeginner
Если вы предпочитаете письменные инструкции, просто продолжайте читать.
Открыть внешнюю ссылку в новом окне редактора Гутенберга
Новый редактор блоков WordPress имеет встроенную функцию, которая позволяет открывать внешние ссылки в новом окне. Однако опция скрыта за кнопкой, поэтому новички часто ее не замечают.
Просто отредактируйте сообщение в блоге или страницу, на которую вы хотите добавить внешнюю ссылку.Затем выберите текст, который вы хотите связать, и нажмите кнопку вставки ссылки (или нажмите CTRL + K в Windows / Command + K в Mac).
Появится всплывающее окно для вставки ссылки. Просто введите ссылку и нажмите рядом с ней стрелку вниз. Это откроет возможность открыть новую вкладку ссылки.
Щелкните, чтобы переключить опцию, а затем нажмите Enter. Выбранный текст теперь будет связан, и вы сможете просмотреть его, посетив свой веб-сайт.
Открыть внешнюю ссылку в новом окне с помощью классического редактора
WordPress представил новый редактор блоков с WordPress 5.0. Многие пользователи предпочитают использовать старый редактор, установив плагин классического редактора.
Если вы все еще пользуетесь классическим редактором, мы рекомендуем вам начать использовать новый редактор. Он современный, быстрый и включает в себя множество новых функций, которые вы упускаете.
Однако, если вы по-прежнему хотите использовать классический редактор, то вы должны открыть ссылку в новом окне с помощью классического редактора.
Во-первых, вам нужно отредактировать сообщение или страницу, на которую вы хотите добавить ссылку.Затем выберите текст, который вы хотите связать, и нажмите кнопку добавления ссылки.
Появится всплывающее окно, в котором вы можете добавить внешнюю ссылку. После этого нажмите на значок шестеренки рядом с ним. Это вызовет всплывающее окно с расширенной вставкой ссылки.
Отсюда вам нужно установить флажок рядом с окном «Открыть ссылку в новой вкладке», а затем нажать кнопку «Обновить», чтобы добавить ссылку.
Теперь вы можете сохранить свой пост и просмотреть его, чтобы увидеть ссылку в действии.
Открытие ссылки в новой вкладке с помощью вкладки текста в классическом редакторе
Если вы используете HTML-редактор с пометкой «Текст» в старом классическом редакторе, то вот как вы открываете внешнюю ссылку в новом окне.
Просто выберите текст, который вы хотите связать, и затем нажмите кнопку «Добавить ссылку». Появится расширенное всплывающее окно «Вставить ссылку».
Отсюда вы можете добавить ссылку и установить флажок «Открыть ссылку в новой вкладке».После этого нажмите кнопку «Добавить ссылку», и всплывающее окно исчезнет. Теперь вы увидите HTML-код ссылки в текстовом редакторе.
Теперь вы можете сохранить изменения и просмотреть сообщение, чтобы увидеть внешнюю ссылку в действии.
Как открывать внешние ссылки в новом окне с помощью HTML
Иногда вам может потребоваться написать HTML, чтобы добавить ссылку в WordPress. Например, когда вы используете режим HTML в новом редакторе блоков или добавляете ссылку в файл шаблона темы WordPress.
Вам нужно будет добавить ссылку, используя следующий HTML-код.
Текст ссылки
Просто замените example.com на URL-адрес внешней ссылки, а текст ссылки — на текст, который вы хотите связать.
Целевой параметр в этом коде указывает браузерам открывать ссылку в новом окне или на новой вкладке.
Открытие ссылок меню навигации в новой вкладке
На своем веб-сайте WordPress вы можете добавлять внешние ссылки в навигационное меню вашего сайта, например на боковую панель или нижний колонтитул.
Чтобы открыть исходящие ссылки в меню на новой вкладке, перейдите к Внешний вид »Меню в админке WordPress.
Затем нажмите кнопку «Параметры экрана» в правом верхнем углу.
Когда вы нажмете кнопку, вы увидите больше параметров. Идите дальше и отметьте опцию «Link Target» в разделе «Показать дополнительные свойства меню».
После этого вы можете добавить настраиваемую ссылку в свое навигационное меню, введя URL-адрес и текст ссылки и нажав кнопку «Добавить в меню».
Ваша настраиваемая ссылка теперь появится в столбце «Структура меню». Теперь вы можете выбрать опцию «Открыть ссылку в новой вкладке», чтобы открыть внешнюю ссылку на другой вкладке.
По завершении нажмите кнопку «Сохранить меню».
Автоматически открывать все внешние ссылки в новом окне с помощью плагина WordPress
Может показаться, что вручную проверять параметр для каждой внешней ссылки, которую вы добавляете, требует дополнительной работы. Однако со временем вы к этому привыкнете.
Если вы ведете блог с несколькими авторами или часто забываете открывать внешние ссылки в новой вкладке, вы можете использовать для этого плагин.
Во-первых, вам необходимо установить и активировать плагин «Открыть внешние ссылки в новом окне». Для получения дополнительной информации см.
Наше пошаговое руководство по установке плагина WordPress.
Плагин работает «из коробки» и автоматически открывает внешние ссылки в новом окне.
На самом деле он не меняет внешние ссылки в сообщениях вашего блога.Вместо этого он использует JavaScript для открытия внешних ссылок в новом окне.
Примечание: Имейте в виду, что при деактивации плагина не будут открываться внешние ссылки в новом окне.
Мы надеемся, что эта статья помогла вам узнать, как легко открывать внешние ссылки в новом окне WordPress. Вы также можете увидеть наш полный список самых полезных советов, приемов и приемов WordPress, которые вы можете использовать на своем веб-сайте.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.
HTML Открыть ссылку в новом окне
Вы можете использовать HTML-код на этой странице, чтобы ссылка открывалась в новом окне.
Пример
Как показано в приведенном выше примере, чтобы открыть ссылку в новом окне, вы просто добавляете target = "_ blank" к тегу привязки. Все остальное остается как обычная ссылка.
Если у вас много ссылок, и вы добавите target = "_ blank" к каждой из них, все они откроются в собственном пустом окне.Это может сильно раздражать пользователя, особенно если у вас много ссылок, каждая из которых открывается в отдельной вкладке или окне. Пользователи могут избежать нажатия на ссылки, если при каждом нажатии открывается пустое окно.
Есть способ решить эту проблему. Читайте дальше…
Повторная загрузка пустого окна / вкладки
Вместо того, чтобы называть свое окно _blank , вы можете дать ему имя по вашему выбору. Затем все URL-адреса будут загружены на той же вкладке (если вы используете одно и то же имя).
Например, если у вас есть политика загрузки всех внешних ссылок на отдельной вкладке, вы можете назвать эту вкладку, скажем, external .
Тогда каждая ссылка, содержащая target = "external" , будет открываться в этом окне / вкладке. Это гарантирует, что новые окна не будут появляться каждый раз, когда пользователь нажимает на ссылку.
Вот пример того, что происходит, когда вы используете target = "_ blank" для всех ссылок:
А вот те же ссылки, но с target = "external" (но это может быть любое имя по вашему выбору):
Существуют и другие ключевые слова, которые можно использовать с target , а также различные значения в зависимости от названий окон / вкладок, которые уже открыты, изолированы ли они от песочницы и т.
Д.Посетите веб-сайт W3C, если вам интересно.
Создание «всплывающего окна»
Вы также можете использовать JavaScript, чтобы открыть новое окно. Используя JavaScript, вы также можете указать, как должно выглядеть окно. Это распространенный метод создания «всплывающего окна». Для получения дополнительной информации см. Всплывающие окна.
Дополнительные коды ссылок
Вы можете сделать гораздо больше с помощью HTML-ссылок. Вот еще несколько кодов ссылок HTML, каждый из которых предназначен для определенной цели.
Как открыть URL-адрес в новой вкладке с помощью JavaScript
Самый простой и легкий способ открыть URL-адрес в новой вкладке — использовать тег привязки HTML.Вы можете использовать , чтобы открыть новую вкладку, установив атрибут target = "_ blank" .
Однако иногда требуется открыть URL-адрес в новой вкладке с помощью JavaScript. В ванильном JavaScript есть метод window.open () , который можно использовать для этой цели.
Он открывает новую вкладку или новое окно браузера в зависимости от настроек браузера и переданных параметров.
window.open () Синтаксис Метод window.open () имеет следующий синтаксис:
const окно = окно.открыть (URL, имя, особенности)
Параметр url указывает URL-адрес открываемой веб-страницы. Если URL-адрес не указан, открывается новое окно или вкладка с about: blank .
Имя определяет целевой атрибут или имя окна. Он поддерживает следующее:
-
_blank— URL-адрес открывается в новом окне или на новой вкладке. Это значение по умолчанию. -
_parent— URL-адрес загружается в родительское окно. -
_self— URL-адрес заменяет текущую веб-страницу. -
_top— URL-адрес заменяет любые наборы фреймов, которые могут быть загружены. -
имя— Имя окна.
Параметр features используется для указания разделенного запятыми списка функций окна в форме «имя = значение» . Эти функции включают такие параметры, как размер и положение окна по умолчанию, включение полос прокрутки и многое другое.
Метод window.open () возвращает ссылку на вновь созданное окно или null , если это не удалось.
Открытие новой вкладки
Чтобы открыть новую вкладку, вы должны передать _blank в качестве второго параметра в window.open () или полностью пропустить второй параметр и передать только URL-адрес. Допустим, у вас есть следующий тег где-то на вашей веб-странице:
Вы хотите убедиться, что, когда пользователь нажимает указанную выше кнопку, URL-адрес открывается в новой вкладке.Вот как это можно сделать в ванильном JavaScript:
const button = document.querySelector ('# clickMe');
button.addEventListener ('клик', () => {
const tab = window.open ('https://attacomsian.com', '_blank');
});
Приведенный выше код JavaScript откроет https://attacomsian.com в новой вкладке (или окне) в зависимости от настроек браузера.
Асинхронный HTTP-запрос
Есть еще одна интересная вещь, которую вы должны знать перед использованием окна .open () метод. Новая вкладка или окно открывается только в результате действия пользователя. В приведенном выше примере URL-адрес открывается при фактическом событии клика.
Однако, если вы выполните асинхронный HTTP-запрос , когда пользователь щелкает, а затем открывает URL-адрес в новой вкладке в случае успеха, браузер заблокирует всплывающее окно , потому что это не прямое действие пользователя.
Вот пример, который использует Fetch API для выполнения вызова AJAX, а затем открывает новую вкладку при успешном ответе:
кнопка.addEventListener ('клик', () => {
fetch ('https://reqres.in/api/users')
.then (res => res.json ())
.then (json => {
const tab = window.open ('https://attacomsian.com', '_blank');
});
});
Чтобы заставить приведенный выше код работать, нам нужно внести несколько изменений. Первое, что вам нужно сделать, это открыть пустое новое окно при нажатии. После выполнения запроса обновите фактический URL-адрес окна и установите фокус.Если запрос не выполняется, просто закройте окно с помощью метода window.close () .
Вот полный пример, который должен работать во всех браузерах:
button.addEventListener ('щелкнуть', () => {
const tab = window.open ('about: blank');
fetch ('https://reqres.in/api/users')
.then (res => res.json ())
.then (json => {
tab.location = 'https://attacomsian.com';
tab.focus ();
})
.catch (err => {
tab.close ();
});
});
Открытие нового окна
Чтобы открыть URL-адрес в новом окне, убедитесь, что второй параметр — это имя окна или он пуст. Вы также можете указать высоту и ширину окна с помощью атрибута features , как показано в следующем примере:
button.addEventListener ('щелкнуть', () => {
const win = window.open ('https://attacomsian.com', 'mysite',
'ширина = 600, высота = 500');
});
Приведенный выше пример кода откроет новое окно браузера при нажатии кнопки.
✌️ Понравилась статья? Следуй за мной на Твиттер и LinkedIn. Вы также можете подписаться на Новостная лента.
Как открывать ссылки на веб-страницы в новой вкладке в Chrome
Все веб-браузеры имеют индивидуальные особенности и функции. Хотя большинство из них разделяют эту коллекцию, ради единообразия и интуитивно понятного дизайна, многие из них имеют дополнительные функции, которые не сразу очевидны. Вот несколько вещей, которые вам следует знать о веб-браузере Chrome, в том числе о том, как открывать ссылки на новой вкладке в Chrome.
Открытие ссылок в новой вкладке — в чем проблема?
Для тех, кто не понимает предмета, эта статья посвящена открытию ссылки в новой вкладке в Chrome. Когда вы щелкаете ссылку обычным способом, веб-страница выполняет одно из двух действий. Либо ссылка отправляет вас в пункт назначения (обычно это другая веб-страница), либо вы щелкаете ссылку, и открывается новая вкладка в веб-браузере Chrome.
Кто решает, будет ли ссылка загружать страницу прямо здесь или открывать ее в новой вкладке? HTML / код определяет, как открывается ссылка, будь то на существующей вкладке, в новой вкладке или даже в новом окне.
Почему люди хотят, чтобы «каждая» страница открывалась на новой вкладке?
Есть много причин, по которым кто-то хочет, чтобы каждая страница открывалась на новой вкладке. Пользователь может пожелать оставить существующую вкладку открытой и использовать ее в качестве справки или места для возврата.
Они также могут захотеть сравнить веб-страницы для получения информации, такой как обзоры продуктов, спецификации, процессы / инструкции или определения. Этот сценарий особенно важен при нажатии на объявление. Пользователь не захочет потерять свою страницу на веб-сайте, а вместо нее будет размещена реклама.
Независимо от ситуаций, наиболее распространенной причиной открытия ссылок в новых вкладках является то, что люди хотят просмотреть много разных видео из списка, но они не хотят терять список или поиск, когда они нажимают на ссылки на видео. Поэтому они открывают ряд других вкладок с разными видео, проверяют их и закрывают, если они им не интересны.
Независимо от цели, люди будут открывать ссылки результатов поисковой системы в новых вкладках, позволять им загружаться, а затем быстро пролистывать открытые страницы, закрывая все, что не имеет отношения к делу.Вот список методов, которые показывают, как открывать ссылки на новой вкладке в Chrome.
Способ 1. Используйте среднюю кнопку мыши / кнопку колеса прокрутки
Если вы используете мышь с кнопкой прокрутки посередине, вы можете нажать эту кнопку, чтобы открывать ссылки на новой вкладке. Этот процесс также работает для многих типов видео и даже файлов изображений. Вы нажимаете среднюю кнопку мыши, и в том же окне веб-браузера появляется новая вкладка.
Способ 2. Использование сенсорной панели
Возможно, вы используете ноутбук или другое устройство, в котором не используется мышь.В этом случае коснитесь экрана тремя пальцами или щелкните мышью. Однако некоторые сенсорные панели несовместимы с трехпалым щелчком, поэтому вам придется использовать нажимаемые кнопки под сенсорной панелью.
У большинства сенсорных панелей есть две нажимаемые кнопки под ними, которые заменяют левый и правый кнопки мыши. Нажмите обе кнопки одновременно, чтобы вызвать щелчок колесика прокрутки.
Метод 3 — Удерживайте нажатой клавишу CTRL
Вы когда-нибудь читали документы в Microsoft Word или LibreOffice и замечали, что вы можете открывать ссылки, если удерживаете CTRL и затем щелкаете по ним левой кнопкой мыши.Та же функция применима к Google Chrome. Этот процесс переопределяет существующие функции, которые заставляют места назначения загружаться на вашей текущей вкладке.
Проблема метода CTRL заключается в том, что на некоторых веб-сайтах может использоваться кнопка CTRL. Например, если вы пытаетесь войти в Outlook и щелкаете с нажатой клавишей CTRL небольшую ссылку «Забыли пароль», откроется новая вкладка на странице забытого пароля. Однако, если на том же веб-сайте Outlook вы, удерживая CTRL, щелкните функцию с надписью «Параметры входа», тогда инструмент на странице активируется, а не загружает новую вкладку.
Метод 4 — Меню правого клика
Метод, к которому вы, вероятно, наиболее привыкли, — это щелкнуть правой кнопкой мыши и выбрать «Открыть ссылку в новой вкладке». Тем не менее, метод правого клика имеет свое применение.
Например, если вы находитесь на ненадежном веб-сайте и не уверены, что хакер захватил страницу, вы можете использовать метод правой кнопки мыши, чтобы открыть ее в новой вкладке.