Css открыть в новой вкладке. Как открыть ссылку в новом окне? Как по клику на кнопке открыть страницу в новой вкладке

По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank , как показано в примере 1.

Здесь, как это часто бывает, приходится отдельно учитывать 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"); }

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

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

Также на сегодняшний день существует более простой способ открытия ссылок в новых вкладках. Для этого вам не потребуется использовать контекстное меню линка. Наведите курсор на требуемую ссылку и нажмите на колесико мышки. Как и в предыдущих случаях, ссылка будет открыта в новой вкладке .

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

Вам понадобится

• Начальные навыки владения персональным компьютером, доступ в интернет.

Инструкция

Самый простой и распространенный способ открытия ссылки на ресурс можно осуществить следующим образом:

Вызвать меню действий над выделенным текстом, щелкнув по нему правой кнопкой мыши один раз;

В появившемся списке выбрать строчку «Копировать»;

В строке ввода адреса щелкнуть правой кнопкой мыши;

В меню действий выбрать строчку «Вставить»;

Видео по теме

Работа с интернет-браузером подразумевает большое количество постоянно открытых окон или вкладок. Просмотрщиков интернет-страниц, которые не умеют создавать новые вкладки, сегодня уже не встретишь, исключением может быть только Internet Explorer 6-й версии.

Вам понадобится

• Программное обеспечение:
• - Mozilla Firefox;
• - Google Chrome;
• - Opera;
• - Internet Explorer.

Инструкция

Браузер Mozilla Firefox. Самый простой способ - нажать правой кнопкой на ссылке и выбрать пункт «Открыть в новой » контекстного меню. Также данное действие можно совершить при нажатии горячих клавиш, в случае с Firefox – нажатие на среднюю кнопку мыши (scrool – колесико).

Браузер Google Chrome. По сравнению с прошлым оппонентом все действия, направленные на открытие новой вкладки, остаются прежними. Вызовите контекстное меню ссылки, нажав на нее правой кнопкой мыши, и выберите пункт ««Открыть в новой вкладке»». Если внимательно изучить это меню, вы увидите строку «Открыть в режиме ». Данный режим открывает ссылку в новом окне, но просмотренные страницы посредством этого режима не кешируются, что дает некий уровень защиты данных.

В качестве горячих клавиш используются средняя кнопка мыши и сочетание клавиш Ctrl + клик левой кнопкой мыши. Стоит отметить, что сочетание клавиш Shift + клик мыши откроет ссылку в новом окне. В некоторых случаях достаточно захватить ссылку мышкой и перенести на свободное место панели вкладок.

Браузер Opera. Чтобы открыть окно в новой вкладке, необходимо нажать кнопку Ctrl и щелкнуть по активной ссылке, либо при щелчке мыши зажать клавиши Ctrl + Shift – это позволит открыть окно в фоновой вкладке. Также для этого браузера действует правило выполнения команды из контекстного меню ссылки. Нажмите на выбранном элементе средней кнопкой мыши для перехода к открытой вкладке.

Видео по теме

Источники:

• окно вкладок

Один из посетителей сайта спросил, как открыть ссылку в новом окне 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 . Конечно, в некоторых случаях этого не избежать. В этой ситуации можно предупредить посетителей сайта о том, что «ссылка открывается в новом окне ». Это не сильно поможет среднестатистическому пользователю и не защитит его от фишинговых атак через ваш сайт, но хотя бы не будет раздражать более опытных пользователей.