Открыть в новом окне закрыть. Как открыть ссылку в новом окне
В статье указываются основные принципы использования атрибута target="_blank", а также предлагается альтернатива использования этого атрибута, при которой код останется валидным.
Довольно часто встречается такая практика, когда при клике на ссылку переход на целевую страницу осуществляется в новой вкладке браузера. Таким приемом очень часто пользуются при указании разработчика веб-ресурса или ответа на запрос в поисковой системе. Этот прием осуществляется благодаря использованию атрибута target тега . Ниже представлен пример кода:
HTML
< a href= "#" target= "_blank" >
В сложившемся понимании современной грамотной верстки и взаимодействия пользователя с функционалом ресурса принято считать, что посетитель должен сам определять для себя, каким именно способом он будет переходить по ссылке. Этого же мнения поддерживаются опытные и известные веб-разработчики. Также использование данного атрибута нарушает работу кнопки браузера «Назад» - это тоже считается негативным эффектом атрибута. Перечисленные факторы могут вызвать негодования посетителя сайта.
Некоторые поясняют использование атрибута target тем, что при его использовании, даже если пользователь нашел то, что искал на другом ресурсе (на который отправляла ссылка), после закрытия новооткрытой вкладки он опять вернется на предыдущий сайт. Это, якобы, повышает вероятность конвертации случайного посетителя в постоянного пользователя. Это утверждение ошибочно! Завоевать постоянное внимание пользователя можно только интересным и качественным контентом. Зря информация считается одним из наиболее ценных ресурсов.
Кроме всего прочего, согласно спецификации XHTML 1.0 Strict , использование атрибута target является недопустимым. В противном случае код не будет считаться валидным. А сам валидатор выдаст вот такое сообщение
Как было упомянуто ранее, использование атрибута target для перехода по ссылке в новом окне браузера не соответствует спецификациям и не считается валидным решением задачи. Однако это не единственный способ решения поставленной задачи. Аналогичный эффект можно получить при использовании js-кода.
Принцип организации такого процесса основывается на событии onclick . В значении этого события будет написана функция для открытия новой вкладки браузера - window.open() , а также блокиратор, который отменит переход на нужный адрес в текущем окне - return false . В коде все эти действия будут выглядеть следующим образом:
< a href= "#" onclick= "window.open(this.href); return false" > Ссылка, открывающаяся в новой вкладке
Чтобы удостовериться в эффективности работы предложенного метода, можете кликнуть на эту ссылку , она откроется в новом окне.
После того, как убедились в действенности метода, проводим проверку валидность кода. Валидатор выдает зеленое сообщение, что говорит о безупречности нашего кода.
На первый взгляд мы добились рационального решения поставленной задачи, однако при детальной проверке работы метода выяснилось, что если в браузере установлена блокировка всплывающих окон, то метод перестанет работать. Вместо перехода по ссылке появится сообщение о блокировке всплывающего окна.
Модификация js-кода для удачного перехода при любых условияхВышеупомянутая функция предназначена для избавления пользователя от излишков рекламы в сети Интернет. Все современные браузеры в своем арсенале имеют такую способность, кроме того некоторые из них могут осуществлять блокировку на разных уровнях. К примеру, все версии Opera , начиная с 9-ой, имеют возможность блокировать только отмеченные окна или все подряд.
Хоть пользователей, устанавливающих блокировку всплывающих окон в своем браузере, наверняка, очень мало, но они все же есть. А мы должны учитывать все возможные варианты для нормального функционирования сайта. Напоминаю, при наличии блока ссылка на нашем js-коде перестанет работать.
Тогда какой же выбор делать: либо не валидный код, либо не всегда рабочие ссылки? И тот, и тот вариант нам не подходит. Альтернативное решение пришло при тестировании ссылки с атрибутом target и включенной блокировкой всплывающих окон. В заданных условиях ссылка открылась, но только в своем окне. Значит нам нужно модифицировать наш js-код таким образом, чтобы при блокировке ссылка работала в текущем окне. Реализуется это следующим образом:
< a href= "#" onclick= "return !window.open(this.href)" > Ссылка, открывающаяся в новой вкладке
Принцип работы метода практически не изменился, поменялась форма трактовки действий. В новом коде функция window.open() отрабатывает значение true , если блокировка не установлена, если же она присутствует, то функция отрабатывает значение false . Говоря на русском языке, при установке соответствующих настроек в браузере ссылка будет открываться в текущей сессии, в противном случае – в новой вкладке.
Проверка модифицированного решения для ссылки на главную блога .
ВыводыИсходя из представленной выше информации можно сделать вывод, что наиболее рациональный способ для принудительного открытия ссылок в новых вкладках является использование последнего метода, основывающегося на коде JavaScript .
Однако в тоже время следует применять подобные вещи оккуратно, так как это навязывает определенные действия пользователю и ограничивает его свободу принятия решений. Это считается дурным тоном.
.
в браузере Google Chrome
с вкладками.
Найти всю полную информацию о работе с вкладками вы можете в своём Google Chrome.
Проблема с браузером: все ссылки открываются в новой вкладкеДля этого откройте браузер и просто нажмите функциональную клавишу F1 на своей клавиатуре. Или нажмите значок гаечного ключа, а может и такого значка , как у меня, вместо гаечного ключа, в конце адресной строки браузера. И выберите внизу открывшейся вкладки Справка. Откроется новая вкладка, где в центре есть ссылка Вкладки и окна. Нажмите и справа откроются все Заголовки связанные с вкладками.
Safari OperaКогда вы гуляете по интернету, современные браузеры всегда возможность открыть страницу по ссылке в новом окне или новой вкладке. Это часто очень удобно — вы видите интересную ссылку, но не отрываетесь от текста, который читаете, а открываете ссылку в новом окне или вкладке чтобы вернуться, когда закончите с открытым в данный момент. Мне всегда хотелось, чтобы такая возможность была и в проводнике Windows — щелкнули правой кнопкой по папке — и там есть опция: "открыть в новом окне".
Подобную опцию достаточно просто добавить, забравшись в свойства проводника, но не делать же это на каждом компьютере, на который вы приходите! Существенно лучше автоматизировать процесс с использованием reg файла. Это и есть вторая цель данной статьи — продолжить тему реестра и показать, как его можно редактировать не только руками.
Я приведу в этой статье код файла, добавляющего опцию в конткстное меню; кроме того, этот файл можно будет и скачать. Если же у вас есть интересные примеры фалов реестра, присылайте их мне в комментариях!
Примечание: прошу прощения у тех, кто ждал статью про анонимность. Не успеваю. Выкладываю из запаса.
Итак, реестр.
Как сделать, чтобы ссылки открывались в новом окне или на новой вкладкеЕсли вы уже запускали regedit, то вы можете сами поэкспериментировать с экспортом всего реестра или его части. Для этого нужно, стоя на ветви реестра, пойти в меню файл-экспорт и выбрать, куда вы хотите сделать выгрузку. Получится файл с расширением reg, двойное нажатие по которому и произведет восстановление реестра — обратную загрузку. Но такой файл можно и создать самостоятельно, что мы сейчас с вами и сделаем. Создайте текстовый файл и запишите снутрь такое содержание:
@="Открыть в новом окне"
@="C:\\WINDOWS\\explorer.exe \"%1\""
Теперь файл нужно переименовать — изменить его расширение на reg. Как это сделать? Ровно так, как вы переименовываете другие файлы, только предварительно нужно отобразить расширения файлов.
Двойной щелчок по такому файлу, соглашаетесь внести изменения в реестр — и вуаля, контекстное меню изменено — при щелчке правой кнопкой мыши по папке появляется вариант "открыть в новом окне". Если вам не хочется создавать, редактировать и переименовывать файл, вы можете его скачать у меня с сайта.
А вот такой файл сделает мой сайт домашней страницей в Internet Explorer
Windows Registry Editor Version 5.00
"Start Page" = "https://it.sander.su/"
У вас есть хорошие примеры фалов для редактирования реестра? Присылайте! Кстати, напомню мой старый пост про Windows script host — там есть примеры шуточных программ на языке, встроенном в Windows.
comments powered by
Как открыть ссылку в новом окне? Как изменитьнастройки вкладок
в браузерах
Браузеры изначально настроены по-разному для открытия новых страниц. Например Safari настроен на открытие новых страниц в новом окне. А Mozilla Firefox открывает новые страницы в новых вкладках на Панели вкладок, но кроме этого мы имеем возможность и открывать новые окна.
Вы сами можете изменить настройки
.
Изменить настройки вкладок в браузере Internet Explorer можно в разделе Свойства обозревателя. Нажмите на значок шестерёнки наверху справа на панели браузера. Выберите Свойства обозревателя дальше выберите вкладку Обшие и внизу, в строке Вкладки нажмите на Параметры. В центре под строкой При открытии новой вкладки открывать: выберите в чёрном треугольнике желаемый способ открытия вкладок.
Mozilla FirefoxЧтобы изменить настройки вкладок в браузере Mozilla Firefox нажмите кнопку Инструменты на панели. Внизу щёлкните Настройки. В самом верху нового окна нажмите Вкладки. И здесь можете либо поставить галочки, либо снять в нужном вам способе открытия новых вкладок.
Работа с вкладкамив браузере Google Chrome
В последней версии Google Chrome я не нашла
возможности изменять настройки для вкладок.
Наверное этому очень удобному и умному браузеру и не нужно менять настройки. Поскольку Google Chrome предлагает пользователям много возможностей работы с вкладками.
Очень легко открывать новую вкладку и новое
окно, даже посредством горячих клавиш.
Требуется открыть одну и ту же веб-страницу на нескольких вкладках
есть возможность Дублировать вкладку. Есть возможность работать
в режиме инкогнито (скрытый просмотр). Можно переместить нужную
вкладку в отдельное окно. И ещё много других возможностей работы
с вкладками.
Найти всю полную информацию о работе с вкладками вы можете в своём Google Chrome. Для этого откройте браузер и просто нажмите функциональную клавишу F1 на своей клавиатуре. Или нажмите значок гаечного ключа, а может и такого значка , как у меня, вместо гаечного ключа, в конце адресной строки браузера. И выберите внизу открывшейся вкладки Справка. Откроется новая вкладка, где в центре есть ссылка Вкладки и окна. Нажмите и справа откроются все Заголовки связанные с вкладками.
SafariЧтобы изменить настройки для вкладок в браузере Safari нажмите значок шестерёнки в правой части панели браузера. В новой вкладке выберите Настройки, а в следующем окне выберите Вкладки. И здесь в строке Открывать страницы во вкладках, а не в окнах: выберите вариант нужный вам.
OperaВ браузере Opera для изменения настроек вкладок нажмите на панели кнопку Инструменты. Выберите внизу новой вкладки Общие настройки. И в этой вкладке нажмите на панели Расширенные, а затем кнопку Настройки вкладок. Откроется окно Дополнительные настройки вкладок. Ставите галочку в нужном вам способе открытия вкладок и нажмите внизу ОК.
Перейти на Главную страницу сайта
Задача РешениеПо умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank , как показано в примере 1.
HTML5 IE Cr Op Sa Fx
Ссылки
Учтите, что при использовании строгого атрибут target в HTML4 и XHTML осуждается и код с ним не пройдет валидацию. Чтобы в таком случае сделать ссылку для открытия в новом окне и соблюсти корректность кода, одних HTML и CSS недостаточно, поэтому придется обратиться к скриптам. Вначале необходимо как-то выделить ссылки, которые будут открываться в новом окне, например, атрибутом rel со значением external . Этот атрибут кратко описывает ссылку или куда она ведет. Браузеры не воспринимают этот атрибут, но это и не требуется, поскольку мы будем проверять все ссылки через JavaScript (пример 2). К нужным ссылкам добавляется все тот же target . Но так как это делается программно, то валидатор уловки не заметит.
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ссылка в новом окне /* */
Все мы понимаем, что иногда ссылки удобней открывать в текущем окне, а иногда - в новом. Я лично в большинстве проектов придерживаюсь незамысловатого правила - если ссылка внутренняя (в пределах сайта), то по умолчанию она открывается в текущем окне, а внешние ссылки, ведущие куда-то на другие сайты, по умолчанию открывают новые окна (вкладки).
...
атрибут target не указан или задан в виде target="_self" , то документ открывается в текущем окне браузера, а если ссылке назначен атрибут вида target="_blank" , документ открывается в новом окне.
Но тогда возникает вопрос - как пользователь отличит эти 2 вида ссылок, не щелкая по ним или не заглядывая в HTML-код страницы?
Логичней всего, если CSS-оформление двух видов ссылок будет разным, вот вариант, при котором ссылки с target="_blank" выделяются жирным шрифтом:
A { font-weight:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "bold" : "normal"); } a { font-weight:bold; }
Здесь, как это часто бывает, приходится отдельно учитывать Internet Explorer и остальные браузеры, первое стилевое указание - как раз для IE, а второе - для остальных браузеров.
Аналогично можно поэкспериментировать с каким-либо другим свойством CSS, например, с подчёркиванием text-decoration:
A { text-decoration:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "underline" : "none"); } a { text-decoration:underline; }
В зависимости от иерархии свойств CSS, в конкретном браузере может чего-нибудь и не сработать. Плюс задействовать подчёркивание, когда по умолчанию все ссылки и так подчёркнуты (или не подчёркнуты), я бы не стал.
Альтернативный и кросс-браузерный путь - попробовать отделить внешние ссылки от остальных по их адресам . Предположим, что внешние ссылки всегда указываются как абсолютные (начиная с префикса http://), а внутренние пишутся как относительные . Чаще всего на нормальных сайтах так и делают. Это работает и в IE, по крайней мере, с 8-й версии.
A { font-weight: bold /* Жирное начертание для абсолютных ссылок */ }
Но здесь мы отклонились от исходной задачи и просто требуем, чтобы URL начинался с http:// , то есть, выделяем жирным начертанием абсолютные URL, которые не обязательно внешние, а не все ссылки, открывающиеся в новом окне.
Если не принимать во внимание IE 6 и 7 версий, можно всё сделать проще, через псевдоэлементы before и after , позволяющие указать, что нужно выводить до или после элементов, к которым они добавляются.
Например, через стиль мы можем добавить маленький рисуночек после каждой ссылки, открывающейся в новом окне.
Однако мне кажется, что логичней просто изменить оформление фона ссылки, открываемой в новом окне - ведь добавление какого-либо текста или картинки до или после ссылки может нарушить макет сайта. Чтобы не мучиться, мы поставим желтоватый фоновый цвет всем ссылкам, открываемым в новом окне.
A { background-color: #FFFF99; } a { background-color: expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "#FFFF99" : "transparent"); }
Один из посетителей сайта спросил, как открыть ссылку в новом окне HTML . В этой статье я отвечу на данный вопрос.
Что вам потребуетсяПосетитель не уточнил, каким редактором пользуется, поэтому будем считать, что он работает напрямую в HTML . Но это не значит, что вы не сможете следовать этой инструкции, если используете для создания сайта какой-либо визуальный редактор. Просто нужно будет получить доступ к разметке страницы. Большинство редакторов и блог-платформ позволяют вручную отредактировать HTML-код .
Например, если вы работаете в Expression Web , можно отредактировать код страницы, переключившись в «Режим кода » (Code mode ).
Как настроить открытие ссылок в новой вкладке или в новом окне браузераthesitewizard.com
Измените её, чтобы она выглядела следующим образом:
thesitewizard.com
Теперь, когда пользователи кликнут по этой ссылке, она откроется в новом окне или на новой вкладке (в зависимости от того, каким браузером они пользуются, и как он настроен ).
Обратите внимание, что если вы используете DOCTYPE со строгим синтаксисом XHTML 1.0 или 1.1 , то не получится одновременно использовать приведённый выше код и пройти валидацию страницы. Но подозреваю, что этими стандартами никто не пользуется. «Переходные » версии этих стандартов для открытия в новом окне HTML нам вполне подойдут, и в них также поддерживается атрибут target .
Если вы работаете в Expression Web, Dreamweaver, BlueGriffon или KompoZer, кликните по ссылке, которую хотите изменить, перейдите в режим изменения HTML-кода и добавьте атрибут target="_blank".
У этого метода не так много плюсовМногие начинающие вебмастера думают, что, открывая ссылки в новом окне, пользователи с меньшей вероятностью покинут сайт. Это в корне неверно. Если кто-то кликнет по ссылке, а потом захочет вернуться на ваш сайт, они просто нажмут кнопку «Назад ». Об этой функции даже не самые технически подкованные люди узнают сразу после знакомства с интернетом. Продвинутые пользователи к тому же знают, что можно использовать опцию «Открыть ссылку в новой вкладке » (или «Открыть ссылку в новом окне »).
Создавая ссылки, которые открываются в новом окне, вы мешаете пользователям вернуться на сайт. Может показаться, что они без труда вернутся в первое окно с вашим сайтом. Мой опыт показывает, что это не так - людей сбивает с толку неработающая кнопка «Назад ». Они даже не подозревают, что перед ними новая вкладка или новое окно. Когда у них не получается быстро вернуться на предыдущую страницу, они просто сдаются и переходят на другие ресурсы.
С опытными пользователями дела обстоят не лучше. Их очень раздражает «привычка » вашего сайта открывать новые окна без разрешения. На то они и опытные пользователи - если бы они хотели открыть новую вкладку, они бы сделали это сами, и им нисколько не нравится, что это делают без их согласия. Ещё хуже, если все ваши ссылки открываются в новом окне.
Сайт становится уязвим для фишинговых атакЕсли вы применяете кнопку HTML открыть в новом окне, используя target=»_blank» , сайт, на который ведёт ссылка, получает доступ к окну/вкладке с вашей страницей и может подменить её содержимое.
Это не только не удержит пользователей на сайте (если вы открывали новые вкладки именно с этой целью ), но и подвергнет угрозе посетителей. Например, если у вас есть страница входа пользователя, находящийся по ссылке сайт может заменить её на копию вашей, но при этом собирающую логины и пароли пользователей. Такой вид атак называется «фишинг ».
И это не теоретическая уязвимость. Специалисты отдела безопасности Google отметили «значительное количество сообщений » о подобном перехвате вкладок с целью внедрения вредоносного программного обеспечения.
Для тех, кому интересно - технические подробности. Открытый в новом окне сайт получает доступ к вашей странице через объект window.opener в JavaScript. Этот объект с функциями чтения/записи, которым можно управлять. В том числе, можно изменить свойство window.opener.location и заставить браузер перейти по новому адресу, чтобы открыть картинку в новом окне HTML.
Некоторые браузеры позволяют предотвратить подобное поведение добавлением к ссылке атрибута rel=»noopener noreferrer» . Пример, приведённый в начале статьи, будет выглядеть следующим образом:
thesitewizard.com
Теоретически, как rel=»noopener» , так и rel=»noreferrer» должно быть достаточно, чтобы защититься от подобной атаки при открытии страницы в новом окне HTML . При этом корректнее использовать атрибут rel=»noopener» , так как у rel=»noreferrer» есть побочный эффект - браузер не будет передавать сайту URL источника запроса. Но на данный момент не все браузеры поддерживают атрибут rel=»noopener» . Аналогично, rel=»noreferrer» не поддерживается некоторыми браузерами. Поэтому, если захотите защитить пользователей как можно большего числа браузеров, вероятно, придётся использовать оба атрибута.
Тем не менее, этот приём работает только на актуальных версиях Chrome , Firefox и Safari . Internet Explorer данную функцию не поддерживает, хотя я успел быстро проверить 11 версию IE , и она, вроде бы, защищена от подобной атаки при настройках безопасности, применяемых по умолчанию. Насчёт браузера Microsoft Edge точно сказать не могу.
Другими словами, описанный выше метод нельзя назвать стопроцентной защитой. Лучший способ избежать этой проблемы - использовать нормальные ссылки без атрибута target=»_blank» .
ЗаключениеОбщая рекомендация - по возможности избегать открытия вкладок в новом окне HTML . Конечно, в некоторых случаях этого не избежать. В этой ситуации можно предупредить посетителей сайта о том, что «ссылка открывается в новом окне ». Это не сильно поможет среднестатистическому пользователю и не защитит его от фишинговых атак через ваш сайт, но хотя бы не будет раздражать более опытных пользователей.
