HTML: Открытие ссылки в новой вкладке
Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне.
Для указания браузеру, что при открытие страницы нужно использовать другое окно, вместо текущего, добавьте в элемент <a> атрибут target. Его значение сообщает браузеру о целевом окне для страницы. Если в качестве значения атрибута target вы используете _blank, то браузер для каждой новой страницы всегда будет открывать новое окно:
В таблице приведены все доступные значения для атрибута target.
| Значение | Описание |
|---|---|
| _blank | Открывает документ в новом окне. |
| _self | Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию). |
| _parent | Открывает документ в родительском окне. |
| _top | Открывает документ на весь экран. |
| имя_фрейма | Открывает документ в указанном фрейме. |
Примечание: если ваш браузер поддерживает вкладки, то ссылки с target=»_blank» будут открываться не в новом окне, а в новом вкладке. В этом случае, если вам требуется, чтобы ссылка открывала именно новое окно, надо воспользоваться языком программирования (например, JavaScript).
Как открыть ссылку в новой вкладке HTML
Сегодня мы разберем несколько вариантов, как открыть ссылку в новой вкладке html.
Чаще всего, этот прием используют для удержания посетителей на своем сайте, если на сайте присутствуют ссылки, ведущие на сторонние ресурсы. Открытие ссылки в новой вкладке html позволяет задержать посетителя на своем сайте. Так как, при нажатии на ссылку, происходит открытие в отдельной вкладке, и, формально, посетитель остается на вашем сайте.
Способов, как открыть ссылку в новой вкладке html, несколько, но мы остановимся на двух, самых удобных и практичных.
Навигация по статье:
Атрибут target=_ blank
Этот способ является наиболее распространенным, и известен практически каждому веб-разработчику, и заключается он в добавлении в тег < а> специального атрибута target с присвоенным значение _blank.
window.open()
Открывает ссылку в новом окне, в новой вкладке или в iframe.
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
- Кратко
- Простой пример
- Как пишется
- Значения:
Обновлено 9 ноября 2022
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Метод open ( ) объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.
Простой пример
Скопировать ссылку на секцию «Простой пример» Скопировано
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Метод open ( ) имеет три опциональных параметра:
url – строка, которая содержит относительный или абсолютный URL.
target – строка, которая указывает где откроется новое окно. Он может принимать те же значения, что и атрибут target тега <a> : имя окна или одно из ключевых слов _self , _blank , _parent , _top .
window Features – строка, которая позволяет детально описать, как будет выглядеть новое окно. Опции в строке указываются через запятую в формате name = value , для булевых типов значение можно опустить.
Вызвать метод без параметров тоже можно, по умолчанию будет открыта чистая вкладка about : blank .
Значения:
Скопировать ссылку на секцию «Значения:» Скопировано
Числовые:
width or inner Width / height or inner Height — определит ширину и высоту содержимого окна включая полосы прокрутки. Минимальное возможное значения — 100px.
left or screen X / top or screen Y — здесь можно указать расстояние от левой верхней части (или рабочей области) экрана пользователя, на котором откроется окно.
Булевые:
popup — открывает ссылку в новом окне
menubar — отвечает за отображение стоки меню
toolbar — управляет показом кнопок панели инструментов и панели закладок
location — отвечает за показ адресной строки
resizable — позволяет включить/выключить возможность пользователям изменять размеры окна
scrollbars — отображение полос прокрутки
status — отображение строки состояния
noopener — помогает повысить безопасность сайта, так как предотвращает доступ открываемого ресурса к текущей странице (через сеанс браузера).
При использовании noopener значения второго параметра метода open ( ) (кроме _top , _self , _parent ), будут обработаны как _blanknoreferrer — предотвращает передачу информации об исходном ресурсе на целевой. При установке этого значения как true noopener также становится true .
Примеры использования
Скопировать ссылку на секцию «Примеры использования» Скопировано
Возможности
Скопировать ссылку на секцию «Возможности» Скопировано
Использование метода open ( ) позволяет получить ссылку на новое окно и взаимодействовать с ним, например:
Особенности применения
Скопировать ссылку на секцию «Особенности применения» Скопировано
Авторы MDN рекомендуют использовать метод open ( ) в крайних случаях и (никогда!) не прибегать к встроенному (inline) использованию window . open ( ) .
Как открыть ссылку в новой вкладке
Внимание: по умолчанию сочетания даны в формате для Windows. Как правило, в этой ОС активатором горячих клавиш является Ctrl. Для Mac в качестве активатора служит клавиша Command (если не указано другое).
Управление вкладками
Ctrl+1-8 — перейти к определенной вкладке, начиная слева.
Ctrl+9 — перейти к последней вкладке.
Ctrl+Tab или Ctrl+Page Up — перейти к следующей вкладке, то есть к той, что находится справа (Mac: Command+Option+стрелка вправо).
Ctrl+Shift+Tab или Ctrl+Page Down — перейти к предыдущей вкладке, то есть к той, что находится слева (Mac: Command+Option+стрелка влево).
Ctrl+W или Ctrl+F4 — закрыть текущую вкладку.
Ctrl+Shift+T — открыть последнюю закрытую вкладку.
Ctrl+T — открыть новую вкладку.
Ctrl+N — открыть новое окно браузера.
Alt+F4 — закрыть текущее окно (Mac: Command+Shift+W).
Управление вкладками с помощью мыши
Щелчок средней кнопкой на вкладке — закрыть вкладку (только для Windows).
Ctrl+щелчок левой или средней кнопкой — открыть ссылку в фоновой вкладке.
Shift+щелчок левой кнопкой — открыть ссылку в новом окне браузера.
Ctrl+Shift+щелчок левой кнопкой — открыть ссылку в текущей вкладке.
Навигация по сайтам
Alt+стрелка влево/пробел — перейти на предыдущую страницу (Mac: Command+стрелка влево).
Alt+стрелка вправо или Shift+пробел — перейти на следующую страницу (Mac: Command+стрелка вправо).
F5 — перезагрузить страницу.
Ctrl+F5 — обновить страницу полностью без использования кэша (Mac: Command+Shift+R).
Escape — остановить загрузку страницы.
Alt+Home — открыть домашнюю страницу (Mac: Command+Shift+H).
Масштабирование
Ctrl и «+» или Ctrl+прокрутка колесика мыши вверх — увеличить масштаб страницы.
Ctrl и «–» или Ctrl+прокрутка колесика мыши вниз — уменьшить масштаб страницы.
Ctrl+0 — установить масштаб по умолчанию.
F11 — запустить полноэкранный режим.
Прокрутка страницы
Пробел или стрелка вниз — прокрутить страницу вниз.
Shift+Space или стрелка вверх — прокрутить страницу вверх.
Home — перейти к верхней части страницы.
End — перейти к нижней части страницы.
Щелчок средней кнопкой мыши — прокручивать страницу с помощью мыши (доступно только на Windows).
Адресная строка
Ctrl+L или Alt+D или F6 — перейти в адресную строку.
Ctrl+Enter — добавить приставку www. и окончание .com к тексту в адресной строке, а затем загрузить сайт (только для сайтов с окончанием .com). Решение для Mac: ввести в адресной строке текст, дописать «/», нажать Enter.
Alt+Enter — открыть ссылку в адресной строке в новой вкладке.
Поиск
Ctrl+K или Ctrl+E — перейти во встроенную строку поиска в браузере или перейти на адресную строку, если в браузере нет отдельной поисковой.
Alt+Enter — выполнить поиск по запросу в поисковой строке в новой вкладке (только для Windows).
Ctrl+F или F3 — открыть окно поиска по текущей странице.
Ctrl+G или F3 — перейти к следующему соответствию искомого текста на странице.
Ctrl+Shift+G или Shift+F3 — перейти к предыдущему соответствию искомого текста на странице.
История и закладки
Ctrl+H — открыть историю браузера (Mac: Command+Y).
Ctrl+J — открыть загрузки (Mac: Command+Shift+J).
Ctrl+D — добавить в закладки текущую страницу.
Ctrl+Shift+Del — открыть страницу для очистки истории.
Прочие функции
Ctrl+P — распечатать текущую страницу.
Ctrl+S — сохранить текущую страницу на компьютер.
Ctrl+O — открыть файл, хранящийся на компьютере.
Ctrl+U — открыть исходный код текущей страницы.
F12 — открыть инструменты разработчика (Mac: Option+Command+U).
Фото на обложке: Thaspol Sangsee / Shutterstock
Подписывайтесь на наш Telegram-канал, чтобы быть в курсе последних новостей и событий!