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

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

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

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

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


person Mark    schedule 05.02.2011    source источник
comment
Обычно это вопрос предпочтений. Некоторым людям нравятся окна (и яростно защищают это поведение), некоторые вкладки (и яростно защищают это поведение). Таким образом, вы победите поведение, которое обычно считается делом вкуса, а не дизайна.   -  person Jared Farrish    schedule 05.02.2011
comment
Javascript ничего не знает о вашем браузере, вкладках и окнах, поэтому решение, как открыть новое окно, действительно зависит от браузера.   -  person Andrey    schedule 05.02.2011
comment
Как настроить Chrome для отображения в новой вкладке, а не во всплывающем окне?   -  person Mark    schedule 05.02.2011
comment
Если, конечно, вы не разрабатываете надстройку для Firefox или не используете XULRunner для разработки клиента: разработчик. mozilla.org/en/Code_snippets/Tabbed_browser ПРИМЕЧАНИЕ. Эти методы работают только для клиентов, у которых есть определенная степень доступа к базовому браузеру, а не к окну на обычных страницах HTTP.   -  person Jared Farrish    schedule 05.02.2011
comment
Есть ли способ указать браузеру открыть новую пустую вкладку, а затем контролировать ее местоположение?   -  person Mark    schedule 05.02.2011
comment
@Mark F. Чтобы ответить на ваш вопрос об открытии ссылок во вкладках, попробуйте tothepc.com/archives/.   -  person Jared Farrish    schedule 05.02.2011
comment
Наверное, и хорошо, и плохо, что почти все они становятся жертвами блокировщиков всплывающих окон. Было бы неплохо, если бы я мог заставить пользователя щелкнуть OK или что-то в этом роде, а затем открыть страницу.   -  person jocull    schedule 19.09.2012
comment
Gmail как-то так делает, по крайней мере, в Chrome. Shift + щелкните строку электронного письма, и вы откроете это письмо в новом окне. Ctrl + щелчок, и вы откроете его в новой вкладке. Единственная проблема: копаться в запутанном коде Gmail - это PITA   -  person Sergio    schedule 03.06.2013
comment
@Sergio, это поведение браузера по умолчанию для любой ссылки. (По крайней мере, для Chrome и Firefox.) Не имеет ничего общего с Gmail.   -  person Qtax    schedule 02.08.2013
comment
может быть из-за настроек браузера, но для меня window.open(url); открыл его на новой вкладке Chrome и Firefox   -  person Raza Ahmed    schedule 30.08.2013
comment
quora.com делает это, нажимая на ссылку с новым вопросом. независимо от того, где вы находитесь, окно открывается в новой вкладке, а не в новом окне. Его также используют ‹a tag›, чтобы сделать это.   -  person Sangram Singh    schedule 12.11.2013
comment
@SangramSingh, это не функция javascript. Quora просто устанавливает для целевого атрибута тегов привязки значение _blank. Если вы снимите флажок, например, с параметра Firefox «Открывать новые окна в новой вкладке», эти ссылки будут открывать новые окна, а не вкладки.   -  person squidbe    schedule 13.12.2013
comment
@Qtax: если Shift + Click и Ctrl + Click открывают новые окна по-разному (в соответствии с предпочтениями пользователя), можете ли вы вызвать событие keypress в JS, чтобы имитировать такое нажатие клавиши и таким образом открыть новую вкладку (или окно)?   -  person David R Tribble    schedule 26.08.2016
comment
@DavidRTribble Нет. Вы не можете даже реально щелкнуть <a> с помощью JS.   -  person Qtax    schedule 26.08.2016
comment
Конкретное решение для Chrome (хотя и грязный взлом): window.open("https://www.google.co.kr/_/chrome/newtab?ie=UTF-8").   -  person Константин Ван    schedule 23.01.2018
comment
Альтернатива: в HTML - ›<button onClick="clickLink('#link')">Open Your Domain On New Tab</button> <a id="link" href="https://yourdomain.com" target="_blank" hidden></a> В Javascript -› function clickLink(id) { document.getElementById(id).click(); }   -  person ericgm    schedule 06.02.2018


