Откройте URL в новой вкладке (а не в новом окне)

2102

Я пытаюсь открыть URL в новой вкладке, в отличие от всплывающего окна.

Я видел похожие вопросы, где ответы будут выглядеть примерно так:

window.open(url,'_blank');
window.open(url);

Но ни один из них не работал для меня, браузер все еще пытался открыть всплывающее окно.

javascript отметка
источник
85
Обычно это вопрос предпочтений. Некоторым людям нравятся окна (и яростно защищают это поведение), некоторые вкладки (и яростно защищают это поведение). Таким образом, вы будете побеждать поведение, которое обычно считается делом вкуса, а не дизайна.
Джаред Фарриш
42
Javascript ничего не знает о вашем браузере и вкладках по сравнению с окнами, поэтому браузер сам решает, как открыть новое окно.
Андрей
4
Как настроить Chrome для отображения его на новой вкладке, а не во всплывающем окне?
Марк
8
Gmail делает это как-то, по крайней мере, в Chrome. Shift + клик по строке электронной почты, и вы открываете эту электронную почту в новом окне. Ctrl + клик и вы открываете его в новой вкладке. Единственная проблема: копаться в запутанном коде gmail - это PITA
Серхио
48
@ Sergio, это поведение браузера по умолчанию для любой ссылки. (По крайней мере, для Chrome и Firefox.) Не имеет ничего общего с Gmail.
Qtax

Ответы:

929

Ничто из того, что автор не может сделать, может открыть новую вкладку вместо нового окна; это предпочтение пользователя . (Обратите внимание, что предпочтение пользователя по умолчанию в большинстве браузеров предназначено для новых вкладок, поэтому тривиальный тест в браузере, в котором это предпочтение не было изменено, не продемонстрирует этого.)

CSS3 предложил target-new , но спецификация была заброшена .

Обратное не верно; указав размеры для окна в третьем аргументе window.open(), вы можете запустить новое окно, когда предпочтение отдается вкладкам.

Quentin
источник
42
@AliHaideri Javascript не имеет ничего общего с тем, как открывается новая вкладка / окно. Это все определяется настройками вашего браузера. Использование window.openговорит браузеру открыть что-то новое, затем браузер открывает то, что выбрано в его настройках - вкладка или окно. В браузерах, с которыми вы тестировали, измените настройки, чтобы они открывались в новом окне вместо вкладки, и вы увидите, что решения других компаний ошибочны.
Ян
240
Невозможно сделать две вещи, которые тратят время других людей больше, чем рассказывать им что-то. (1) Сказать им, что нельзя сделать, можно . (2) Молчать и позволять им искать способ сделать что-то, что не может быть сделано.
Квентин
8
@Cupcake - Документация обычно не описывает описания функций, которые не существуют. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…
Квентин
9
@Neel - потому что он лаконично подходит к теме, о которой многие люди хотят знать.
Квентин,
4
Авторы могут делать что-то (в основном, писать другой код). Ничто из этого не вызовет вкладку вместо окна.
Квентин,
1734

Это трюк, 

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

В большинстве случаев это должно происходить непосредственно в onclickобработчике ссылки, чтобы предотвратить блокировку всплывающих окон и поведение по умолчанию «нового окна». Вы можете сделать это таким образом, или добавив прослушиватель событий к вашему DOMобъекту. 

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

Ринто Джордж
источник
117
Не работает. Получил сообщение справа от адресной строки: всплывающее окно заблокировано . Тогда я разрешил всплывающие окна. И вуаля, он открывается во всплывающем окне, а не во вкладке ! Chrome 22.0.1229.94 на OS X Lion.
Вскоре
39
@ b1naryatr0phy Это потому, что вы на самом деле не проверяли это должным образом. Измените настройки в ваших браузерах. Открывается ли он на вкладке или в окне, определяется настройками вашего браузера. Вы ничего не можете сделать, вызвав window.open (или любой другой Javascript), чтобы выбрать, как открыть новое окно / вкладку.
Ян
Вопрос: я установил URL без протокола (например, my.site.com/Controller/Index). В результате я получаю новое окно (вкладку) по URL, такому как URL текущей страницы (откуда я использую функцию OpenInNewTab), плюс передается в функцию URL. С окном протокола открывается по правильной ссылке. Почему?
user2167382
2
var win = window.open (url, '_blank'); _blank не обязательно, для window.open () вторым параметром является strWindowName, для: Строкового имени для нового окна. Имя может использоваться в качестве цели ссылок и форм с использованием атрибута target элемента <a> или <form>. Имя не должно содержать пробельных символов. Обратите внимание, что strWindowName не указывает заголовок нового окна.
HydRAnger
Есть ли способ сделать это, чтобы открыть новую вкладку без песочницы iframe? Когда я использую это, я получаю ошибки CORS, потому что значение document.domain не изменяется, поскольку оно открывается как iframe.
Идс ван дер Зее
380

