JavaScript: открытие ссылки в новой вкладке через location.href

Быстрый ответ

Для того чтобы открыть URL-адрес в новой вкладке, воспользуйтесь методом window.open() с параметром '_blank':

window.open('http://www.example.com', '_blank'); // Этот нюанс может оказаться крайне важным!

Метод window.open() инициирует открытие новой вкладки с указанным вами адресом.

Создание кликабельных ссылок с использованием JavaScript

Создайте и совершите клик по динамически генерируемой ссылке <a> для открытия её в новом окне. Этот подход бывает полезен, когда открытие ссылки нужно связать с другим событием, не связанным с кликом:

let link = document.createElement("a");
link.href = "http://www.example.com";
link.target = "_blank";
document.body.appendChild(link);
link.click(); // Создаётся впечатление, что клик совершил пользователь!
document.body.removeChild(link);

Создание такого объекта – это словно магический трюк: кажется, что невидимая сила нажимает на ссылку от имени пользователя. Плюс, данный метод эффективнее обходит блокировку всплывающих окон.

Требуется полный URL

Использование window.open() требует указания полного URL, включая протокол (http или https), чтобы избежать непредвиденных ошибок:

window.open('https://www.example.com', '_blank'); // Всегда указывайте полные адреса!

В программировании внезапные сюрпризы редко бывают приятными!

Управление навигацией с помощью программного кода

Дайте id элементу <a> и контролируйте навигацию при помощи JavaScript:

<a href="http://www.example.com" target="_blank" id="myLink">Открыть ссылку</a>

document.getElementById("myLink").click(); // Наша ссылка подчиняется командам кода!

Вуаля! Теперь вы управляете поведением ссылки из JavaScript.

Учитывайте пользовательский опыт

Не забывайте, что пользователь – немаловажная часть взаимодействия. Не перегружайте их лишними окнами, оценивайте навязчивость своих действий:

if (userLooksInterested()) {
    window.open('http://interesting.stuff.com', '_blank');
} else if (userNeedsABreak()) {
    suggestTakingABreak(); // Или, может быть, стоит предложить пользователю отдохнуть?
}

Визуализация

Вот наглядная иллюстрация: представьте, что window.open() в сочетании с _blank открывает новую вкладку, словно запуская самолётик:

С использованием `location.href`:      🛩️ ➡️ Текущее окно
С использованием `target="_blank"`:    🛩️ ➡️🆕 Новое окно/вкладка

На языке JavaScript:

window.open(url, '_blank'); // 🛩️ 🚀 Открываем новые горизонты (окна)

Попроще: если location.href – это переход в другую комнату в том же доме, то window.open() – это портал в новое измерение!

Остерегайтесь блокировщиков всплывающих окон

Блокировщики всплывающих окон защищают пользователей от навязчивых попапов. С window.open() стоит быть уверенным, что пользователь дал разрешение на подобные действия:

if (window.open('http://www.example.com', '_blank')) {
    console.log('Попап успешно открыт!');
} else {
    console.log('Попап заблокирован. Попросите пользователя разрешить всплывающие окна.');
}

Не перегружайте пользователя

Чрезмерное распространение окон может перегрузить человека. Делайте это только там, где это действительно уместно:

if (document.readyToLearn()) {
    window.open('https://www.example.com/tutorial', '_blank'); // Если бы только учебники могли автоматически открываться...
}

Помните об доступности

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

<a href="http://www.example.com" target="_blank">Открыть ссылку (откроется в новом окне)</a>

Ясность для пользователя всегда на первом месте!

Полезные материалы

1. Метод Window: open() – Веб API | MDN — Детальная документация по window.open() на MDN.
2. Открыть URL в новой вкладке (и не в новом окне) – Stack Overflow — Обсуждения и вопросы по window.open() на Stack Overflow.
3. Когда стоит использовать target="_blank" | CSS-Tricks — Подробный обзор target="_blank".
4. Как использовать HTML для открытия ссылки в новой вкладке – FreeCodeCamp — Руководство по использованию HTML для открытия ссылок в новой вкладке.
5. Окна и JavaScript (часть первая) — Подробнее ознакомимся с объектом window!