Ответы (31)


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

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

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

person Quentin    schedule 05.02.2011
comment
Почему это принятый ответ? Я протестировал приведенные ниже ответы от герцога и arikfr, и они отлично работают в FF, Chrome и Opera, кроме IE (где он не работает) и Safari (где он открывается в новом окне вместо новой вкладки). - person CobaltBabyBear; 05.04.2013
comment
@AliHaideri Javascript не имеет ничего общего с тем, как открывается новая вкладка / окно. Все это определяется настройками вашего браузера. Использование window.open указывает браузеру открыть что-то новое, затем браузер открывает то, что выбрано в его настройках - вкладку или окно. В браузерах, с которыми вы тестировали, измените настройки, чтобы они открывались в новом окне вместо вкладки, и вы увидите, что другие решения неверны. - person Ian; 18.04.2013
comment
Что, если я просто хочу управлять им в собственном браузере? Chrome продолжает открывать всплывающие окна для window.open (), если я не использую решение Venkat. Удерживание Ctrl при нажатии кнопки также работает. - person Luke; 27.06.2013
comment
@PaulBrown Нет, если в настройках браузера по умолчанию ссылки открываются в новом окне, а не в новой вкладке. - person toon81; 11.07.2013
comment
Две вещи, которые тратят время других людей больше, чем говорят им, что что-то невозможно сделать. (1) Говорить им о том, что нельзя сделать можно сделать. (2) Сохранять молчание и позволять им искать способ сделать то, что невозможно сделать. - person Quentin; 06.12.2013
comment
@Luke: Если речь идет о том, как получить эту функциональность только в вашем собственном браузере, это, вероятно, вопрос для сайта SuperUsers. - person Trevor; 08.04.2014
comment
@Bondye - вопрос касается новых вкладок вместо новых окон. Скорее всего, у вас появятся новые окна. - person Quentin; 14.04.2014

Это уловка,

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

//or just
window.open(url, '_blank').focus();

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

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

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

person Rinto George    schedule 08.07.2012
comment
Не работает. Справа от адресной строки появилось сообщение: Всплывающее окно заблокировано. Потом я разрешил всплывающие окна. И вуаля, он открывается во всплывающем окне, а не на вкладке! Chrome 22.0.1229.94 в OS X Lion. - person nalply; 21.10.2012
comment
@ b1naryatr0phy Это потому, что вы на самом деле не тестировали его должным образом. Измените настройки в ваших браузерах. Открывается ли он во вкладке или в окне, определяется настройками вашего браузера. Вы ничего не можете сделать, вызвав window.open (или любой Javascript), чтобы выбрать, как открыть новое окно / вкладку. - person Ian; 18.04.2013
comment
Вопрос: Я установил url без протокола (например my.site.com/Controller/Index). В результате я получаю новое окно (вкладку) по URL-адресу, например URL-адресу текущей страницы (откуда я использую функцию OpenInNewTab), плюс передается в URL-адрес функции. Окно с протоколом открывается по правильной ссылке. Почему? - person user2167382; 15.05.2014
comment
var win = window.open (url, '_blank'); '_blank' не требуется для window.open ( ), второй параметр - strWindowName, для: Строковое имя для нового окна. Имя можно использовать в качестве цели ссылок и форм с помощью атрибута target элемента ‹a› или ‹form›. Имя не должно содержать пробелов. Обратите внимание, что strWindowName не указывает заголовок нового окна. - person hydRAnger; 18.11.2015
comment
Есть ли способ открыть новую вкладку без изолированного iframe? Когда я использую это, я получаю ошибки CORS, потому что значение document.domain не изменяется, поскольку он открывается как iframe. - person Ids van der Zee; 19.06.2017
comment
Примечание. Вы можете обнаружить, что URL-адрес, предоставленный для window.open, просто добавляет указанный URL-адрес к вашему текущему сайту. Пример: если вы находитесь на www.mywebsite.com и отправляете www.anotherwebsite.com на window.open, вы можете получить www.mywebsite.com/www.anotherwebsite.com. Решение состоит в том, чтобы сослаться на корневой документ сайта, который вы хотите посетить, то есть anotherwebsite.com. См .: stackoverflow.com/questions/23373990/ - person user; 23.12.2019
comment
@hydRAnger та же ссылка window.open () на MDN: чтобы открывать новое окно при каждом вызове window.open(), используйте специальное значение _blank для windowName. - person rdela; 07.06.2020
comment
если вы хотите использовать его с тегом, окружающим тег привязки, используйте onclick="event.preventDefault();" в теге привязки. - person wieczorek1990; 21.01.2021
comment
Если что-то требует изменения настроек браузера, избегайте этого! - person mukuljainx; 23.05.2021

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 внутри функции щелчка и хотите открыть окно в случае успеха, убедитесь, что вы выполняете вызов Ajax с установленной опцией async : false.

