Питання Відкрийте URL-адресу в новій вкладці (а не в новому вікні) за допомогою JavaScript


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

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

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


1594
2018-02-05 15:52


походження


Це зазвичай є перевагою. Деякі люди люблять вікна (і жорстоко захищають цю поведінку), деякі вкладки (і жорстоко захищають цю поведінку). Отже, ви переможете поведінку, яка зазвичай вважається справою смаку, а не дизайном. - Jared Farrish
Javascript не знає нічого про ваш браузер та вкладки проти вікон, тому дійсно браузер вирішує, як відкрити нове вікно. - Andrey
Як налаштувати Chrome для відображення його на новій вкладці, на відміну від спливаючого вікна? - Mark F
Gmail робить це як-небудь, принаймні в Chrome. Shift + клацніть на рядок електронної пошти та відкриєте це повідомлення в новому вікні. Клацніть Ctrl + і відкрийте його на новій вкладці. Єдина проблема: копання в заплутаний код gmail - це PITA - Sergio
@ Sergio, це поведінка браузера за замовчуванням для будь-якого посилання. (Для Chrome і Firefox принаймні.) Не має нічого спільного з Gmail. - Qtax


Відповіді:


Нічого, що може зробити автор, може вибрати відкриття у новій вкладці, а не в новому вікні. Це перевага користувача.

CSS3 запропоновано ціль-новий, але специфікація була залишена.

The зворотний неправда; вказавши розміри вікна у третьому аргументі window.open, ви можете запускати нове вікно, якщо для вкладок це налаштування.


699
2018-02-05 15:53



@JacksonGariety - А як це перевизначає перевагу браузера для вікна або вкладки? - Quentin
@AliHaideri Javascript не має нічого спільного з тим, як відкривається нова вкладка / вікно. Все залежить від налаштувань вашого браузера. Використовуючи window.open повідомляє браузеру щось нове, а потім браузер відкриває те, що вибрано в його налаштуваннях - вкладці або вікні. У веб-переглядачах, з якими ви протестували, змініть параметри, щоб відкрити їх у новому вікні замість вкладки, і ви побачите, що рішення інших є помилковими. - Ian
Дві речі, які віддаляють чужий час більше, ніж говорити їм щось, не можуть бути зроблені. (1) Сказати їм щось, чого не можна зробити може бути зроблено. (2) Залишати мовчання і дозволяти їм продовжувати шукати спосіб зробити те, чого не можна зробити. - Quentin
@Cupcake - Документація зазвичай не перешкоджає опису функцій, які не існують. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/... - Quentin
@Неле - тому, що він стисло висувається до теми на тему, яку хочуть знати багато людей. - Quentin


Це трюк,

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-196/


1263
2017-07-08 14:49



Не працює. Отримано повідомлення праворуч від адресного рядка: Спливаюче вікно заблоковано. Тоді я дозволив спливаючі вікна. І вуаля, воно відкривається у спливаючому вікні, а не а вкладка! Chrome 22.0.1229.94 на ОС X Lion. - nalply
Я думаю, що причиною того, що у багатьох людей є проблеми, полягає в тому, що вони не впроваджують її належним чином (хоча я не можу зрозуміти, як це робиться). Протестовано ваніль: Chrome, IE, FF, SeaMonkey, Safari та Opera. Працює як чарівність. - b1nary.atr0phy
@Dhaval Змініть налаштування у своїх браузерах. Чи відкривається він у вкладці чи вікні, визначається налаштуваннями вашого веб-переглядача. Нічого не можна зробити, зателефонувавши window.open (або будь-який Javascript), щоб вибрати як відкрити нове вікно / вкладку. - Ian
@ b1naryatr0phy Це тому, що ви насправді не перевірили його належним чином. Змініть налаштування в своїх браузерах. Чи відкривається він у вкладці чи вікні, визначається налаштуваннями вашого веб-переглядача. Вам нічого не можна зробити, зателефонувавши window.open (або будь-якому Javascript), щоб вибрати, як відкрити нове вікно / вкладку. - Ian
@duke Чи можете ви запропонувати навіть єдиний приклад веб-переглядача, в якому використовується код OP, нова сторінка відкривається у новому вікні, а разом з вами відкривається в новій вкладці? Поки що ти не запропонував будь-який приклад, в якому цей код працює, а інші пропонують велику кількість, в якій (вони стверджують) вона не працює. - Mark Amery


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 набір опцій


