Chrome, Javascript, window.open em uma nova guia


110

No Chrome, isso abre em uma nova guia:

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

isso abre em uma nova janela (mas eu gostaria que abrisse em uma nova guia também:

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

Isso é viável?


2
Tem certeza do que afirma? Ambos os fragmentos têm o mesmo resultado.
Denys Séguret

1
Se uma janela é aberta em uma guia ou uma nova janela depende do navegador local e como o usuário configura seu navegador - não é algo que você pode especificar em javascript.
jfriend00

Respostas:


150

Você não pode controlar isso diretamente, porque é uma opção controlada pelos usuários do Internet Explorer.

A abertura de páginas usando Window.open com um nome de janela diferente abrirá em uma nova janela do navegador como um pop-up OU abrirá em uma nova guia, se o usuário configurou o navegador para fazer isso.

EDITAR:

Uma explicação mais detalhada:

1. Em navegadores modernos, window.open abrirá em uma nova guia em vez de em um pop-up.

2. Você pode forçar um navegador a usar uma nova janela ('pop-up') especificando opções no 3º parâmetro

3. Se a chamada window.open não fizer parte de um evento iniciado pelo usuário, ela será aberta em uma nova janela.

4. Um "evento iniciado pelo usuário" não tem a mesma chamada de função - mas deve se originar na função invocada por um clique do usuário

5. Se um evento iniciado pelo usuário delega ou adia uma chamada de função (em um ouvinte de evento ou delegado não vinculado ao evento de clique, ou usando setTimeout, por exemplo), ele perde seu status como "iniciado pelo usuário"

6. Alguns bloqueadores de pop-up permitirão janelas abertas a partir de eventos iniciados pelo usuário, mas não aquelas abertas de outra forma.

7. Se qualquer pop-up for bloqueado, aqueles normalmente permitidos por um bloqueador (por meio de eventos iniciados pelo usuário) também serão bloqueados. Alguns exemplos…

Forçar a abertura de uma janela em uma nova instância do navegador, em vez de uma nova guia:

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

O seguinte seria qualificado como um evento iniciado pelo usuário, embora chame outra função:

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

O seguinte não se qualificaria como um evento iniciado pelo usuário, uma vez que setTimeout o adia:

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

2
Só quero adicionar que, testando no Chrome e FF, descobri que usar window.open no que você define como um “evento iniciado pelo usuário” mantém a ação padrão do navegador. Com isso quero dizer que se você segurar a tecla shift no Chrome e clicar, uma nova janela do navegador aparecerá, se você segurar ctrl (ou pressionar o botão do meio do mouse), uma nova guia será aberta em segundo plano. O que é muito bom, você pode fazer algumas coisas sem precisar colocar tags de âncora por toda parte.
Hoffmann

3
"Se a chamada window.open não fizer parte de um evento iniciado pelo usuário, ela será aberta em uma nova janela." Não, quase com certeza não será aberto.
TJ Crowder

3
Em 29/09/2014, o Firefox ESR e o IE 11 mais recentes abrem os links _blank ou window.open em uma nova janela quando as chamadas js usam _blank como o nome da janela. O Chrome atual não é tão simples. Testei abrir uma nova janela passando superior, esquerda, largura, altura, barra de ferramentas, localização, diretórios, status, barra de menus, barras de rolagem e redimensionável, e omitindo cada um deles por vez. O Chrome abriu todos eles em uma nova guia, exceto quando status, barra de menu ou barras de rolagem foram omitidos. Isso parece tão arbitrário que é difícil de acreditar, mas empiricamente foi o que aconteceu. Exemplo aqui: jsbin.com/mobiyeqojaha/1
enigment

34

Às vezes é útil forçar o uso de uma guia, se o usuário gostar. Como Prakash afirmou acima, isso às vezes é ditado pelo uso de um evento não iniciado pelo usuário, mas existem maneiras de contornar isso.

Por exemplo:

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

sempre abrirá "newurl" em uma nova janela do navegador, pois a função "sempre" não é considerada iniciada pelo usuário. No entanto, se fizermos isso:

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

abrimos a nova janela do navegador ou criamos a nova guia, conforme determinado pela preferência do usuário no clique do botão que é iniciado pelo usuário. Em seguida, apenas definimos o local para a URL desejada após retornar da postagem AJAX. Voila, forçamos o uso de uma guia se o usuário gostar.


Percebi que se você tiver um ponto de interrupção definido no cromo na janela.open, o navegador abre uma nova janela. Deixar que o código não seja quebrado parece resultar na abertura de uma nova guia.
skinnybrit51

É uma solução alternativa OK, a menos que seu window.open e o resultado da função levem 5/6/7 segundos ou mais. Considere se a função está postando dados em um servidor que está gerando um PDF que leva 10 segundos. O window.open para uma guia em branco é imediato e o usuário encara a guia em branco por 10 segundos até que magicamente seja preenchida. Ainda no iOS é praticamente a única solução.
Kevin Brown de


11

No momento (Chrome 39), uso este código para abrir uma nova guia:

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

Claro que isso pode mudar em versões futuras do Chrome.

É uma má ideia usar isso se você não pode controlar o navegador que seus usuários estão usando. Pode não funcionar em versões futuras ou com configurações diferentes.


De acordo com o comentário de jfriend00, a maneira como o usuário configura o navegador determina como as novas janelas são abertas, não o código.
Lee Taylor

Eu concordo com você, que é uma má ideia confiar em tal solução se você não pode controlar seu ambiente. Mas há algumas situações em que isso é possível (por exemplo, eu o uso em um aplicativo que vem com seu próprio Chrome portátil). Para deixar isso claro, editei meu anser.
Nico Wiedemann

2
Para quem está se perguntando, executar este trecho de código não funciona devido a este erro: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.
Benjamin Crouzier

6

Isso abrirá o link em uma nova guia no Chrome e Firefox, e possivelmente em mais navegadores que não testei:

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

Basicamente, ele abre uma nova guia vazia e, em seguida, define o local dessa guia vazia. Esteja ciente de que é uma espécie de hack, já que o comportamento da aba / janela do navegador é realmente de domínio, responsabilidade e escolha do Navegador e do Usuário.

A segunda linha pode ser chamada em um retorno de chamada (após você ter feito alguma solicitação AJAX, por exemplo), mas o navegador não a reconheceria como um evento de clique iniciado pelo usuário e pode bloquear o pop-up.


1
$windowé apenas a maneira de usar do AngularJS window. Você pode simplesmente usar window. Mais informações: docs.angularjs.org/api/ng/service/$window
Magne

3

Minissolução clara $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()


0

Você pode usar este código para abrir em uma nova guia.

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

Peguei no stackoverflow ..


1
Isso funciona, mas apenas se você estiver em um manipulador de cliques do usuário. Caso contrário, ele abre uma nova janela (mas o Firefox pelo menos irá bloquear você até que o usuário permita).
Djsmith de

@djsmith, estou usando isso ... e enfrentando problemas apenas no IE7. Se você tiver qualquer outra solução, por favor sugira .. Obrigado ..
Dilip Rajkumar

-2

Melhor maneira que eu uso:

1- adicionar link ao seu html:

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

2- adicionar função JS:

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

3- basta chamar a função OpenNewTab com o link que você deseja

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.