window.open()не будет открываться в новой вкладке, если это не происходит в фактическом событии клика. В приведенном примере URL открывается по фактическому событию клика. Это будет работать при условии, что у пользователя есть соответствующие настройки в браузере .

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Точно так же, если вы пытаетесь выполнить Ajax-вызов внутри функции click и хотите открыть окно в случае успеха, убедитесь, что вы выполняете Ajax-вызов с установленным async : falseпараметром.

Венкат Котра
источник
28
Было бы неплохо отметить это как ПРАВИЛЬНЫЙ ответ. Мои тесты с Chrome v26 (Windows) подтверждают, что, если код находится в обработчике нажатия кнопки, он открывает новую вкладку и, если код вызывается программно, например, из консоли, то он открывает новое окно.
CyberFonic
2
@Ian Из моего тестирования в браузерах с настройками по умолчанию этот ответ работает в тех случаях, когда ответы выше не подходят. Принятый ответ, который гласит: «Вы ничего не можете сделать», верен только тогда, когда пользователь изменил настройки по умолчанию.
Гарфилд
@ Ян Для ясности я упомянул об этом в предупреждении о настройках пользователя. «Это будет работать при условии, что у пользователя есть соответствующие настройки в браузере». Я думаю, что большинство пользователей не меняют настройки браузера, и этот ответ работает для большинства из них.
Венкат Котра
async: falseне работает в Chrome Чтобы открыть новое окно из обратного вызова, вам нужно сначала открыть пустое окно перед отправкой HTTP-запроса, а затем обновить его. Вот хороший взлом .
attacomsian
250

window.open Не удается надежно открыть всплывающие окна на новой вкладке во всех браузерах

Различные браузеры реализуют поведение по- window.open разному, особенно с учетом предпочтений браузера пользователя. Вы не можете ожидать, что одно и то же поведение window.openбудет истинным для всех Internet Explorer, Firefox и Chrome из-за различных способов, которыми они обрабатывают настройки браузера пользователя.

Например, пользователи Internet Explorer (11) могут открывать всплывающие окна в новом окне или на новой вкладке, вы не можете заставить пользователей Internet Explorer 11 открывать всплывающие окна определенным образом window.open , как указано в ответе Квентина .

Что касается пользователей Firefox (29), использование window.open(url, '_blank') зависит от предпочтений вкладок их браузера, хотя вы все равно можете заставить их открывать всплывающие окна в новом окне, указав ширину и высоту (см. Раздел «Как насчет Chrome?» Ниже).

демонстрация

Зайдите в настройки вашего браузера и настройте его для открытия всплывающих окон в новом окне.

Internet Explorer (11)

Диалог настроек Internet Explorer 1

Диалог настроек вкладки Internet Explorer

Тестовая страница

После настройки Internet Explorer (11) для открытия всплывающих окон в новом окне, как показано выше, используйте следующую тестовую страницу для тестирования window.open:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Обратите внимание, что всплывающие окна открываются в новом окне, а не в новой вкладке.

Вы также можете протестировать эти фрагменты выше в Firefox (29) с его предпочтением вкладки, установленным для новых окон, и увидеть те же результаты.

Как насчет Chrome? Он реализуется window.openиначе, чем Internet Explorer (11) и Firefox (29).

Я не уверен на 100%, но похоже, что Chrome (версия 34.0.1847.131 m) не имеет никаких настроек, которые пользователь может использовать, чтобы выбрать, открывать ли всплывающие окна в новом окне или на новой вкладке (например, Firefox и Internet Explorer иметь). Я проверил документацию Chrome для управления всплывающими окнами , но там ничего не упоминалось о подобных вещах.

Также, опять же, разные браузеры, кажется, реализуют поведение по- window.open разному. В Chrome и Firefox указание ширины и высоты вызовет всплывающее окно, даже если пользователь установил Firefox (29) для открытия новых окон на новой вкладке (как упоминалось в ответах на JavaScript, которые открываются в новом окне, а не на вкладке ) :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Однако тот же фрагмент кода выше всегда будет открывать новую вкладку в Internet Explorer 11, если пользователи устанавливают вкладки в качестве своих настроек браузера, даже если не указать ширину и высоту, для них появится новое всплывающее окно.

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