person Venkat Kotra    schedule 31.10.2012
comment
Было бы неплохо отметить этот ответ как ПРАВИЛЬНЫЙ. Мои тесты с Chrome v26 (Windows) подтверждают, что если код находится в обработчике нажатия кнопки, он открывает новую вкладку и если код вызывается программно, например из консоли, затем откроется новое окно. - person CyberFonic; 05.04.2013
comment
@Ian Из моего тестирования браузеров с настройками по умолчанию этот ответ работает в тех случаях, когда приведенные выше ответы не работают. Принятый ответ, в котором говорится, что вы ничего не можете сделать, верен только тогда, когда пользователь изменил настройки по умолчанию. - person Garfield; 19.04.2013
comment
@Ian Для ясности я упомянул об этом в ответе на предупреждение о пользовательских настройках. Это будет работать, если у пользователя есть соответствующие настройки в браузере. Я думаю, что большинство пользователей не меняют настройки браузера, и этот ответ работает для большинства из них. - person Venkat Kotra; 20.04.2013
comment
async: false не работает в Chrome. Чтобы открыть новое окно из обратного вызова, вам нужно сначала открыть пустое окно перед отправкой HTTP-запроса, а затем обновить его. Вот хороший способ взлома. - person attacomsian; 24.02.2020

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

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

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

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

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

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

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

person Adam Pietrasiak    schedule 06.02.2015
comment
Спасибо. В вашем чистом JS отсутствует часть - как написал Люк Олдертон (см. Ниже), вам нужно прикрепить созданный элемент к телу документа, в вашем коде он висит в пустоте и, по крайней мере, в Firefox 37 он ничего не делает . - person greenoldman; 24.05.2015
comment
@mcginniwa Любое подобное действие - если оно не вызвано действием пользователя, например щелчком мыши, включит блокировку всплывающих окон. Представьте, что вы можете просто открыть любой URL-адрес с помощью Javascript без каких-либо действий со стороны пользователя - это было бы довольно опасно. Если вы поместите этот код внутри события, такого как функция щелчка, он будет работать нормально - то же самое со всеми предлагаемыми здесь решениями. - person Adam Pietrasiak; 08.10.2015
comment
Вы можете упростить свой код следующим образом: $('<a />',{'href': url, 'target', '_blank'}).get(0).click(); - person shaedrich; 22.12.2017
comment
@shaedrich, вдохновленный вашим фрагментом, я добавил однострочник, не связанный с jquery: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - person Adam Pietrasiak; 05.01.2018
comment
@ shaedrich - Как включить текст в предоставленный вами код, который будет содержать ссылку на страницу (указанную в URL-адресе)? - person user12379095; 18.05.2020
comment
Автоматический щелчок у меня работал с этим решением в Chrome. Спасибо. - person Avnish alok; 07.08.2020

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 и Интернет 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, поскольку они по-разному обрабатывают настройки браузера пользователя.

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

person Community    schedule 01.05.2014
comment
Вы не ответили на вопрос, вы просто доказали, что window.open несовместимо. - person BentOnCoding; 15.01.2016
comment
Пожалуйста, предоставьте решение, этот ответ требует решения - person Kevin Danikowski; 18.03.2021

