Javascript - відкрийте задану URL-адресу на новій вкладці, натиснувши кнопку


109

Я хотів би мати кнопку, яка переспрямовує на задану URL-адресу і відкриється на новій вкладці. Як це можна зробити?

Відповіді:


143

Використовуй це:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

Працювало для мене, і це відкриє фактично нове вікно, що з'являється, а не новий повний браузер чи вкладку. Ви також можете додати в нього змінні, щоб не відображати конкретні риси веб-переглядача наступним чином:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

2
@ wong2 Можливо, хочу змінити відповідь на цю. Вибраний на даний момент далеко не є ефективним.
CSS


29

Додавання target = "_ blank" має зробити це:

<a id="myLink" href="www.google.com" target="_blank">google</a>

3
Бачу, вибачте, що пропустив це. Ну, ви можете стилізувати посилання, щоб виглядати і відчувати себе кнопкою. Якщо ви використовуєте інтерфейс jQuery, просто скористайтеся кнопкою .
Тім Бют

1
Відмінне рішення для переважної більшості з нас, хто просто займається веб-дизайном! Дякую!
SMBiggs

1
+1, оскільки ви дали гарне рішення тим, хто шукає просту відповідь "відкрити посилання на новій вкладці", якщо вони не використовують кнопку.
користувач295583058

Саме те, що я хочу. Спасибі
Шахрух Анвар

+1, якщо щось відкриває сторінку на новій вкладці, це логічно посилання, тому <a>тег підходить. Стилі слід використовувати, щоб він виглядав як кнопка.
Кос

21

Ви можете забути про використання JavaScript, оскільки веб-переглядач контролює, чи відкриється він у новій вкладці. Найкращий варіант замість цього зробити щось подібне:

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

Це завжди відкриється в новій вкладці, незалежно від того, який браузер використовує клієнт через target="_blank"атрибут.

Якщо все, що вам потрібно, це перенаправлення без динамічних параметрів, ви можете використовувати посилання з target="_blank"атрибутом, як пропонує Тім Бют.


1
Працює у міру необхідності (перевірено на chrome, firefox, IE10) :)
Zeeshan

10

Використовуйте window.openзамість, window.locationщоб відкрити нове вікно або вкладку (залежно від налаштувань браузера).

Ваша загадка не працює, тому що немає buttonелемента для вибору. Спробуйте input[type=button]або дайте кнопку idта використовуйте #buttonId.


10

Мій кращий метод має перевагу, що у вашій розмітці немає вбудованого JavaScript:

CSS

a {
  color: inherit;
  text-decoration: none;
}

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>

Ну, мабуть, у мене є новий бажаний метод.
Півтора

Я думаю, що цей відповідь відповідає на питання правильніше. +1 :)
Прамеш Байрачаря

3

Відкрити в новій вкладці за допомогою javascript

 <button onclick="window.open('https://www.our-url.com')" id="myButton" 
 class="btn request-callback" >Explore More  </button>

1

Я просто використав target = "_ blank" під тегом форми, і він добре працював з FF та Chrome, де він відкривається в новому тегу, але з IE він відкривається в новому вікні.


1
Відкриється вкладка чи вікно, визначається параметрами браузера користувача. Я не знаю про IE, але в більшості браузерів веб-сторінка не може вибрати, чи відкриється посилання на вкладці чи вікні, але користувач може налаштувати її.
joeytwiddle


-1

Спробуйте цей HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>

-5

Ви не можете. Така поведінка доступна лише для плагінів і може бути налаштована лише користувачем.


-5
<BUTTON NAME='my_button' VALUE=sequence_no TYPE='SUBMIT' style="background-color:transparent ; border:none; color:blue;" onclick="this.form.target='_blank';return true;"><u>open new page</u></BUTTON>

Ця кнопка буде схожа на URL-адресу і її можна буде відкрити на новій вкладці.


вам потрібно додати "форму"
nerkn

Недоцільно (семантично кажучи) мати кнопку, щоб вести себе як посилання. Замість цього використовуйте aтег.
Анріке Шрайнер

-6

ВИКОРИСТУЙТЕ цей код

function openBackWindow(url,popName){
        var popupWindow = window.open(url,popName,'scrollbars=1,height=650,width=1050');
          if($.browser.msie){
            popupWindow.blur();
            window.focus();
        }else{
           blurPopunder();
        }
      };

    function blurPopunder() {
            var winBlankPopup = window.open("about:blank");
            if (winBlankPopup) {
                winBlankPopup.focus();
                winBlankPopup.close()
            }
    };

ІТ чудово працює у Mozilla, IE та chrome на та менш ніж 22 версії; але не працює в Opera та Safari.


2
Це не найкраща відповідь! Суцільний -1.
Shougo Makishima

1
ВИКОРИСТУЙТЕ цей код насправді не є відповіддю, і у вас немає мотивації.
Едеф
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.