Резюме

Различные браузеры по-разному реализуют поведение в window.open зависимости от предпочтений браузера пользователя. Вы не можете ожидать, что одно и то же поведение window.openбудет истинным для всех Internet Explorer, Firefox и Chrome из-за различных способов, которыми они обрабатывают настройки браузера пользователя.

Дополнительное Чтение

Питер Мортенсен
источник
12
Вы не ответили на вопрос, вы только что доказали, что window.open несовместим.
BentOnCoding
223

Один лайнер:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

Он создает виртуальный aэлемент, дает его target="_blank"так, чтобы он открывался в новой вкладке, дает ему правильный url hrefи затем щелкает по нему.

И если вы хотите, на основании этого вы можете создать некоторую функцию:

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

и тогда вы можете использовать его как:

openInNewTab("https://google.com");

Важная заметка:

openInNewTab(а также любое другое решение на этой странице) должно быть вызвано во время обратного вызова действия пользователя - например. внутри события щелчка (не обязательно в функции обратного вызова напрямую, но во время действия щелчка).

Если вы будете вызывать его вручную в какой-то случайный момент (например, внутри интервала или после ответа сервера) - он может быть заблокирован браузером (что имеет смысл, поскольку это может быть угрозой безопасности и может привести к очень плохому пользовательскому интерфейсу). )

pie6k
источник
8
Спасибо. В вашем чистом JS отсутствует кусок - как писал Люк Алдертон (см. Ниже), вам нужно прикрепить созданный элемент к телу документа, в вашем коде он висит в пустоте и, по крайней мере, в Firefox 37, он ничего не делает ,
Гринольдман
4
@mcginniwa Любое подобное действие - если оно не вызвано действием пользователя, например щелчком мыши, оно блокирует всплывающие окна. Представьте, что вы можете просто открыть любой URL с помощью Javascript без действий пользователя - это было бы довольно опасно. Если вы поместите этот код в событие, такое как функция щелчка - он будет работать нормально - то же самое со всеми предлагаемыми здесь решениями.
pie6k
4
Вы можете упростить свой код следующим образом: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
Shaedrich
5
@shaedrich Вдохновленный вашими отрывками, я добавил не-jquery однострочник:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
pie6k
Это не работает в FF!
Нолеш
91

Если вы используете window.open(url, '_blank'), он будет заблокирован (блокировщик всплывающих окон) в Chrome.

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

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

С чистым JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
Мохаммед Сейфер
источник
Но в этом вопросе они не упоминают об авторе сайта. Только хотите открыть URL в новом окне или новой вкладке. Это зависит от браузера. Нам не нужно беспокоиться об авторе. Пожалуйста, проверьте эту скрипку. Это работает
Мохаммед Сейфер
Обнаружено, что он не работает на js fiddle и plunker, но работает при создании html-файла. Это потому, что js fiddle, вывод отображается в iframe, поэтому новое окно заблокировано из-заthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
Мохаммед Сейфер
67

Чтобы разработать ответ Стивена Спилберга, я сделал это в таком случае:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

Таким образом, непосредственно перед тем, как браузер перейдет по ссылке, я устанавливаю атрибут target, поэтому он откроет ссылку в новой вкладке или окне ( зависит от настроек пользователя ).

Пример одной строки в jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

Этого также можно достичь, просто используя API-интерфейсы DOM для браузера:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
arikfr
источник
58

Я использую следующее, и это работает очень хорошо!

window.open(url, '_blank').focus();
Иезекииль Гарсия
источник
2
Это может открыться в новой вкладке или окне в зависимости от настроек браузера. Вопрос конкретно об открытии в новой вкладке, даже если настройки для нового окна.
Квентин
19