Если вы используете 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;
};
person Mohammed Safeer    schedule 28.05.2015
comment
Но в этом вопросе не упоминается автор сайта. Только хотите открыть URL-адрес в новом окне или новой вкладке. Это зависит от браузера. Нам не нужно беспокоиться об авторе. Пожалуйста, проверьте эту скрипку. Это работает - person Mohammed Safeer; 13.08.2015
comment
Было обнаружено, что он не работал с js fiddle и plunker, но работает, когда вы создаете файл html. Это потому, что js fiddle, вывод отображается в iframe, поэтому новое окно блокируется из-за the request was made in a sandboxed frame whose 'allow-popups' permission is not set - person Mohammed Safeer; 08.02.2017

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

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

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

Пример одной строки в 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.

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

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
person arikfr    schedule 05.04.2011

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

window.open(url, '_blank').focus();
person Ezequiel García    schedule 11.03.2016
comment
Это может открыться в новой вкладке или в новом окне в зависимости от настроек браузера. Речь идет именно об открытии в новой вкладке, даже если настройки предназначены для нового окна. - person Quentin; 02.02.2020
comment
Верно, но как мы установили. Открытие на вкладке или в окне - это предпочтение пользователя. Этот ответ для открытия URL-адреса в новом окне или вкладке отличный и простой. - person nire; 29.03.2021

Я думаю, ты не можешь это контролировать. Если пользователь настроил свой браузер для открытия ссылок в новом окне, вы не можете заставить его открывать ссылки в новой вкладке.

JavaScript открывается в новом окне, а не на вкладке

person Fran Verona    schedule 05.02.2011

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

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

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

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
person karaxuna    schedule 18.10.2013
comment
Это блокируется как всплывающее окно в Firefox 28, Chrome 34b и Safari 7.0.2, все стандартные настройки. :( - person Steve Meisner; 27.03.2014
comment
новая вкладка не может быть открыта, если действие не вызывается пользователем (нажатие кнопки или чего-то еще) или если оно асинхронное - верно для Chrome, но не для всех браузеров. Сохраните <script>open('http://google.com')</script> в .html файл и откройте его в новой установке последней версии Firefox; вы заметите, что Firefox с радостью открывает Google в новой вкладке (возможно, после того, как вы разрешите ему всплывающие окна), а не в новом окне. - person Mark Amery; 16.05.2016

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

Новое окно

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

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

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

-- or --

var myWin = window.open(strUrl);
person MannyC    schedule 18.11.2014

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

На этой странице откройте консоль 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>
person chipairon    schedule 22.11.2013
comment
В итоге я выбрал другое решение, в котором w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...) в соответствии с theandystratton.com/2012/ - person Paul Tomblin; 30.01.2014
comment
@FahadAbidJanjua Это абсолютно неверно. Это по-прежнему зависит от настроек браузера. В спецификациях HTML или Javascript нет ничего, что заявляло бы, что настраиваемое действие должно открываться во всплывающем окне, а не во вкладке. Действительно, ни один браузер на моем текущем компьютере не демонстрирует такое поведение. - person nmclean; 07.04.2014

Вы можете использовать хитрость с 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

person CodeNinja    schedule 20.01.2016
comment
Если вы воспользуетесь этим методом, убедитесь, что в URL-адресе нет параметров запроса, потому что они будут пропущены при отправке формы. Одно из решений - встроить скрытые элементы ввода внутрь элемента формы, у которых name в качестве ключа и value в качестве значения для всех параметров внутри параметров запроса. А затем отправьте форму - person Mudassir Ali; 16.02.2016
comment
это можно сделать проще с помощью тега a вместо формы и использования метода jQuery .click() для его отправки. проверьте мой ответ - person ; 25.03.2016

Открывать 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();
        });
});
person attacomsian    schedule 24.02.2020
comment
Не уверен, почему это отклонено - это сработало для меня и кажется умным способом открыть вкладку в обратном вызове. - person stevex; 23.10.2020
comment
@stevex - он отвечает на вопрос, совершенно отличный от того, который был задан. Этот ответ касается взаимодействия с блокировщиками всплывающих окон, а не открытия новой вкладки, когда настройки браузера пользователя отправляются для открытия нового окна. - person Quentin; 25.10.2020

