Abra um URL em uma nova guia (e não em uma nova janela)

2102

Estou tentando abrir um URL em uma nova guia, em vez de uma janela pop-up.

Já vi perguntas relacionadas nas quais as respostas se pareceriam com:

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

Mas nenhum deles funcionou para mim, o navegador ainda tentou abrir uma janela pop-up.

javascript Marca
fonte
85
Isso geralmente é uma questão de preferência. Algumas pessoas gostam de janelas (e protegem ferozmente esse comportamento), algumas guias (e ferozmente protegem esse comportamento). Portanto, você derrotaria um comportamento geralmente considerado uma questão de gosto, não de design.
Jared Farrish
42
O Javascript não sabe nada sobre o navegador e as guias e as janelas, portanto, cabe ao navegador decidir como abrir uma nova janela.
Andrey
3
Como posso configurar o Chrome para exibi-lo em uma nova guia, em vez de um pop-up?
Mark
8
O Gmail faz isso de alguma forma, pelo menos no Chrome. Shift + clique em uma linha de email e você abre esse email em uma nova janela. Ctrl + clique e você o abre em uma nova guia. Apenas problema: cavando código ofuscado do gmail é um PITA
Sergio
48
@Sergio, esse é o comportamento padrão do navegador para qualquer link. (Pelo menos para Chrome e Firefox.) Não tem nada a ver com o Gmail.
Qtax

Respostas:

929

Nada que um autor possa fazer pode optar por abrir em uma nova guia em vez de em uma nova janela; é uma preferência do usuário . (Observe que a preferência padrão do usuário na maioria dos navegadores é para novas guias, portanto, um teste trivial em um navegador onde essa preferência não foi alterada não demonstrará isso.)

O CSS3 propôs novo alvo , mas a especificação foi abandonada .

O contrário não é verdadeiro; especificando dimensões para a janela no terceiro argumento de window.open(), você pode acionar uma nova janela quando a preferência for por guias.

Quentin
fonte
42
@AliHaideri O Javascript não tem nada a ver com a abertura da nova guia / janela. Tudo é determinado pelas configurações do seu navegador. O uso window.openindica ao navegador para abrir algo novo e, em seguida, o navegador abre o que é escolhido em suas configurações - guia ou janela. Nos navegadores com os quais você testou, altere as configurações para abrir em uma nova janela em vez de em uma guia e você verá que as soluções dos outros estão erradas.
lan
239
Duas coisas que desperdiçam o tempo de outras pessoas mais do que lhes dizer algo não podem ser feitas. (1) Dizendo-lhes que algo que não pode ser feito pode ser feito. (2) Ficar em silêncio e deixá-los continuar procurando uma maneira de fazer algo que não pode ser feito.
Quentin
8
@ Cupcake - A documentação geralmente não se preocupa em descrever recursos que não existem. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/...
Quentin
9
@ Neel - Porque, sucintamente, chega ao ponto de um tópico que muitas pessoas querem saber.
Quentin
4
Os autores podem fazer as coisas (principalmente escrevendo código diferente). Nenhuma dessas coisas acionará uma guia em vez de uma janela.
Quentin
1734

Isso é um truque, 

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

Na maioria dos casos, isso deve acontecer diretamente no onclickmanipulador do link para impedir bloqueadores de pop-up e o comportamento padrão de "nova janela". Você pode fazer dessa maneira ou adicionando um ouvinte de evento ao seu DOMobjeto. 

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

