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

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" и радуемся. А вот по клику на кнопке открыть страницу в новой вкладке уже чуть сложнее. Ну нет у кнопки атрибута target.

На днях переносил наши корпоративные самописные сайты на новый хостинг и пришлось в коде сайтов вносить некоторые изменения. В ходе этой работы наткнулся на вот такую задачу - Как по клику на кнопке открыть страницу в новой вкладке. Саму по себе эту задачу я решил уже очень давно, много лет назад, но поскольку в то время я, можно сказать, на этих сайтах и учился web-программированию, то задача, как я убедился была решена не самым оптимальным образом. Менялся дизайн, наполнение, но кодинг в основном оставался прежним. А вот теперь, увидев этот код, я его быстренько оптимизировал, а заодно решил поделиться способом. Ведь многие пытаются что-то сами «прикрутить» к своим сайтам и вполне возможно, что статья кому-то и пригодится.

В случае с ссылками действительно всё просто.

<a href="http://info.ddw.kz/feed">RSS блога</a>

   откроет указанную страницу в текущем окне, а

<a href="http://info.ddw.kz/feed" target="_blank">RSS блога</a>

  откроет уже в новой вкладке.

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

Во-первых, чтобы вообще что-либо открыть по клику на кнопке, которая к тому-же находится не в блоке формы, а сама по себе, надо использовать метод кнопки OnClick.

Например вот так:

<input type="button" value="Наши партнеры" OnClick="location.href='partners.php'">

 В данном случае страница partners.php откроется в текущем окне браузера. Но бывает что надо открыть какую-то страницу в новом окне или вкладке. Как быть? В конструкцию <input type="button"... атрибут target прикрутить нельзя. Но зато в методе OnClick можно вызвать некую функцию JavaScript, которая сделает всё как надо.

Вот пример:

<input type="button" class="mbtnmen" value="Хочу скидку!" onclick="openPodarok()">

<script language="JavaScript">
<!-- hide
function openPodarok() {
  myWin= open("http://info.ddw.kz/mypage/podarok.html");
}
// -->
</script>

Казалось бы можно радоваться. По клику на кнопке ссылка открывается в новой вкладке... Но...

Это не очень удачное решение, хотя и работает.

Почему это решение не является оптимальным

Дело в том, что несколько позже мне понадобилось открывать ещё одну ссылку таким-же образом в новой вкладке. Я, конечно пошёл уже проторенным путём и быстренько дорисовал ещё одну функцию JavaScript, аналогичную первой. Но потом возникла потребность ещё в одной такой-же кнопке...

По итогу код стал выглядеть примерно так:

<input type="button" value="Хочу скидку!" onclick="openPodarok()">
<input type="button" value="Контакты" onclick="openKontakt()">
<input type="button" value="Блог" onclick="openBlogInfo()">

<script language="JavaScript">
<!-- hide
function openPodarok() {
  myWin= open("http://info.ddw.kz/mypage/podarok.html");
}
function openKontakt() {
  myWin= open("http://ok.ddw.kz/index.php?route=information/contact");
}
function openBlogInfo() {
  myWin= open("http://info.ddw.kz");
}
// -->
</script>

 Получалось, что на каждую кнопку писалась своя отдельная функция. Не оптимально. Не элегантно. Всё, конечно работало, но где поэзия кода?

Оптимальное решение

Зачем раздувать JavaScript, когда можно всё решить одной единственной функцией? А вдруг мне понадобится добавить ещё 5 таких вот кнопок? Поэтому решение тут другое. Функция JavaScript одна, а каждая кнопка передаёт ей параметром нужный URL.

Окончательно код теперь выглядит так:

<input type="button" value="Хочу скидку!" onclick="openNewWin('http://info.ddw.kz/mypage/podarok.html')">
<input type="button" value="Контакты" onclick="openNewWin('http://ok.ddw.kz/index.php?route=information/contact')">
<input type="button" value="Блог" onclick="openNewWin('http://info.ddw.kz')">

<script language="JavaScript">
<!-- hide
function openNewWin(url) {
  myWin= open(url);
}
// -->
</script>

 Как видите, кнопка передаёт параметром URL, а функция его принимает и открывает в новой вкладке. При этом код JavaScript намного уменьшился.

А можно и ещё проще

Да, отдельный JavaScript можно и не использовать. Все современные браузеры поддерживают некоторые скриптовые элементы и можно просто их использовать в коде своей кнопки.

Выглядит это примерно так:

<input type="button" class="button13" value="Узнать подробнее" onclick="window.open('https://ddw.kz/image/catalog/view/anons/pdf/Elka-v-morskom-stile.pdf')">

Как видите, использование в OnClick команды window.open с нужной ссылкой - откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.

Вот, собственно и всё. Теперь Вы знаете как по клику на кнопке открыть страницу в новой вкладке. Если кому-то это пригодится - пользуйтесь.

Удачи Вам и до встречи.

Материалы по теме:

Озвучка текста онлайн реалистичными голосами

Как вставить аудиофайл mp3 на сайт из Dropbox

Как правильно вставить видео с YouTube в запись блога

Для жителей Крыма и не только

Полноценный инстаграм через компьютер

Бесплатный онлайн конвертер файлов