Вопрос: Откройте URL-адрес на новой вкладке (а не в новом окне), используя JavaScript


Я пытаюсь открыть URL в новой вкладке, а не во всплывающем окне. Я видел связанные вопросы, где ответы будут выглядеть примерно так:

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

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


1560


источник


Ответы:


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

CSS3 предложил целевой новый , но спецификация была оставлена ,

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


683



Это трюк,

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/


1232



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опция.


312



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 из-за разных способов обработки пользовательских настроек браузера.

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


222



Один лайнер:

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

125



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

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

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


55



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

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

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

51



I use the following and it works very well!!!

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

27



An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will NOT open in new tab:

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

But this may open in a new tab, depending on browser settings:

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

14



I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.

JavaScript open in a new window, not tab


13



Just omitting [strWindowFeatures] parameters will open a new tab, UNLESS the browser setting overrides (browser setting trumps JavaScript).

New window

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

New tab

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

-- or --

var myWin = window.open(strUrl);

13