Rinto George
fonte
117
Não funciona. Recebeu uma mensagem à direita da barra de endereço: pop - up bloqueado . Então eu permiti pop-ups. E pronto, ele abre em um pop-up, não em uma guia ! Chrome 22.0.1229.94 no OS X Lion.
nalply
39
@ b1naryatr0phy Isso porque você não testou corretamente. Altere as configurações nos seus navegadores. A abertura em uma guia ou janela é determinada pelas configurações do seu navegador. Não há nada que você possa fazer chamando window.open (ou qualquer Javascript) para escolher como abrir a nova janela / guia.
Ian
Pergunta: defino o URL sem protocolo (por exemplo, my.site.com/Controller/Index). Como resultado, recebo uma nova janela (guia) por URL, como o URL da página atual (de onde eu uso a função OpenInNewTab) e passado para o URL da função. Com a janela do protocolo é aberta pelo link correto. Por quê?
User2167382
2
var win = window.open (url, '_blank'); o '_blank' não é necessário, para window.open () , o segundo parâmetro é strWindowName, para: Um nome de string para a nova janela. O nome pode ser usado como destino de links e formulários usando o atributo de destino de um elemento <a> ou <form>. O nome não deve conter caracteres em branco. Observe que strWindowName não especifica o título da nova janela.
HidRAnger
Existe alguma maneira de fazer isso abrir uma nova guia sem que seja um iframe em área restrita? Quando eu uso isso, recebo erros CORS porque o valor document.domain não é alterado, pois é aberto como um iframe.
Ids van der Zee
380

window.open()não abrirá em uma nova guia se não estiver acontecendo no evento de clique real. No exemplo dado, o URL está sendo aberto no evento de clique real. Isso funcionará desde que o usuário tenha as configurações apropriadas no navegador .

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Da mesma forma, se você estiver tentando fazer uma chamada Ajax na função click e quiser abrir uma janela com sucesso, verifique se está fazendo a chamada Ajax com a async : falseopção definida.

Venkat Kotra
fonte
28
Seria bom marcar este como a resposta CORRETA. Meus testes com o Chrome v26 (Windows) confirmam que, se o código estiver no manipulador de cliques de um botão, ele abrirá uma nova guia e se o código for chamado de forma programática, por exemplo, no console, abrirá uma nova janela.
CyberFonic
2
@Ian Nos meus testes em navegadores com configurações padrão, esta resposta funciona nos casos em que as respostas acima não. A resposta aceita que diz "não há nada que você possa fazer" é verdadeira apenas quando o usuário altera as configurações padrão.
Garfield
@Ian Por uma questão de clareza, mencionei isso no aviso de resposta sobre as configurações do usuário. "Isso funcionará desde que o usuário tenha as configurações apropriadas no navegador." Acho que a maioria dos usuários não altera as configurações do navegador e esta resposta funciona para a maioria deles.
precisa saber é o seguinte
async: falsenão funciona no Chrome. Para abrir uma nova janela a partir do retorno de chamada, é necessário primeiro abrir uma janela vazia antes de enviar a solicitação HTTP e atualizá-la posteriormente. Aqui está um bom truque .
attacomsian
250

window.open Não é possível abrir pop-ups de maneira confiável em uma nova guia em todos os navegadores

Navegadores diferentes implementam o comportamento de window.open maneiras diferentes, especialmente no que diz respeito às preferências do navegador do usuário. Você não pode esperar que o mesmo comportamento window.openseja verdadeiro em todo o Internet Explorer, Firefox e Chrome, devido às diferentes maneiras pelas quais eles lidam com as preferências do navegador de um usuário.

Por exemplo, os usuários do Internet Explorer (11) podem optar por abrir pop-ups em uma nova janela ou em uma nova guia. Você não pode forçar os usuários do Internet Explorer 11 a abrir pop-ups de uma certa maneira window.open , como mencionado na resposta de Quentin .

Quanto aos usuários do Firefox (29), o uso window.open(url, '_blank') depende das preferências da guia do navegador, embora você ainda possa forçá-los a abrir pop-ups em uma nova janela especificando largura e altura (consulte a seção "O que acontece com o Chrome?" Abaixo).

Demonstração

Vá para as configurações do seu navegador e configure-o para abrir pop-ups em uma nova janela.

Internet Explorer (11)

Caixa de diálogo de configurações do Internet Explorer 1

Caixa de diálogo de configurações da guia Internet Explorer

Página de teste