Интересным фактом является то, что новая вкладка не может быть открыта, если действие не вызывается пользователем (нажатием кнопки или чего-то еще) или, например, если оно асинхронное, это НЕ откроется в новой вкладке:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Но это может открыться в новой вкладке, в зависимости от настроек браузера:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
karaxuna
источник
2
Это блокируется как всплывающее окно в Firefox 28, Chrome 34b и Safari 7.0.2, все стандартные настройки. :(
Стив Мейснер,
1
«Новая вкладка не может быть открыта, если действие не вызывается пользователем (нажатием кнопки или чего-то другого) или если оно асинхронное» - верно для Chrome, но не для всех браузеров. Сохраните <script>open('http://google.com')</script>в .htmlфайл и откройте его в новой установке последней версии Firefox; вы заметите, что Firefox с радостью открывает Google в новой вкладке (возможно, после того, как вы скажете ему разрешить всплывающие окна), а не в новом окне.
Марк Амери
13

Просто опуская параметры [strWindowFeatures], вы откроете новую вкладку, ЕСЛИ БЕЗ переопределения настроек браузера (настройка браузера превосходит JavaScript).

Новое окно

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Новая вкладка

var myWin = window.open(strUrl, strWindowName);

-- или --

var myWin = window.open(strUrl);
MannyC
источник
11 
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
spirinvladimir
источник
11

Вы можете использовать трюк с form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

демоверсия jsFiddle

CodeNinja
источник
4
Если вы используете этот метод, убедитесь, что в URL нет параметров запроса, потому что они будут пропущены при отправке формы. Одним из решений является встраивание скрытых элементов ввода в элемент формы, которые имеют nameв valueкачестве значения ключа и в качестве параметра все параметры внутри параметров запроса. А затем отправьте форму
Мудассир Али
это можно сделать проще с помощью aтега вместо формы и использования .click()метода jQuery для его «отправки». проверьте мой ответ
10

Это не имеет ничего общего с настройками браузера, если вы пытаетесь открыть новую вкладку из пользовательской функции.

На этой странице откройте консоль JavaScript и введите:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

И он будет пытаться открыть всплывающее окно независимо от ваших настроек, потому что «щелчок» происходит от пользовательского действия.

Чтобы вести себя как настоящий «щелчок мышью» по ссылке, вам нужно следовать совету @ spirinvladimir и действительно создать его:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Вот полный пример (не пытайтесь сделать это в jsFiddle или аналогичных онлайн-редакторах, так как он не позволит вам перенаправлять на внешние страницы оттуда):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
chipairon
источник
1
Я закончил тем, что пошел к другому решению, где я делаю w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)согласно theandystratton.com/2012/…
Пол Tomblin
11
@FahadAbidJanjua Это абсолютно не правильно. Это все еще зависит от настроек браузера. В спецификациях HTML или Javascript нет ничего, что объявляло бы, что «настраиваемое действие» должно открываться во всплывающем окне, а не на вкладке. Действительно, ни один из браузеров на моем текущем компьютере не отображает это поведение.
nmclean
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
Эндрю Лука
источник
1
Это может открыться в новой вкладке или окне в зависимости от настроек браузера. Вопрос конкретно об открытии в новой вкладке, даже если настройки для нового окна.
Квентин
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Bryan
источник
Это может открыться в новой вкладке или окне в зависимости от настроек браузера. Вопрос конкретно об открытии в новой вкладке, даже если настройки для нового окна.
Квентин
2

Или вы можете просто создать элемент ссылки и щелкнуть по нему ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Это не должно быть заблокировано никакими блокировщиками всплывающих окон ... Надеюсь.

Люк Олдертон
источник
2

На этот вопрос есть ответ, и его нет.

Я нашел легкую работу вокруг:

Шаг 1: Создайте невидимую ссылку:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Шаг 2: Нажмите на эту ссылку программно:

document.getElementById("yourId").click();

Ну вот! Работает шарм для меня.

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

введите описание изображения здесь

Я исследовал много информации о том, как открыть новую вкладку и остаться на той же вкладке. Я нашел один маленький трюк, чтобы сделать это. Предположим, у вас есть URL, который вам нужно открыть - newUrl и старый url - currentUrl , на котором вы должны остаться после открытия новой вкладки. Код JS будет выглядеть примерно так:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
Ваха
источник
Речь идет об открытии новой вкладки, когда пользователь предпочитает открывать их в новых окнах. Он не спрашивает, как открыть URL-адрес в новой вкладке, одновременно открывая другой URL-адрес в существующей вкладке.
Квентин
0

Как насчет создания атрибута as as <a>со значением as и_blanktargeturlhref отображения стиля : скрытого с дочерним элементом? Затем добавьте его в DOM и запустите событие click для дочернего элемента.

ОБНОВИТЬ

Это не работает Браузер предотвращает поведение по умолчанию. Он может быть запущен программно, но не соответствует поведению по умолчанию.

Проверьте и убедитесь сами: http://jsfiddle.net/4S4ET/

Виктор
источник
-1

Открытие новой вкладки из расширения Firefox (Mozilla) выглядит следующим образом:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Smile4ever
источник
-1

Этот способ аналогичен приведенному выше решению, но реализован по-другому

.social_icon -> некоторый класс с CSS 

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
CG_DEV
источник
-1