316
2017-10-31 13:15



Було б непогано позначити цей варіант як правильну відповідь. Мої тести з Chrome v26 (Windows) підтверджують, що якщо код знаходиться в обробнику кліків, він відкриває нову вкладку та, якщо код викликається програмним шляхом, наприклад. з консолі, після чого відкривається нове вікно. - CyberFonic
@CyberFonic Немає підстав для цього, оскільки це не є правильною відповіддю. Це не визначає, як відкривається нова вкладка / браузер. Ви не можете контролювати його з Javascript. Це визначається налаштуваннями вашого браузера. - Ian
@PaulBrown Ця відповідь не відрізняється від інших. Всі вони кажуть використати window.open. Другий параметр "_blank" нічого не змінює. Тому тут немає ніякої різниці. І той факт, що вони претендують "window.open() не буде відкриватися в новій вкладці, якщо це не відбувається на фактичному події кліку ". Неправильно так само. Налаштування в браузері - це аргументи для щось трапляється, а не код Javascript - Ian
@PaulBrown Я не знаю, чому ви не приймете того факту, що ви не можете керувати ним. Вся програма CyberFonic пояснила / довела, що це ще одна невідповідність між браузерами та показує, що це небезпечно window.open дзвінки відрізняються від надійних..ON CHROME. Я просто протестував те ж саме в Firefox і IE, і обидва відкриті в новій вкладці. Ось приклад, щоб ви могли випробувати своє маленьке серце. jsfiddle.net/gEuMK . Чому б ви схвалили рішення, яке не узгоджується між браузерами і лише "працює" на одному, навіть якщо ви не можете контролювати, що відбувається - справжня, безпечна подія або випадкова / незахищена? - Ian
@PaulBrown Ні, це не так. Там немає гарантуйте відкриття вкладки (з точки зору Javascript). Вкладки відкриті для мене, тому що за замовчуванням мій браузер відкривається на вкладці. Це працює для вас і для інших, оскільки ваші налаштування за замовчуванням, ймовірно, однакові. Задане питання: "Як відкрити URL-адресу в новій вкладці". Це і всі інші питання з кодом відповідають "Як відкрити URL-адресу, засновану на налаштуваннях браузера за замовчуванням". І мені, ОП хоче повний контроль Якщо вони хочуть щось статися, відповідь має бути зробити це сталося. Ці відповіді може зробіть це - Ian


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 settings dialog 1

Internet Explorer tab settings dialog

Тестова сторінка

Після налаштування 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, через різні способи обробки користувацьких налаштувань браузера.

Додаткове читання


224
2018-05-01 19:42



Ви не відповіли на питання, ви просто довели, що window.open є непослідовним. - BentOnCoding


Один вкладиш:

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

або

З jQuery Я використовую цей:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

Він створює віртуальний a елемент, дає це target="_blank" тому він відкривається в новій вкладці, надає це правильно url  href а потім натискає його.

І якщо ви хочете, виходячи з цього ви можете створити деяку функцію:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

і тоді ви можете використовувати його як:

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

Для не-jQuery сценарій, функція буде виглядати так:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

136
2018-02-06 20:35



Дякую. У вашому чистому JS є відсутній фрагмент - як писав Люк Алдертон (див. Нижче), вам потрібно долучити створений елемент до тіла документа, у вашому коді він висить у недійсному хоча б у Firefox 37, він нічого не робить . - greenoldman
@mcginniwa Будь-яка дія, подібна до цього, - якщо вона не спрацьовує в результаті дії користувача, наприклад, клацання мишею перетворить спливаюче блокування. Уявіть собі, що ви можете просто відкрити будь-яку URL-адресу за допомогою Javascript без дії користувача - це було б досить небезпечно. Якщо ви помістіть цей код усередині події, наприклад, функцію натискання - вона буде працювати добре - це все одно з усіма запропонованими рішеннями тут. - pie6k
Це була моя перша думка. Напевно, найкраще розглянути блокувальники спливаючих вікон я думаю. - Arg0n
Ви можете спростити свій код таким чином: $('<a />',{'href': url, 'target', '_blank'}).get(0).click(); - shaedrich
@ шайдріх, натхненний вашим знімкам, я додав неоднозначний рядок із jquery: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - pie6k