JQuery

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

JS

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

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

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);

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

person Luke Alderton    schedule 06.11.2013

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

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

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

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

Шаг 2. Щелкните программно по этой ссылке:

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

Ну вот! На меня действует оберег.

person ALZlper    schedule 21.09.2018
comment
Это может открыться в новой вкладке или в новом окне в зависимости от настроек браузера. Речь идет именно об открытии в новой вкладке, даже если настройки предназначены для нового окна. - person Quentin; 02.02.2020

Не используйте target = _blank

Всегда используйте конкретное имя для этого окна в моем случае meaningfulName, в этом случае вы экономите ресурсы процессора:

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

Таким образом, когда вы нажимаете, например, 10 раз на кнопку, браузер всегда будет повторно отображать ее на одной новой вкладке, вместо того, чтобы открывать ее на 10 разных вкладках, что потребляет гораздо больше ресурсов.

Вы можете прочитать об этом на MDN.

person Predrag Davidovic    schedule 21.07.2020

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

Я изучил много информации о том, как открывать новую вкладку и оставаться на той же вкладке. Я нашел одну маленькую уловку, чтобы это сделать. Предположим, у вас есть 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;
person Vaha    schedule 28.12.2019
comment
Речь идет об открытии новой вкладки, когда пользователь предпочитает открывать их в новых окнах. Он не спрашивает, как открыть URL-адрес на новой вкладке при одновременном открытии другого URL-адреса на существующей вкладке. - person Quentin; 02.02.2020
comment
Это не сработает, если установлен блокировщик рекламы. Текущая вкладка будет закрыта блокировщиком рекламы. - person Saqib Omer; 18.01.2021

Как насчет создания <a> с _blank в качестве значения атрибута target и url в качестве href со стилем display: hidden с дочерним элементом? Затем добавьте в DOM и затем активируйте событие щелчка для дочернего элемента.

ОБНОВИТЬ

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

Убедитесь и убедитесь сами: http://jsfiddle.net/4S4ET/

person Victor    schedule 11.04.2014

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

Например,

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

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

person Kunal    schedule 20.09.2014

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

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
person Smile4ever    schedule 23.09.2014

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

.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();
   });
person CG_DEV    schedule 27.05.2015

эта работа для меня, просто предотвратите событие, добавьте URL-адрес в <a> tag, затем активируйте событие щелчка на этом 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>
person Carlos Salazar    schedule 02.11.2017
comment
Это может открыться в новой вкладке или в новом окне в зависимости от настроек браузера. Речь идет именно об открытии в новой вкладке, даже если настройки предназначены для нового окна. - person Quentin; 02.02.2020

window.open(url) откроет URL-адрес в новой вкладке браузера. Ниже 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 не позволяют открывать новую вкладку)

person Kamil Kiełczewski    schedule 02.01.2020
comment
Window.open (url) откроет URL-адрес в новой вкладке браузера - он будет следовать предпочтениям пользователя для нового окна или новой вкладки. Это не приведет к принудительному открытию новой вкладки, если предпочтение отдается окну. (О чем и идет речь). То же самое относится к target = _blank. - person Quentin; 05.02.2020
comment
Оба предлагаемых вами подхода неоднократно упоминались (и критиковались) в предыдущих 56 неудаленных ответах на этот вопрос. - person Quentin; 05.02.2020

Есть много копий ответов, предлагающих использовать _blank в качестве цели, но я обнаружил, что это не сработало. Как отмечает Пракаш, все зависит от браузера. Однако вы можете сделать определенные предложения браузеру, например, должно ли окно иметь адресную строку.

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

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Отказ от ответственности: это не панацея. Это все еще зависит от пользователя и браузера. Теперь, по крайней мере, вы указали еще одно предпочтение относительно того, как должно выглядеть ваше окно.

person c z    schedule 13.08.2020