Это может быть взломом, но в Firefox, если вы укажете третий параметр 'fullscreen = yes', откроется новое новое окно.

Например,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

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

Кунал
источник
-1

это работа для меня, просто предотвратить событие, добавить URL-адрес, а <a> tagзатем вызвать событие click на этом tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
Карлос Салазар
источник
Это может открыться в новой вкладке или окне в зависимости от настроек браузера. Вопрос конкретно об открытии в новой вкладке, даже если настройки для нового окна.
Квентин
-1

window.open(url)Откроется URL в новом браузере Tab. Ниже JS альтернатива ему

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

Вот рабочий пример (фрагменты stackoverflow не позволяют открыть новую вкладку)

Камил Келчевски
источник
«Window.open (url) откроет URL в новой вкладке браузера» - он будет следовать предпочтениям пользователя для нового окна или новой вкладки. Это не заставит новую вкладку, когда предпочтение для окна. (О чем идет речь). То же самое относится и к target = _blank.
Квентин
Оба предложенных вами подхода неоднократно упоминались (и подвергались критике) в предыдущих 56 неотвеченных ответах на этот вопрос.
Квентин
-1

Открывать ли URL-адрес в новой вкладке или в новом окне, фактически зависит от настроек браузера пользователя. Нет способа переопределить его в JavaScript.

window.open()ведет себя по-разному в зависимости от того, как он используется. Если он вызывается как прямой результат действия пользователя , скажем, нажатия кнопки, он должен нормально работать и открыть новую вкладку (или окно):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

Однако, если вы попытаетесь открыть новую вкладку из обратного вызова AJAX-запроса , браузер заблокирует ее, так как это было прямое действие пользователя.

Чтобы обойти блокировку всплывающих окон и открыть новую вкладку из обратного вызова, вот небольшой взлом :

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
attacomsian
источник
-1

Я пробовал таким образом, и, кажется, работает нормально

window.open('example.com', 'newWin');

Я нашел много рабочих примеров здесь:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

Артем Шевцов
источник
Это откроется в новой вкладке или окне в соответствии с предпочтениями пользователя. Это не заставит новую вкладку, о которой вопрос.
Квентин
Вы упустили момент, когда ОП уже попробовал это? или stackoverflow.com/a/59565074/19068 ? или stackoverflow.com/a/35939565/19068 ? или stackoverflow.com/a/30512485/19068 ? или stackoverflow.com/a/11384018/19068 ? или stackoverflow.com/a/26990478/19068 ?
Квентин
@Quentin Я пропустил эту часть, но когда я попытался вызвать window.open со вторым параметром «windowName», равным «_blank» или вообще без него, всплывающее окно или новая вкладка не появились в последнем Google Chrome. Когда я изменил имя окна на «newWin», открылась новая вкладка. Это странно, потому что параметр имени окна является необязательным.
Артем Шевцов
-4

Я собираюсь несколько согласиться с человеком, который написал (перефразировал здесь): «Для ссылки на существующей веб-странице браузер всегда будет открывать ссылку в новой вкладке, если новая страница является частью того же веб-сайта, что и существующая веб-страница. " По крайней мере, для меня это «общее правило» работает в Chrome, Firefox, Opera, IE, Safari, SeaMonkey и Konqueror.

Во всяком случае, есть менее сложный способ воспользоваться тем, что представил другой человек. Предположим, что мы говорим о вашем собственном веб-сайте («thissite.com» ниже), где вы хотите контролировать действия браузера, а затем, ниже, вы хотите, чтобы «specialpage.htm» был ПУСТОЙ, без HTML вообще ( экономит время отправки данных с сервера!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
vernonner3voltazim
источник
-7

Если вы хотите открыть только внешние ссылки (ссылки, которые ведут на другие сайты), тогда этот фрагмент JavaScript / jQuery работает хорошо:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});
Michael
источник
Этот ответ не подходит для этого вопроса. НО, это очень полезно подумать! Спасибо за вашу идею!
Нури Акман
-9

Браузер всегда будет открывать ссылку в новой вкладке, если ссылка находится в том же домене (на том же веб-сайте). Если ссылка находится на другом домене, она откроется в новой вкладке / окне, в зависимости от настроек браузера.

Итак, согласно этому, мы можем использовать:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

И добавьте немного кода jQuery:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

Итак, сначала откройте новое окно на том же веб-сайте с целью _blank (оно откроет его в новой вкладке), а затем откройте нужный веб-сайт в этом новом окне.

loshMiS
источник