2013-06-13 23 views
5

Prima di tutto, non ho un vero problema. Lo sto chiedendo solo per curiosità.javascript: void (0) e target = "_ blank" comportamento

Accidentalmente si verifica uno strano comportamento quando si utilizza javascript:void(0) e target="_blank" all'interno dello stesso collegamento, come questo.

<a href="javascript:void(0);" target="_blank" /> Link </a> 

ho scoperto che Chrome sta gestendo questo normalmente e non fare nulla quando si fa clic sul collegamento, mentre IE e Firefox aprire una nuova scheda vuota.

La mia domanda è, non è javascript:void(0) dovrebbe impedire l'attivazione di qualsiasi evento di clic da un collegamento, anche se si rivolge a una nuova scheda/finestra? E perché lo è target="_blank"?

anche ciò che è l'approccio migliore se io sono, diciamo, riempiendo l'attributo href con un linguaggio backend e preferisco target="_blank" hard coded accanto all'attributo href?

+1

Ho pensato "javascript: void (0);" era considerato una cattiva pratica. – j08691

+1

Un approccio migliore sarebbe quello di non utilizzare i tag di ancoraggio vuoti, ma utilizzare span con stile. – tymeJV

+0

In che modo la mia risposta non ha fornito una risposta? Il codice che ho fornito fa quello che credo tu voglia: sembra un collegamento, ma non visita nulla. Hai chiesto l'approccio migliore, ho dato il mio approccio migliore. – Zdenek

risposta

1
<a href=# onclick="return false;">I look like a link!</a> 

Utilizzato sempre.

MODIFICA: per la tua domanda su void (0), l'onclick dovrebbe avere una priorità più alta dell'attributo href perché fornisce funzionalità più avanzate e ha la capacità di impedire effettivamente l'href di funzionare, quindi il mio return false. L'href è presente solo per i robot e i vecchi browser se è presente l'evento onclick.

Inoltre, se una normale navigazione viene eseguita con URL di forma strana è a discrezione del browser. Se il collegamento inizia con un hash, dovrebbe semplicemente saltare a un segnalibro. Ma quando è vuoto o contiene altri protocolli, tutto dipende dal browser se decide di provare a visitare il nuovo documento. L'immissione dello pseudo protocollo javascript: viene tradizionalmente utilizzata per i bookmarklet che si prevede funzionino con la pagina corrente, quindi qualsiasi cosa javascript: che non funzioni document.write() o altra modifica distruttiva dovrebbe lasciare la pagina non ricaricata.

EDIT2: Non sono sicuro di cosa si intende per lingua backend in href, ma considera HTML valido data- attributi di dare il vostro codice di qualcosa su cui lavorare, se non appartiene logicamente in un attributo href.

+0

Questo post viene contrassegnato automaticamente come di bassa qualità perché è solo un codice. Ti dispiacerebbe espanderlo aggiungendo del testo per spiegare come risolve il problema? – gung

+1

La risposta mi ha aiutato, potrebbe non fornire una risposta al tema, ma quando scriviamo "javasxcript: void (0) apri una nuova pagina" in google, questa pagina aiuta! grazie –

0

Ho risolto questo con semplice trucco. Potrebbe essere utile.

Ho rimosso l'attributo di destinazione in modo dinamico in base al collegamento. Se il link non è definito o vuoto o javascript: void (0), rimuoveremo l'attributo target usando il codice seguente.

Se il collegamento è corretto, aggiungeremo l'attributo di destinazione per tale collegamento ipertestuale ("seconda condizione se" lo farà, perché nella mia pagina i collegamenti sono dinamici).

Ho copiato il file html di esempio (Test.html). se vogliamo rimuovere l'attributo onloadload della pagina, copiare il codice dello script in questo file e incollarlo alla fine del file richiesto.

Se vogliamo applicare questo per i collegamenti dinamici, dobbiamo mettere questo codice in una funzione e possiamo chiamarlo quando è richiesto.

Questo codice sarà applicabile a tutti i collegamenti ipertestuali in quella pagina.Possiamo limitare questo particolare insieme di collegamenti usando la classe o altri attributi.

Test.html 
--------- 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<a href="javascript:void(0);" target="_blank">Link1</a> 
<a href="javascript:void(0);" target="_blank">Link2</a> 
<a href="www.url1.com" target="_blank">Link3</a> 
<a href="www.url2.com" target="_blank">Link4</a> 

<script> 
$("a").each(function() { 

if(typeof(this.href) == 'undefined' || this.href == 'javascript:void(0);') { 
    $(this).attr('href', 'javascript:void(0);'); 
    $(this).removeAttr('target'); 
} 
if(typeof(this.href) != 'undefined' && this.href != 'javascript:void(0);') { 
    var s_link = this.href; 
    if (s_link.indexOf('http://') === -1 && s_link.indexOf('https://') === -1) { 
     s_link = 'https://' + s_link; 
    } 
    $(this).attr('href', s_link); 
    $(this).attr('target', '_blank'); 
} 

}); 
</script> 
Problemi correlati