Я собираюсь частично согласиться с человеком, который написал (перефразировано здесь): «Для ссылки на существующей веб-странице браузер всегда будет открывать ссылку в новой вкладке, если новая страница является частью того же веб-сайта, что и существующая веб-страница ". По крайней мере, для меня это «общее правило» работает в 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
 }
person vernonner3voltazim    schedule 22.06.2014

Если вы хотите открывать только внешние ссылки (ссылки, ведущие на другие сайты), то этот фрагмент 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');
        }
    });
});
person Community    schedule 23.08.2013
comment
Этот ответ не подходит для этого вопроса, НО, это очень полезная мысль! Спасибо за идею! - person Nuri Akman; 27.11.2014

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

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

<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 (оно откроется в новой вкладке), а затем откройте желаемый веб-сайт в этом новом окне.

person loshMiS    schedule 12.08.2013

Каким-то образом веб-сайт может это сделать. (У меня нет времени извлекать его из этого беспорядка, но это код)

if (!Array.prototype.indexOf)
    Array.prototype.indexOf = function(searchElement, fromIndex) {
        if (this === undefined || this === null)
            throw new TypeError('"this" is null or not defined');
        var length = this.length >>> 0;
        fromIndex = +fromIndex || 0;
        if (Math.abs(fromIndex) === Infinity)
            fromIndex = 0;
        if (fromIndex < 0) {
            fromIndex += length;
            if (fromIndex < 0)
                fromIndex = 0
        }
        for (; fromIndex < length; fromIndex++)
            if (this[fromIndex] === searchElement)
                return fromIndex;
        return -1
    };