Щоб розробити відповідь Стівена Спілберга, я зробив це в такому випадку:

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

Таким чином, незадовго до того, як веб-переглядач буде стежити за посиланням, я встановлюю атрибут цілі, тому він відкриє посилання в новій вкладці або вікні (залежить від налаштувань користувача)


55
2018-04-05 15:02





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

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

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

51
2018-05-28 16:43



Це саме те, що я очікував побачити як прийняту відповідь, чи є причина не використовувати цю опцію? Я тестував через Chrome, Safari та IE11, і це чудово працює в цих браузерах, але не знаю про мобільний і LTE (IE10) - cloying
Це може відкритись у новому вікні. Це може відкритись у новій вкладці. Який він не знаходиться під контролем автора сайту. Цей код співпадає з кодом у питанні, який OP заявив, що вони не працюють. - Quentin
Спасибі, що це нормально, але налаштування браузера потрібні для спливаючих вікон. - chetan
Я дійсно думаю, що це може бути гарним рішенням, оскільки він працює, як очікується, відкриття нової вкладки, а також добре працює навіть при включенні блокування реклами або блокування спливаючих вікон - LucioB
Це не працює як в FF, так і в chrome. - Faisal Mq


Я використовую наступне, і це працює дуже добре !!!

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

29
2018-03-11 11:51



викликає спливаюче блокування
-1. Це неправильно. Заклик до .focus() не впливає на відкриття нової сторінки в вікні або вкладці, оскільки вона має місце після .open() дзвонити, і window.open(url, '_blank') буквально саме код, який питанням, включеним до запитання, включено до запитання і який він і багато інших плакатів тут пояснили, не працює. - Mark Amery
Ні. Це може відкритись на новій вкладці або в новому вікні відповідно до налаштувань користувача. Питання полягає в тому, як забезпечити його відкриття у новій вкладці, а не в новому вікні. - Quentin


Цікавий той факт, що нова вкладка не може бути відкрита, якщо користувач не викликає дію (натискаючи кнопку або щось), або якщо він асинхронний, наприклад, це НЕ відкривається на новій вкладці:

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

Але це може відкритись у новій вкладці залежно від налаштувань браузера:

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

14
2017-10-18 12:35



Знайдено це корисно, тому принаймні деякі браузери (з налаштуваннями за замовчуванням) відкривали вкладку без попередження про блокування спливаючих вікон. - Populus
Це блокується як спливаюче вікно в Firefox 28, Chrome 34b та Safari 7.0.2, всі налаштування ресурсів. :( - Steve Meisner
+1 Це була моя проблема асинхрон: помилкові допомагає, але це небезпечно - Mina Gabriel
Чи є обхідний шлях до цього? - Struggler
"нову вкладку неможливо відкрити, якщо користувач не викликає дію (натискання кнопки або щось) або якщо вона асинхронна" - вірно для Chrome, але не для всіх браузерів. Зберегти <script>open('http://google.com')</script> до a .html файл і відкрити його в новій установці останньої версії Firefox; ви побачите, що Firefox щасливо відкриває Google у новій вкладці (можливо, після того, як ви дозволите спливаючі вікна), а не в новому вікні. - Mark Amery


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

JavaScript відкривається у новому вікні, а не на вкладці


13
2018-02-05 15:55





За відсутності параметрів [strWindowFeatures] відкриється нова вкладка, за винятком того, що параметр браузера перевизначає (параметр браузера знімає JavaScript).

Нове вікно

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

Нова вкладка

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

- або -

var myWin = window.open(strUrl);

13
2017-11-18 09:14



"Просто пропустіть параметри [strWindowFeatures]" - код у питанні вже робить це. "НЕЗАЛЕЖНИЙ параметр браузера" - Точка запитання полягає в тому, щоб протистояти налаштуванню браузера. - Quentin