Javascript - откройте указанный URL-адрес в новой вкладке, нажав кнопку

109

Я хотел бы иметь кнопку, которая перенаправляет на указанный URL и открывается в новой вкладке. Как это может быть сделано?

wong2
источник

Ответы:

144

Использовать это:

<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
54

В javascript вы можете:

window.open(url, "_blank");
сатнам
источник
29

Добавление target = "_ blank" должно сделать это:

<a id="myLink" href="www.google.com" target="_blank">google</a>
Тим Бют
источник
3
Понятно, жаль, что я это пропустил. Что ж, вы можете оформить ссылку так, чтобы она выглядела как кнопка. Если вы используете пользовательский интерфейс jQuery, просто используйте для этого кнопку .
Tim Büthe
1
Отличное решение для подавляющего большинства из нас, кто просто занимается веб-дизайном! Спасибо!
SMBiggs
1
+1, потому что вы дали хорошее решение тем, кто ищет простой ответ «открыть ссылку в новой вкладке», если они не используют кнопку.
user295583058
Именно то, что я хочу. Спасибо
Шахрукх Анвар
+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>
SpyderScript
источник
Что ж, я думаю, у меня есть новый предпочтительный метод.
Холтер,
Думаю, это более правильно отвечает на вопрос. +1 :)
Pramesh Bajracharya
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
0

попробуй это

<a id="link" href="www.gmail.com" target="_blank" >gmail</a>
Любовь Кумара
источник
-1

Попробуйте этот HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>
Радж Мори
источник
-5

Вы не можете. Это поведение доступно только для плагинов и может быть настроено только пользователем.

ckruse
источник
-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.
Сёго Макисима
1
Использование этого кода на самом деле не является ответом, и у вас нет мотивации.
Эдеф