Огни большого города https://obg.kz

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

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут 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 намного уменьшился.

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

Обновление статьи от 03.10.2019 г.

Да, отдельный 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 с нужной ссылкой - откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.

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

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

aleksandr_karataev1_cr

Смотрите также

WordPress изображения. Как избавиться от лишних…

WordPress изображения. Как избавиться от лишних…

Изображения WordPress, пожалуй, самая неудачная часть реализации этого, в общем-то, неплохого движка. Я уже писал …

Видео с YouTube без чёрных рамок

Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко! YouTube настолько прочно вошёл в нашу жизнь, что сложно представить …

50 комментариев

  1. Саш, привет! А где должен жить этот скрипт? В каком файле и каком месте? 

    • Миша, скрипт желательно размещать до самой кнопки. Можно в начале страницы, можно непосредственно перед кнопками, в принципе можно и внизу. Главное, что-бы он был. Я писал вообще про сайты, как раз сейчас занимаюсь своим рукописным – делаю ему адаптивный дизайн, увлекательное, кстати, занятие… Но если говорить применительно к  WordPress, то всё точно так-же. Можно прямо в статье (в текстовом редакторе), чтобы не загружать скриптами весь блог.

      • Я так понимаю, HTML кнопки пишем в текстовом редакторе, если кнопка в статье, а скрипт установлен постоянно в одном каком-то месте, например: между <head> и </head>

         

        Саша, я указал другую ссылку в коммент-форме, попробуй, с неё так же проблемно войти в блог или это только на Виртуале у меня проблема? 

        • Можно и в самой статье, при условии, что перейти в текстовый режим. В визуальном редактор портит код…

          Я вот попробовал, прямо в статье:

          <p>Ниже скрипт</p>
          <script>
              function openNewWin(url) {
                myWin= open(url);
              }
          </script>
          <p>Ниже кнопки</p>
          <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')">

          Работает в таком виде. Но это, конечно неудобно. Для WordPress скрипт лучше хранить в хидере наверное, сделать js-файл и ссылку на него, как вариант. А вот для виджетов, которые поддерживают HTML это подойдёт.

          Миша по поводу доступности – проблемы не у тебя, это у нас тут не понять чего…

          • Александр, здравствуйте.
            Подскажите есть ли возможность менять размер, цвет, стиль шрифта. И цвета самой кнопки?
            Заранее спасибо 
             

          • Это легко делается при помощи CSS. Можно изменить всё, что угодно.

          • Здравствуйте. Спасибо за быстрый ответ. Я можно сказать чайник в этом деле. Вы не могли бы скинуть где это посмотреть или выложить какой нибудь пример. Заранее спасибо.

          • Надо разбираться в CSS, в сети примеров для освоения достаточно. Вот упрощённо:

            <input type="button" value="Кнопка" style="background: #3936a3; text-shadow: #0c1252 0 1px 0; color: #fff; font-family: helvetica, serif; padding: 4.5px 18px; 
               font-size: 14px; text-decoration: none; vertical-align: middle;"/>

            Здесь я указал кое какие стили для кнопки, но более правильное решение – вынести стили в отдельный css а в коде кнопки указывать класс.

            Например CSS:

            .submit-button {
               border: 1px solid #0e1670;
               background: #3936a3;
               background: -webkit-gradient(linear, left top, left bottom, from(#888de3), to(#3936a3));
               background: -webkit-linear-gradient(top, #888de3, #3936a3);
               background: -moz-linear-gradient(top, #888de3, #3936a3);
               background: -ms-linear-gradient(top, #888de3, #3936a3);
               background: -o-linear-gradient(top, #888de3, #3936a3);
               background-image: -ms-linear-gradient(top, #888de3 0%, #3936a3 100%);
               -webkit-border-radius: 4px;
               -moz-border-radius: 4px;
               border-radius: 4px;
               -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
               -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
               box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
               text-shadow: #0c1252 0 1px 0;
               color: #fff;
               font-family: helvetica, serif;
               padding: 4.5px 18px;
               font-size: 14px;
               text-decoration: none;
               vertical-align: middle;
               }
            .submit-button:hover {
               border: 1px solid #bfbfd6;
               text-shadow: #0c1252 0 1px 0;
               background: #05178a;
               background: -webkit-gradient(linear, left top, left bottom, from(#5a5abf), to(#05178a));
               background: -webkit-linear-gradient(top, #5a5abf, #05178a);
               background: -moz-linear-gradient(top, #5a5abf, #05178a);
               background: -ms-linear-gradient(top, #5a5abf, #05178a);
               background: -o-linear-gradient(top, #5a5abf, #05178a);
               background-image: -ms-linear-gradient(top, #5a5abf 0%, #05178a 100%);
               color: #fff;
               }
            .submit-button:active {
               text-shadow: #140c52 0 1px 0;
               border: 1px solid #725de8;
               background: #bdc6de;
               background: -webkit-gradient(linear, left top, left bottom, from(#7fa0e0), to(#05178a));
               background: -webkit-linear-gradient(top, #7fa0e0, #bdc6de);
               background: -moz-linear-gradient(top, #7fa0e0, #bdc6de);
               background: -ms-linear-gradient(top, #7fa0e0, #bdc6de);
               background: -o-linear-gradient(top, #7fa0e0, #bdc6de);
               background-image: -ms-linear-gradient(top, #7fa0e0 0%, #bdc6de 100%);
               color: #fff;
               }

            Тогда код кнопки такой:

            <input type="submit" value="Получать" class="submit-button"/>

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

          • Просто класс!! Огромное спасибо! 
            Действительно для моей задачи этого было более чем достаточно.
            Еще раз спасибо!

  2. Александр, поясни пожалуйста, почему в начале скрипта стоит<!– hide, а  конец скрипта // –> уже комментарий.  

    Не знаю пригодится ли мне это, но спасибо, что поделились информацией.

    • Софья, здравствуй. Дело в том, что некоторые браузеры не поддерживают JavaScript, либо он попросту отключен на уровне пользователя. В таких случаях скрипт не сработает, а просто отобразится на странице как текст. Нам это надо? Вот для предотвращения такого безобразия и стоит HTML-заглушка.

  3. Саша, привет! Интересное решение, может и пригодится в будущем. Так что спасибо. Я там кстати в скайпе тебе писал, но ответа пока нет. 

  4. Я для открытия ссылок в новом окне с помощью метода Window.open. Когда искал как сделать первое что попалось.

    onclick="window.open('URL сайта')"

     

  5. Кнопками не в виде картинок или текстовых ссылок, как ни странно, пользоваться не приходилось. Но теперь буду знать, как открыть страницу в новой вкладке по клику на кнопке. Возможно, еще пригодится.

  6. Александр, отличная идея открывать такие ссылки через функцию. Если в дальнейшем захочется загружать новую страницу в том же окне, или в окне определённого размера, достаточно изменить тело функции.

    В контексте статьи, присваивание myWin= можно не использовать — это может понадобится на случай получения доступа к созданному окну.

    Ещё одно, атрибут language для тега script является устаревшим, его использовать не нужно. Хотя сам до сих пор по привычке пишу <script type="text/javascript"> или <input type="text">, в то время, как данные значения подразумеваются по умолчанию.

    • Да, Андрей, абсолютно верно. myWin тут совсем не обязателен, просто код выдрал из рабочего сайта, а там когда-то как раз и была манипуляция окном, вот и осталось. Тем не менее это никак не влияет ни на работу скрипта, ни на его суть…

      Атрибут language тоже использую по привычке –  я ещё тот мастодонт, который лет 10 назад использовал не только JavaScript, но и VBScript. Хотя и в те времена, несмотря на требование присутствия атрибута language, его можно было не использовать – по умолчанию всё-равно считалось, что это именно JavaScript… Давно обратил на это внимание, но привычка, как говорится, вторая натура…

  7. С такой проблемой не сталкивался, но в случае чего знаю, где искать ответы. 

  8. Наверно, мне это не пригодится, но читать ваши статьи интересно и для меня понятно всё.  

  9. Александр, спасибо за отличное решение! Всегда может понадобится, теперь буду знать где брать инструкцию! 

    • Спасибо, Александр. Собственно на WordPress это мало востребовано, разве что в виджетах может быть. А при самостоятельной вёрстке сайтов действительно может пригодится…

  10. Приветствую, Александр! Я не силен в коде, но могу сгенерить код в виджет для установки баннера в шаблон WordPress с помощью редактора вкладки HTML в записи, загрузить картинку, выделить, нажать на цепочки и в поле для ссылке нажать галочку "открыть в новом окне", после скопировать код и вставить его в виджет, думаю такой метод много кто использует на WordPress?

    • Приветствую, Рубен! Может быть можно и так, но я предпочитаю код писать сразу ручками… Скорее всего, тот способ, который Вы привели действительно используется многими… Но вот как это относится к кнопке не представляю. Ссылку-то открыть в новом окне и без того несложно. А разве кнопку со скриптом Вы таким способом сгенерируете?

  11. Может куда удобнее обучить пользователей использовать все стандартные функции мышки (например клик на колесико откроет ссылку в новой вкладке без какой-либо дополнительной разметки автором блога)?

    • Обучить пользователей? Как Вы это себе представляете? Много ли пользователей вообще имеют представление о том, что колёсико мыши предназначено не только для скрола? Качественный ресурс – это когда что бы пользователь ни делал – происходит то, что запланировал хозяин. Я и сам не додумался бы по кнопке кликать нажатием на колёсико… cheeky

  12. Спасибо, освежил свои знания в html-)

  13. Очень полезная информация для тех, кто сам создаёт дизайн сайта или что-то меняет в нём, копается в кодах, тема востребована, и про "колёсико"  было бы интересно почитать, я не знала о такой функции мышки 🙂

  14. Посоветуйте, где получить начальные знания  по PHP или JavaScript ?

    HTML и CSS знакомо.

    • В Сети много неплохих ресурсов по этой теме. Например вот и вот… По первой ссылке можно вообще с нуля изучать, там-же есть и ссылки на учебники… И вообще – поиск рулит, как говорится… Я, например, бывает "спотыкаюсь" на какой-то задаче и тогда просто набираю в поисковике что-то типа – Как сделать … в php. Как правило сразу находятся конкретные ответы…

  15. Спасибо, Александр, хоть я и в приличном возрасте, попробую, почему то кажется,  что чего то достигну.

    • Почему нет? Я тоже далеко не мальчик, но точно так же всё и постигал. да и продолжаю постигать. Процесс нескончаемый. Нигде этому не учился, 25 лет в Армии, а там другие науки и т.д…

  16. Да, я тоже 25 лет в той же Армии, и 21 уже после, так что Вас понимаю как никто.

  17. Вместо target="_blank" пиши target='win'

    И всё прекрасно работает без всякой манипуляции.

  18. очень полезная информация, спасибо

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

 Ясогласен с политикой конфиденциальности сайта и пользовательским соглашением