Chrome, Javascript, window.open в новой вкладке


110

В хроме это открывается в новой вкладке:

<button onclick="window.open('newpage.html', '_blank')" />

это открывается в новом окне (но я бы хотел, чтобы это открылось и в новой вкладке:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

Возможно ли это?


2
Вы уверены в том, что утверждаете? Оба фрагмента дают одинаковый результат.
Denys Séguret

1
Независимо от того, открывается ли окно на вкладке или в новом окне, зависит от локального браузера и того, как пользователь настраивает свой браузер - это не то, что вы можете указать в javascript.
jfriend00

Ответы:


150

Вы не можете напрямую контролировать это, потому что это опция, контролируемая пользователями Internet Explorer.

Открытие страниц с использованием Window.open с другим именем окна будет открываться в новом окне браузера, как всплывающее окно, ИЛИ открываться в новой вкладке, если пользователь настроил браузер для этого.

РЕДАКТИРОВАТЬ:

Более подробное объяснение:

1. В современных браузерах window.open будет открываться в новой вкладке, а не во всплывающем окне.

2. Вы можете заставить браузер использовать новое окно («всплывающее окно»), указав параметры в третьем параметре.

3. Если вызов window.open не был частью инициированного пользователем события, он откроется в новом окне.

4. «Событие, инициированное пользователем» не обязательно должно вызывать одну и ту же функцию, но оно должно происходить из функции, вызываемой щелчком пользователя.

5. Если инициированное пользователем событие делегирует или откладывает вызов функции (в прослушивателе событий или делегате, не привязанном к событию щелчка, или, например, с помощью setTimeout), он теряет свой статус как «инициированный пользователем».

6. Некоторые блокировщики всплывающих окон разрешают открытие окон из инициированных пользователем событий, но не тех, которые открываются иначе.

7. Если какое-либо всплывающее окно заблокировано, то иногда блокируются и те, которые обычно разрешены блокировщиком (через инициированные пользователем события). Некоторые примеры…

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

window.open('page.php', '', 'width=1000');

Следующее будет квалифицироваться как событие, инициированное пользователем, даже если оно вызывает другую функцию:

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

Следующее не может считаться инициированным пользователем событием, поскольку setTimeout откладывает его:

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

2
Я просто хочу добавить, что при тестировании в Chrome и FF я обнаружил, что использование window.open в том, что вы определяете как «инициированное пользователем событие», сохраняет действие браузера по умолчанию. Под этим я подразумеваю, что если в Chrome вы удерживаете shift на chrome и щелкаете, откроется новое окно браузера, если вы удерживаете ctrl (или нажимаете среднюю кнопку мыши), новая вкладка откроется в фоновом режиме. Что очень приятно, вы можете делать некоторые вещи без необходимости размещать теги привязки повсюду.
Hoffmann

3
«Если вызов window.open не был частью инициированного пользователем события, он откроется в новом окне». Нет, почти наверняка его вообще не откроют.
TJ Crowder

3
По состоянию на 29.09.2014 последние версии Firefox ESR и IE 11 открывают ссылки _blank или window.open в новом окне, когда в вызовах js в качестве имени окна используется _blank. Текущий Chrome не так прост. Я тестировал открытие нового окна, проходя верхнее, левое, ширину, высоту, панель инструментов, местоположение, каталоги, статус, строку меню, полосы прокрутки и изменяемый размер, и опуская каждое из них по очереди. Chrome открывал их все на новой вкладке, за исключением тех случаев, когда статус, строка меню или полосы прокрутки были опущены. Это кажется настолько произвольным, что трудно поверить, но эмпирически именно это и произошло. Пример здесь: jsbin.com/mobiyeqojaha/1
enigment

34

Иногда полезно принудительно использовать вкладку, если это нравится пользователю. Как заявил выше Пракаш, это иногда продиктовано использованием события, не инициированного пользователем, но есть способы обойти это.

Например:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

всегда будет открывать «newurl» в новом окне браузера, поскольку функция «всегда» не считается инициированной пользователем. Однако если мы сделаем это:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

мы открываем новое окно браузера или создаем новую вкладку, в зависимости от предпочтений пользователя в кнопке, нажатие которой происходит по инициативе пользователя. Затем мы просто устанавливаем местоположение на желаемый URL после возврата из сообщения AJAX. Вуаля, мы принудительно используем вкладку, если пользователю это нравится.


Я заметил, что если у вас есть точка останова, установленная в chrome на window.open, браузер открывает новое окно. Если позволить коду не ломаться, то вместо этого открывается новая вкладка.
skinnybrit51

Это нормальный обходной путь, если только ваш window.open и результат функции не занимает 5/6/7 секунд или около того. Подумайте, отправляет ли функция данные на сервер, который создает PDF-файл, который занимает 10 секунд. Окно window.open на пустую вкладку происходит немедленно, и пользователь смотрит на пустую вкладку в течение 10 секунд, пока она волшебным образом не заполнится. И все же для iOS это единственное решение.
Кевин Браун

13

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

попробуй это,

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

рабочий скрипт js для этого http://jsfiddle.net/safeeronline/70kdacL4/2/

рабочая скрипта js для окна ajax открыта http://jsfiddle.net/safeeronline/70kdacL4/1/


11

На данный момент (Chrome 39) я использую этот код, чтобы открыть новую вкладку:

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

Конечно, это может измениться в будущих версиях Chrome.

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


Согласно комментарию jfriend00, способ, которым пользователь настраивает браузер, определяет, как открываются новые окна, а не код.
Ли Тейлор

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

2
Для тех, кому интересно, запуск этого фрагмента кода не работает из-за этой ошибки:VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Бенджамин Крузье,

6

Это откроет ссылку на новой вкладке в Chrome и Firefox и, возможно, в других браузерах, которые я не тестировал:

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

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

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


1
$windowэто просто способ использования AngularJS window. windowВместо этого вы можете просто использовать . Дополнительная информация: docs.angularjs.org/api/ng/service/$window
Magne,


0

Вы можете использовать этот код для открытия в новой вкладке ..

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

Получил из stackoverflow ..


1
Это работает, но только если вы находитесь в обработчике пользовательских кликов. В противном случае он открывает новое окно (но Firefox, по крайней мере, заблокирует вас, пока пользователь не разрешит это).
djsmith

@djsmith, я использую это .. и проблема возникает только в IE7. Если у вас есть другое решение, пожалуйста, предложите .. Спасибо ..
Дилип Раджкумар

-2

Лучший способ использовать:

1- добавьте ссылку на свой html:

<a id="linkDynamic" target="_blank" href="#"></a>

2- добавить функцию JS:

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- просто вызовите функцию OpenNewTab с нужной ссылкой

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.