Após configurar o Internet Explorer (11) para abrir pop-ups em uma nova janela, como demonstrado acima, use a seguinte página de teste para testar 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>

Observe que os pop-ups são abertos em uma nova janela, não em uma nova guia.

Você também pode testar esses trechos acima no Firefox (29) com sua preferência de guia configurada para novas janelas e ver os mesmos resultados.

E o Chrome? Implementa de forma window.opendiferente do Internet Explorer (11) e Firefox (29).

Não tenho 100% de certeza, mas parece que o Chrome (versão 34.0.1847.131 m) não parece ter nenhuma configuração que o usuário possa usar para escolher se deseja abrir pop-ups ou não em uma nova janela ou em uma nova guia (como Firefox e Internet Explorer ter). Verifiquei a documentação do Chrome para gerenciar pop-ups , mas ela não mencionou nada sobre esse tipo de coisa.

Além disso, mais uma vez, diferentes navegadores parecem implementar o comportamento de maneira window.open diferente. No Chrome e Firefox, a especificação de largura e altura forçará um pop-up, mesmo quando um usuário configurou o Firefox (29) para abrir novas janelas em uma nova guia (conforme mencionado nas respostas ao JavaScript abertas em uma nova janela, não na guia ) :

<!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>

No entanto, o mesmo trecho de código acima sempre abrirá uma nova guia no Internet Explorer 11 se os usuários definirem guias como suas preferências do navegador, nem mesmo especificar largura e altura forçará uma nova janela pop-up para eles.

Portanto, o comportamento do window.openChrome parece ser abrir pop-ups em uma nova guia quando usado em um onclickevento, abri-los em novas janelas quando usados ​​no console do navegador ( conforme observado por outras pessoas ) e abri-los em novas janelas quando especificado com uma largura e uma altura.

Sumário

Navegadores diferentes implementam o comportamento de maneira window.open diferente em relação às preferências do navegador dos usuários. Você não pode esperar que o mesmo comportamento window.openseja verdadeiro em todo o Internet Explorer, Firefox e Chrome, devido às diferentes maneiras pelas quais eles lidam com as preferências do navegador de um usuário.

Leitura Adicional

Peter Mortensen
fonte
12
Você não respondeu à pergunta, apenas provou que window.open é inconsistente.
BentOnCoding
223

Um forro:

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

Ele cria um aelemento virtual , target="_blank"abre-o em uma nova guia, fornece-o corretamente url hrefe clica nele.

E se você quiser, com base nisso, você pode criar alguma função:

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

e então você pode usá-lo como:

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

Nota importante:

openInNewTab(assim como qualquer outra solução nesta página) deve ser chamada durante o retorno de chamada da ação do usuário - por exemplo, evento de clique interno (não necessário diretamente na função de retorno de chamada, mas durante a ação de clique).

Se você chamá-lo manualmente em algum momento aleatório (por exemplo, dentro de um intervalo ou após a resposta do servidor) - ele pode ser bloqueado pelo navegador (o que faz sentido, pois seria um risco à segurança e pode levar a uma experiência muito ruim do usuário )

pie6k
fonte
8
Obrigado. Seu JS puro possui uma peça que faltava - como Luke Alderton escreveu (veja abaixo), você precisa anexar o elemento criado ao corpo do documento, no seu código ele está suspenso no vazio e pelo menos no Firefox 37 não faz nada .
Greenoldman
4
@mcginniwa Qualquer ação como esta - se não for acionada pela ação do usuário, como o clique do mouse, ativará o bloqueador de pop-ups. Imagine que você pode simplesmente abrir qualquer URL com Javascript sem a ação do usuário - isso seria bastante perigoso. Se você colocar esse código em um evento como a função click - ele funcionará bem - é o mesmo com todas as soluções propostas aqui.
pie6k
4
Você pode simplificar seu código da seguinte maneira: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
shaedrich
5
@shaedrich inspirado pelo seu snipped Eu adicionei um liner não-jquery:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
pie6k
Não funciona no FF!
Nolesh 16/01
91