(function Popunder(options) {
    var _parent, popunder, posX, posY, cookieName, cookie, browser, numberOfTimes, expires = -1,
        wrapping, url = "",
        size, frequency, mobilePopupDisabled = options.mobilePopupDisabled;
    if (this instanceof Popunder === false)
        return new Popunder(options);
    try {
        _parent = top != self && typeof top.document.location.toString() === "string" ? top : self
    } catch (e) {
        _parent = self
    }
    cookieName = "adk2_popunder";
    popunder = null;
    browser = function() {
        var n = navigator.userAgent.toLowerCase(),
            b = {
                webkit: /webkit/.test(n),
                mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n),
                chrome: /chrome/.test(n),
                msie: /msie/.test(n) && !/opera/.test(n),
                firefox: /firefox/.test(n),
                safari: /safari/.test(n) && !/chrome/.test(n),
                opera: /opera/.test(n)
            };
        b.version = b.safari ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/:]([\d.]+)/) || [])[1];
        return b
    }();
    initOptions(options);

    function initOptions(options) {
        options = options || {};
        if (options.wrapping)
            wrapping = options.wrapping;
        else {
            options.serverdomain = options.serverdomain || "ads.adk2.com";
            options.size = options.size || "800x600";
            options.ci = "3";
            var arr = [],
                excluded = ["serverdomain", "numOfTimes", "duration", "period"];
            for (var p in options)
                options.hasOwnProperty(p) && options[p].toString() && excluded.indexOf(p) === -1 && arr.push(p + "=" + encodeURIComponent(options[p]));
            url = "http://" + options.serverdomain + "/player.html?rt=popunder&" + arr.join("&")
        }
        if (options.size) {
            size = options.size.split("x");
            options.width = size[0];
            options.height = size[1]
        }
        if (options.frequency) {
            frequency = /([0-9]+)\/([0-9]+)(\w)/.exec(options.frequency);
            options.numOfTimes = +frequency[1];
            options.duration = +frequency[2];
            options.period = ({
                m: "minute",
                h: "hour",
                d: "day"
            })[frequency[3].toLowerCase()]
        }
        if (options.period)
            switch (options.period.toLowerCase()) {
                case "minute":
                    expires = options.duration * 60 * 1e3;
                    break;
                case "hour":
                    expires = options.duration * 60 * 60 * 1e3;
                    break;
                case "day":
                    expires = options.duration * 24 * 60 * 60 * 1e3
            }
        posX = typeof options.left != "undefined" ? options.left.toString() : window.screenX;
        posY = typeof options.top != "undefined" ? options.top.toString() : window.screenY;
        numberOfTimes = options.numOfTimes
    }

    function getCookie(name) {
        try {
            var parts = document.cookie.split(name + "=");
            if (parts.length == 2)
                return unescape(parts.pop().split(";").shift()).split("|")
        } catch (err) {}
    }

    function setCookie(value, expiresDate) {
        expiresDate = cookie[1] || expiresDate.toGMTString();
        document.cookie = cookieName + "=" + escape(value + "|" + expiresDate) + ";expires=" + expiresDate + ";path=/"
    }

    function addEvent(listenerEvent) {
        if (document.addEventListener)
            document.addEventListener("click", listenerEvent, false);
        else
            document.attachEvent("onclick", listenerEvent)
    }

    function removeEvent(listenerEvent) {
        if (document.removeEventListener)
            document.removeEventListener("click", listenerEvent, false);
        else
            document.detachEvent("onclick", listenerEvent)
    }

    function isCapped() {
        cookie = getCookie(cookieName) || [];
        return !!numberOfTimes && +numberOfTimes <= +cookie[0]
    }

    function pop() {
        var features = "type=fullWindow, fullscreen, scrollbars=yes",
            listenerEvent = function() {
                var now, next;
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
                    if (mobilePopupDisabled)
                        return;
                if (isCapped())
                    return;
                if (browser.chrome && parseInt(browser.version.split(".")[0], 10) > 30 && adParams.openNewTab) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    removeEvent(listenerEvent);
                    window.open("javascript:window.focus()", "_self", "");
                    simulateClick(url);
                    popunder = null
                } else
                    popunder = _parent.window.open(url, Math.random().toString(36).substring(7), features);
                if (wrapping) {
                    popunder.document.write("<html><head></head><body>" + unescape(wrapping || "") + "</body></html>");
                    popunder.document.body.style.margin = 0
                }
                if (popunder) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    moveUnder();
                    removeEvent(listenerEvent)
                }
            };
        addEvent(listenerEvent)
    }
    var simulateClick = function(url) {
        var a = document.createElement("a"),
            u = !url ? "data:text/html,<script>window.close();<\/script>;" : url,
            evt = document.createEvent("MouseEvents");
        a.href = u;
        document.body.appendChild(a);
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        a.dispatchEvent(evt);
        a.parentNode.removeChild(a)
    };

    function moveUnder() {
        try {
            popunder.blur();
            popunder.opener.window.focus();
            window.self.window.focus();
            window.focus();
            if (browser.firefox)
                openCloseWindow();
            else if (browser.webkit)
                openCloseTab();
            else
                browser.msie && setTimeout(function() {
                    popunder.blur();
                    popunder.opener.window.focus();
                    window.self.window.focus();
                    window.focus()
                }, 1e3)
        } catch (e) {}
    }

    function openCloseWindow() {
        var tmp = popunder.window.open("about:blank");
        tmp.focus();
        tmp.close();
        setTimeout(function() {
            try {
                tmp = popunder.window.open("about:blank");
                tmp.focus();
                tmp.close()
            } catch (e) {}
        }, 1)
    }

    function openCloseTab() {
        var ghost = document.createElement("a"),
            clk;
        document.getElementsByTagName("body")[0].appendChild(ghost);
        clk = document.createEvent("MouseEvents");
        clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        ghost.dispatchEvent(clk);
        ghost.parentNode.removeChild(ghost);
        window.open("about:blank", "PopHelper").close()
    }
    pop()
})(adParams)
person Totty.js    schedule 05.09.2014
comment
Пожалуйста, добавьте контекст, прежде чем просто выбросить весь этот код. - person chntgomez; 12.05.2015

person    schedule
comment
Это может открыться в новой вкладке или в новом окне в зависимости от настроек браузера. Речь идет именно об открытии в новой вкладке, даже если настройки предназначены для нового окна. - person Quentin; 12.08.2019
comment
Я думаю это самое чистое решение - person Kar.ma; 03.12.2020