Відкрийте URL-адресу на новій вкладці (а не в новому вікні)

2102

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

Я бачив пов'язані питання, де відповіді виглядатимуть приблизно так:

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

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

javascript 
— Позначити
джерело
85
Зазвичай це питання переваги. Деяким люблять вікна (і жорстоко захищають цю поведінку), деякі вкладки (і люто захищають цю поведінку). Таким чином, ви б перемогли в поведінці, яке, як правило, вважається питанням смаку, а не дизайну.
— Джаред Фарріш
42
Javascript нічого не знає про ваш веб-переглядач і вкладки проти Windows, тому саме браузер вирішує, як відкрити нове вікно.
— Андрій
3
Як можна налаштувати Chrome для відображення його на новій вкладці, на відміну від спливаючого вікна?
— Марк
8
Gmail робить це якось, принаймні в Chrome. Shift + натисніть на рядок електронної пошти, і ви відкриєте це повідомлення у новому вікні. Ctrl + клацніть, і ви відкриєте його на новій вкладці. Єдина проблема: копатись у прихованому коді gmail - це PITA
— Sergio
48
@Sergio, це поведінка браузера за замовчуванням для будь-якого посилання. (Щонайменше для Chrome і Firefox.) Не має нічого спільного з Gmail.
— Qtax

Відповіді:

929

Ніщо, що автор не може зробити, не може обрати для відкриття в новій вкладці замість нового вікна; це вподобання користувача . (Зверніть увагу, що налаштування користувача за замовчуванням у більшості браузерів призначені для нових вкладок, тому тривіальний тест у веб-переглядачі, де ця настройка не була змінена, цього не демонструватиме.)

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

Зворотне не вірно; Вказавши розміри для вікна в третьому аргументі window.open(), ви можете запустити нове вікно, коли перевага надається вкладкам.

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

Це хитрість, 

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
Не працює. Отримано повідомлення праворуч від адресного рядка: спливаюче вікно заблоковано . Тоді я дозволив спливаючі вікна. І voilà, вона відкривається у спливаючому вікні, а не вкладці ! Chrome 22.0.1229.94 на OS X Lion.
— nalply
39
@ b1naryatr0phy Це тому, що ви насправді не перевірили його належним чином. Змініть налаштування у своїх браузерах. Чи відкриється він у вкладці чи вікні, визначається налаштуваннями вашого веб-переглядача. Ви нічого не можете зробити, зателефонувавши до window.open (або будь-якого Javascript), щоб вибрати, як відкрити нове вікно / вкладку.
— Ян
Питання: Я встановлюю URL без протоколу (наприклад, my.site.com/Controller/Index). У результаті я отримую нове вікно (вкладку) за URL-адресою, такою як URL-адреса поточної сторінки (звідки я використовую функцію OpenInNewTab), а також переходить у URL-адресу функції. З протоколом вікно відкривається за правильним посиланням. Чому?
— користувач2167382
2
var win = window.open (url, '_blank'); '_blank' не потрібен, для window.open () другий параметр - strWindowName, для: Ім'я рядка для нового вікна. Ім'я може використовуватися як ціль посилань та форм, використовуючи атрибут target елемента <a> або <form>. Ім'я не повинно містити символів пробілу. Зауважте, що strWindowName не вказує заголовок нового вікна.
— hydRAnger
Чи є спосіб зробити це відкрити новою вкладкою, не будучи піскоструйною рамкою? Коли я використовую це, я отримую помилки 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 у межах функції клацання і хочете відкрити вікно про успіх, переконайтеся, що ви здійснюєте дзвінок Ajax з async : falseнабором опцій.

— Венкат Котра
джерело
28
Було б добре позначити цю як ПРАВИЛЬНУ відповідь. Мої тести з Chrome v26 (Windows) підтверджують, що якщо код знаходиться в обробці кнопок кнопки, він відкриє нову вкладку, а якщо код викликається програмно, наприклад, з консолі, то відкриється нове вікно.
— CyberFonic
2
@Ian З мого тестування на браузерах із налаштуваннями за замовчуванням, ця відповідь працює в тих випадках, коли відповіді вище не відповідають. Прийнята відповідь, яка говорить "нічого не можна зробити", є вірною лише тоді, коли користувач змінив налаштування за замовчуванням.
— Гарфілд
@Ian Для наочності я згадав це у відповіді про попередження про налаштування користувача. "Це буде працювати за умови, що користувач має відповідні налаштування в браузері." Я думаю, що більшість користувачів не змінюють налаштування браузера, і ця відповідь працює для більшості з них.
— Venkat Kotra
async: falseне працює в Chrome. Щоб відкрити нове вікно із зворотного дзвінка, спочатку потрібно відкрити порожнє вікно перед відправкою HTTP-запиту та пізніше оновити його. Ось хороший злом .
— атакомасія
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 він нічого не робить .
— greenoldman
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 скрипка, вихід відображається на iframe, тому нове вікно заблоковано черезthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
— Mohammed Safeer
67

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

$('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.

Це також можна досягти, використовуючи також рідні API DOM браузера:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
— arikfr
джерело
57

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

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');              
    }
});
— караксуна
джерело
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')))
— спиринвладимир
джерело
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>
— чипаїрон
джерело
1
Я закінчився переходом до іншого рішення, яке я роблю w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)відповідно до theandystratton.com/2012/…
— Пол Томблін
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();
— Брайан
джерело
Це може відкритися в новій вкладці чи вікні залежно від налаштувань браузера. Питання стосується конкретного відкриття нової вкладки, навіть якщо налаштування стосуються нового вікна.
— Квентін
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

Як про створення <a>з в _blankякості targetзначення атрибута і urlякhref , з дисплеєм в стилі: прихований з аа дітьми елементом? Потім додайте до DOM та запустіть подію клацання на дочірньому елементі.

ОНОВЛЕННЯ

Це не працює. Браузер запобігає поведінці за замовчуванням. Це може бути запущене програмно, але воно не відповідає поведінці за замовчуванням.

Перевірте і переконайтеся самі: http://jsfiddle.net/4S4ET/

— Віктор
джерело
-1

Відкриття нової вкладки з розширення Firefox (Mozilla) відбувається так:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
— Усміхнися4
джерело
-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 = так", воно відкриє нове вікно.

Наприклад,

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

Здається, це насправді перевершує налаштування браузера.

— Кунал
джерело
-1

ця робота для мене, просто запобігайте події, додайте 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>
— Карлос Салазар
джерело
Це може відкритися в новій вкладці чи вікні залежно від налаштувань браузера. Питання стосується конкретного відкриття нової вкладки, навіть якщо налаштування стосуються нового вікна.
— Квентін
-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();
        });
});
— атакоманський
джерело
-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');
        }
    });
});
— Майкл
джерело
Ця відповідь не підходить для цього питання. Але це дуже корисно подумати! Дякую за вашу ідею!
— Нурі Акман
-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 target (воно відкриється в новій вкладці), а потім відкрийте потрібний веб-сайт у цьому новому вікні.

— loshMiS
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.