Se você usar window.open(url, '_blank'), ele será bloqueado (bloqueador de pop-ups) no Chrome.

Tente o seguinte:

//With JQuery

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

Com JavaScript puro,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
Mohammed Safeer
fonte
Mas nesta pergunta, eles não mencionam o autor do site. Deseja abrir apenas um URL em uma nova janela ou nova guia. Isso depende do navegador. Não precisamos nos preocupar com o autor. Por favor, verifique esse violino. Ele está trabalhando
Mohammed Safeer
Verificou-se que, ele não funcionou no js fiddle e plunker, mas funciona quando você cria um arquivo html. É porque js mexer, a saída é exibida no iframe, tão nova janela é bloqueada por causa dethe request was made in a sandboxed frame whose 'allow-popups' permission is not set
Mohammed Safeer
67

Para elaborar a resposta de Steven Spielberg, fiz o seguinte:

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

Dessa forma, pouco antes do navegador seguir o link, estou definindo o atributo target, para que ele seja aberto em uma nova guia ou janela ( depende das configurações do usuário ).

Um exemplo de linha no 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.

Isso também pode ser realizado apenas usando as APIs DOM do navegador nativo:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
arikfr
fonte
58

Eu uso o seguinte e funciona muito bem!

window.open(url, '_blank').focus();
Ezequiel García
fonte
2
Isso pode abrir em uma nova guia ou janela, dependendo das configurações do navegador. A questão é especificamente sobre a abertura em uma nova guia, mesmo que as preferências sejam para uma nova janela.
Quentin
19

Um fato interessante é que a nova guia não pode ser aberta se a ação não for invocada pelo usuário (clicando em um botão ou algo assim) ou se for assíncrona, por exemplo, isso NÃO será aberto em uma nova guia:

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

Mas isso pode abrir em uma nova guia, dependendo das configurações do navegador:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
karaxuna
fonte
2
Isso está sendo bloqueado como pop-up no Firefox 28, Chrome 34b e Safari 7.0.2, todas as configurações de estoque. :(
Steve Meisner
1
"a nova guia não pode ser aberta se a ação não for invocada pelo usuário (clicando em um botão ou algo assim) ou se for assíncrona" - o caso do Chrome, mas não de todos os navegadores. Salve <script>open('http://google.com')</script>em um .htmlarquivo e abra-o em uma nova instalação de uma versão recente do Firefox; você observará que o Firefox abre felizmente o Google em uma nova guia (talvez depois que você diz para permitir pop-ups), não em uma nova janela.
Mark Amery
13

A omissão dos parâmetros [strWindowFeatures] abrirá uma nova guia, a menos que a configuração do navegador substitua (a configuração do navegador supera o JavaScript).

Nova janela

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

Nova aba

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

- ou -

var myWin = window.open(strUrl);
MannyC
fonte
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')))
spirinvladimir
fonte
11

Você pode usar um truque com 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();
}

Demonstração do jsFiddle

CodeNinja
fonte
4
Se você seguir esse método, verifique se o URL não possui parâmetros de consulta, pois eles serão ignorados pelo envio do formulário. Uma solução é incorporar elementos de entrada ocultos dentro do elemento do formulário que tenham namecomo chave e valuecomo valor todos os parâmetros dentro dos parâmetros de consulta. E então envie o formulário
Mudassir Ali 16/02/16
isso pode ser feito mais simplesmente com uma atag em vez de um formulário e usando o .click()método jQuery para "enviá-lo". Verifique a minha resposta
10

Isso não tem nada a ver com as configurações do navegador se você estiver tentando abrir uma nova guia a partir de uma função personalizada.

Nesta página, abra um console JavaScript e digite:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

E ele tentará abrir um pop-up independentemente das suas configurações, porque o 'clique' vem de uma ação personalizada.

Para se comportar como um 'clique do mouse' real em um link, você precisa seguir o conselho de @ spirinvladimir e realmente criá-lo:

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

Aqui está um exemplo completo (não tente no jsFiddle ou em editores on-line similares, pois não permitirá que você redirecione para páginas externas a partir daí):

<!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>
Chipairon
fonte
1
Eu acabei indo a uma solução diferente, onde eu faço w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)como por theandystratton.com/2012/...
Paul Tomblin
11
@FahadAbidJanjua É absolutamente não correta. Ainda depende das configurações do navegador. Não há nada nas especificações HTML ou Javascript que declare que uma "ação personalizada" deve abrir em um pop-up em vez de em uma guia. De fato, nenhum dos navegadores na minha máquina atual exibe esse comportamento.
nmclean
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
Andrew Luca
fonte
1
Isso pode abrir em uma nova guia ou janela, dependendo das configurações do navegador. A questão é especificamente sobre a abertura em uma nova guia, mesmo que as preferências sejam para uma nova janela.
Quentin
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Bryan
fonte
Isso pode abrir em uma nova guia ou janela, dependendo das configurações do navegador. A questão é especificamente sobre a abertura em uma nova guia, mesmo que as preferências sejam para uma nova janela.
Quentin
2

Ou você pode simplesmente criar um elemento de link e clicar nele ...

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

Isso não deve ser bloqueado por nenhum bloqueador de pop-ups ... Espero que sim.

Luke Alderton
fonte
2

Há uma resposta para esta pergunta e não é não.

Encontrei um trabalho fácil:

Etapa 1: crie um link invisível:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Etapa 2: clique nesse link programaticamente:

document.getElementById("yourId").click();

Aqui está! Funciona um charme para mim.

ALZlper
fonte
Isso pode abrir em uma nova guia ou janela, dependendo das configurações do navegador. A questão é especificamente sobre a abertura em uma nova guia, mesmo que as preferências sejam para uma nova janela.
Quentin
1

insira a descrição da imagem aqui

Eu pesquisei muitas informações sobre como abrir uma nova guia e permanecer na mesma guia. Eu encontrei um pequeno truque para fazê-lo. Vamos supor que você tenha um URL que você precisa abrir - newUrl e antigo url - currentUrl , no qual você precisa permanecer após a nova guia ser aberta. O código JS terá a seguinte aparência:

// 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;
Vaha
fonte
A questão é abrir uma nova guia quando a preferência do usuário é abri-las em novas janelas. Não está perguntando como abrir um URL em uma nova guia ao mesmo tempo em que abre outro URL na guia existente.
Quentin
0

Que tal criar um valor de atributo <a>with _blankas targete o urlashref , com exibição de estilo: escondido com aa elemento filhos? Em seguida, adicione ao DOM e acione o evento click em um elemento filho.

ATUALIZAR

Isso não funciona. O navegador evita o comportamento padrão. Pode ser acionado programaticamente, mas não segue o comportamento padrão.

Verifique e veja você mesmo: http://jsfiddle.net/4S4ET/

Vencedor
fonte
-1

A abertura de uma nova guia a partir de uma extensão do Firefox (Mozilla) é assim:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Smile4ever
fonte
-1

Dessa forma, é semelhante à solução acima, mas implementada de maneira diferente

.social_icon -> alguma classe com 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
fonte
-1

Isso pode ser um hack, mas no Firefox, se você especificar um terceiro parâmetro, 'fullscreen = yes', ele abrirá uma nova janela.

Por exemplo,

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

Parece realmente substituir as configurações do navegador.

Kunal
fonte
-1

esse trabalho para mim, apenas impeça o evento, adicione o URL a um e, em <a> tagseguida, acione o evento click nele 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>
Carlos Salazar
fonte
Isso pode abrir em uma nova guia ou janela, dependendo das configurações do navegador. A questão é especificamente sobre a abertura em uma nova guia, mesmo que as preferências sejam para uma nova janela.
Quentin
-1

O window.open(url)URL será aberto na nova guia do navegador. Abaixo JS alternativa para ele

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

aqui está um exemplo de trabalho (os snippets stackoverflow não permitem abrir uma nova guia)

Kamil Kiełczewski
fonte
"O window.open (url) abrirá o URL na nova guia do navegador" - seguirá a preferência do usuário por uma nova janela ou uma nova guia. Não forçará uma nova guia quando a preferência for por uma janela. (Qual é o objetivo da pergunta). O mesmo se aplica ao target = _blank.
Quentin
Ambas as abordagens sugeridas foram mencionadas (e criticadas) muitas vezes nas 56 respostas não eliminadas anteriores sobre esta questão.
Quentin
-1

A abertura do URL em uma nova guia ou em uma nova janela é realmente controlada pelas preferências do navegador do usuário. Não há como substituí-lo no JavaScript.

window.open()se comporta de maneira diferente dependendo de como está sendo usado. Se for chamado como resultado direto de uma ação do usuário , digamos que um clique no botão deve funcionar bem e abrir uma nova guia (ou janela):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

No entanto, se você tentar abrir uma nova guia a partir de um retorno de chamada de solicitação AJAX , o navegador a bloqueará como se fosse uma ação direta do usuário.

Para ignorar o bloqueador de pop-ups e abrir uma nova guia a partir de um retorno de chamada, aqui está um pequeno truque :

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();
        });
});
attacomsian
fonte
-1

Eu tentei dessa maneira e parece funcionar bem

window.open('example.com', 'newWin');

Encontrei muitos exemplos de trabalho aqui:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

Artem Shevtsov
fonte
Isso abrirá em uma nova guia ou janela conforme a preferência do usuário. Não forçará uma nova guia, que é o tema da pergunta.
Quentin
Você perdeu a parte da pergunta quando o OP já tentou isso? ou stackoverflow.com/a/59565074/19068 ? ou stackoverflow.com/a/35939565/19068 ? ou stackoverflow.com/a/30512485/19068 ? ou stackoverflow.com/a/11384018/19068 ? ou stackoverflow.com/a/26990478/19068 ?
Quentin
@Quentin, perdi essa parte, mas quando tentei chamar window.open com o segundo parâmetro «windowName» igual a «_blank» ou sem ele, o pop-up ou a nova guia não apareceram no Google Chrome mais recente. Quando mudei o nome da janela para «newWin», uma nova guia foi aberta. É estranho porque o parâmetro nome da janela é opcional.
Artem Shevtsov
-4

Vou concordar um pouco com a pessoa que escreveu (parafraseada aqui): "Para um link em uma página da web existente, o navegador sempre abrirá o link em uma nova guia se a nova página fizer parte do mesmo site que a página da web existente ". Para mim, pelo menos, essa "regra geral" funciona no Chrome, Firefox, Opera, IE, Safari, SeaMonkey e Konqueror.

De qualquer forma, existe uma maneira menos complicada de tirar proveito do que a outra pessoa apresentou. Supondo que estamos falando do seu próprio site ("thissite.com" abaixo), onde você deseja controlar o que o navegador faz, em seguida, abaixo, você deseja que "specialpage.htm" seja VAZIO, sem HTML nele ( economiza tempo enviando dados do servidor!).

 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
fonte
-7

Se você deseja apenas abrir os links externos (links que acessam outros sites), esse bit de JavaScript / jQuery funciona bem:

$(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');
        }
    });
});
Michael
fonte
Esta resposta não é adequada para esta pergunta. MAS, isso é muito útil, pense! Obrigado pela sua ideia!
Nuri Akman #
-9

O navegador sempre abrirá o link em uma nova guia se o link estiver no mesmo domínio (no mesmo site). Se o link estiver em outro domínio, ele será aberto em uma nova guia / janela, dependendo das configurações do navegador.

Então, de acordo com isso, podemos usar:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

E adicione algum código 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;
    });
});

Portanto, primeiro abra uma nova janela no mesmo site com o destino _blank (ele será aberto em uma nova guia) e, em seguida, abra o site desejado dentro dessa nova janela.

loshMiS
fonte