Как сделать чтобы страница открывалась в новой вкладке html
Добавил пользователь Alex Обновлено: 19.09.2024
Как открыть ссылку в новом окне с точки зрения html? Давайте рассмотрим этот вопрос детально.
target="_blank" - атрибут означает, что ссылка откроется в новой вкладке. По умолчанию все ссылки открываются в той же вкладке.
Открываем новое окно через JavaScript
Но не всегда требуется открыть ссылку в новой вкладке. Зачастую задача стоит в открытии нового окна браузера. В этом случае применяют средства JavaScript
- Toolbar=yes включает панель закладок, кнопки вперед, назад
- Location=yes включить адресную строку
- ScrollBars=yes разрешает скролл
Помимо этого стоит упомянуть про то, что любую ссылку можно открыть в новом окне щелкнув на неё правой кнопкой мыши, в выпадающем меню выбрать "открыть в новом окне".
Довольно распространенный вид действий, при работе в интернет-браузере, открытие ссылки, не закрывая текущей страницы (и наверное самый не эффективный с точки зрения понимания информации). Часто бывает так, что когда мы ищем информацию в интернете, мы открываем огромное количество вкладок и окон, зачастую обрастая ими. Это приводит к тому, что дальнейшее восприятие информации становится невозможным. Инструкция сегодня, как раз о том, как открывать ссылки во вкладках и окнах в браузере, и не терять текущей страницы (на случай, если Вы не теряетесь во вкладках и окнах).
Открыть ссылку в новом окне
Хотите открыть ссылку в отдельном окне? Это довольно просто сделать. Удерживайте нажатой клавишу “Shift”, затем щелкните ссылку которую хотите открыть в отдельном окне.
Эта функция дублируется в контекстном меню браузера. Открыть ссылку в новом окне можно нажав по ней правой клавишей мыши и выбрать “Открыть ссылку в новом окне".
Открыть ссылку в новой вкладке
Если Вы хотите остаться в прежнем окне браузера, и открыть в нем дополнительную вкладку, просто наведите курсор на ссылку и нажмите среднюю кнопку мыши. Дополнительная вкладка откроется в том же окне браузера, где вы работали.
Также, как и в предыдущем случае, открытие вкладки заложено в контекстном меню браузера. Просто наведите курсор на ссылку - нажмите правой клавишей мыши - в контекстном меню выберите опцию “Открыть ссылку в новой вкладке”.
Ничего сложного друзья! Также хочу заметить, что эти методы работают во всех основных интернет-браузерах, доступных для Microsoft Windows.
Послесловие
Интернет так разнообразен и порой очень сложен в понимании, поэтому зачастую, если Вы ищете одно, в поисковой выдаче может выпадать несколько другое. Равно как с открытием ссылки в новом окне или вкладке. Кто-то из моих читателей искал именно по этому запросу, намереваясь найти ответ как в браузере открывать ссылки в новых окнах и вкладках, а кто-то мог искать ответ на вопрос, как открывать ссылку в новом окне по нажатии на нее, имея в виду верстку HTML. О том, как что прописывать в HTML, чтобы ссылка открывалась в новом окне я тоже допишу в этой статье, ведь люди ищут, и пусть получат ответ на вопрос.
Открыть ссылку в новой вкладке или окне html
Итак, Вы вставляете ссылку себе на сайт и хотите, чтобы по нажатию на эту ссылку открытие происходило в дополнительном окне.
Представим, Вы пишите ссылку таким образом:
Чтобы ссылка открывалась так как Вам нужно (в новом окне), необходимо добавить атрибут target="_blank", и тогда ссылка примет следующий вид, и будет открываться по нажатию в новом окне:
Для перехода по страницам внутри одного сайта обычно используется относительный путь к файлу. Этот вопрос подробно рассмотрен в следующей теме.
Ссылка в новой вкладке
Ссылка может открываться не только в текущей, но и в новой вкладке. Для этого у тэга есть атрибут target . Он может принимать следующие значения:
target="_self" - в текущем окне (по умолчанию)
target="_blank" - в новом окне
target="_parent" - в родительском окне
target="_top" - во всю ширину окна
target= имя фрейма - в окне указанного фрейма
Атрибут target считается устаревшим и в пятой версии HTML атрибут является невалидным. В браузерах он не всегда страбатывает.
Для примера добавим ссылку, которая открывается в новой вкладке:
Ссылка в виде картинки
Ссылка на элемент страницы
Чтобы показать, как работает ссылка, создадим абзац и добавим ссылку, которая ведёт на него. А между ними вставим большой блок. Я сделаю его с помощью стилей, поэтому Вам в нём не нужно разбираться. Просто скопируйте тэг.
Состояние ссылок
Когда пользователь только открыл сайт, все ссылки на нём являются непосещёнными. Когда пользователь проходит по какой-то ссылке, браузер запоминает это, и ссылка становится посещённой.
Непосещённые ссылки отображаются синим цветом, а посещённые фиолетовым. Кроме того, текст ссылок подчёркнутый. Но всё это можно изменить с помощью CSS. Вид ссылок по умолчанию часто не соответствует стилю сайта. Поэтому ссылкам обычно задают другой стиль.
Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" и радуемся. А вот по клику на кнопке открыть страницу в новой вкладке уже чуть сложнее. Ну нет у кнопки атрибута target.
В случае с ссылками действительно всё просто.
откроет указанную страницу в текущем окне, а
откроет уже в новой вкладке.
Как по клику на кнопке открыть страницу в новой вкладке?
Во-первых, чтобы вообще что-либо открыть по клику на кнопке, которая к тому-же находится не в блоке формы, а сама по себе, надо использовать метод кнопки OnClick.
Например вот так:
В данном случае страница partners.php откроется в текущем окне браузера. Но бывает что надо открыть какую-то страницу в новом окне или вкладке. Как быть? В конструкцию Обновление статьи от 03.10.2019 г.
Да, отдельный JavaScript можно и не использовать. Все современные браузеры поддерживают некоторые скриптовые элементы и можно просто их использовать в коде своей кнопки.
Выглядит это примерно так:
Как видите, использование в OnClick команды window.open с нужной ссылкой - откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.
Вот, собственно и всё. Теперь Вы знаете как по клику на кнопке открыть страницу в новой вкладке. Если кому-то это пригодится - пользуйтесь.
Читайте также: