Como posso abrir um link em uma nova janela?


94

Eu tenho um manipulador de cliques para um link específico, dentro do qual desejo fazer algo semelhante ao seguinte:

window.location = url

Eu preciso disso para realmente abrir o url em uma nova janela, como faço isso?

Respostas:


204

Você pode gostar de:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Você também pode definir o targetpara _blankrealmente.


mas este código jquery não navegará para o destino automaticamente
Amr Elgarhy

26
_blank é o destino padrão, portanto, usar window.open (url) deve ser suficiente
themerlinproject

Não tenho certeza vai ajudar e não exatamente o mesmo problema, mas eu estava procurando a mesma solução para baixar um arquivo (não de um link, mas de um botão) e no Chrome a janela não abriu e nenhum download até que eu simplesmente mudei para window.location = 'url' que não muda de localização, mas baixa o arquivo ...
gdoumenc

window.open (url) está bom :)
fudu

33

Veja como forçar o alvo dentro de um manipulador de cliques:

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

5
Não há necessidade de usar o seletor jQuery no manipulador de clique, então a linha $(this).attr('target', '_blank'); pode ser alterada para this.target = "_blank";Além disso, se os links âncora na página podem ser modificados para ter rel="external"atributos, você pode criar um manipulador de clique global para a página com o seletor jQuery em a[rel="external"]vez de ter um manipulador de cliques por link selecionado coma#link_id
himanshu

17

5
Caramba! Não use ou vincule a w3schools, NÃO está associado ao W3C. Em vez disso, use o MDN: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll

5
w3schools is good (ignore os 'poucos' trolls w3c) ... continuará a ser uma fonte confiável ... mesmo w3c agora está apoiando novamente ;-)
Dawesi

4

Você também pode usar o método jquery prop () para isso.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

2

Acabei de encontrar uma solução interessante para esse problema. Eu estava criando spans que contêm informações com base no retorno de um serviço da web. Pensei em tentar colocar um link ao redor do intervalo para que, se eu clicasse nele, o "a" capturasse o clique.

Mas eu estava tentando capturar o clique com o span ... então pensei por que não fazer isso quando criei o span.

var span = $('<span id="something" data-href="'+url+'" />');

Em seguida, vinculei um manipulador de cliques ao intervalo que criou um link com base no atributo 'data-href':

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Isso me permitiu clicar em um intervalo e abrir uma nova janela com um url adequado.


1

O que há de errado <a href="myurl.html" target="_blank">My Link</a>? Não é necessário Javascript ...


1

esta solução também considerou o caso em que url está vazio e desabilitou (cinza) o link vazio.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>


0

Esteja ciente se você deseja executar solicitações AJAX dentro da função de manipulador de eventos para o evento click. Por algum motivo, o Chrome (e talvez outros navegadores) não abrirá uma nova guia / janela.


0

Esta não é uma solução muito boa, mas funciona:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Exemplo ao vivo: http://jsfiddle.net/7eRLb/


0

O Microsoft IE não oferece suporte a um nome como segundo argumento.

window.open('url', 'window name', 'window settings');

O problema é window name. Isso vai funcionar:

window.open('url', '', 'window settings')

A Microsoft permite apenas os seguintes argumentos, se usar esse argumento:

  • _em branco
  • _meios de comunicação
  • _parent
  • _procurar
  • _auto
  • _topo

Verifique este site da Microsoft


4
-1: Apesar de tudo, copiar / colar que viola a licença de stackoverflow.com/a/1462500/560648 não é verdade. O argumento é suportado . Só não pode conter espaços, travessões ou outros sinais de pontuação. Leia outras respostas e comentários sobre essa questão.
Lightness Races in Orbit
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.