Come aprire il collegamento in una nuova scheda su HTML?

391

Sto lavorando a un progetto HTML e non riesco a scoprire come aprire un collegamento in una nuova scheda senza javascript.

So già che <a href="http://www.WEBSITE_NAME.com"></a>apre il collegamento nella stessa scheda. Qualche idea su come aprirla in una nuova?

— ZenthyxProgramming
fonte

40

uso<a href="url" target="_blank">...</a>

— Rohit Agrawal il

1

Come dice Rohit, aggiungi il parametro target = "_ blank", tuttavia, su FireFox almeno se fai due caratteri di sottolineatura target = "__ blank" si aprirà in una nuova scheda, ma facendo clic su altri link usando lo stesso doppio trattino basso, si aprirà il nuovo pagine nella nuova scheda precedente, il che significa che hai solo una scheda aggiuntiva aperta.

— Justin Levene,

600

Impostare l'attributo "target" del collegamento su _blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

Modifica: per altri esempi, vedere qui: http://www.w3schools.com/tags/att_a_target.asp

(Nota: ho suggerito in precedenza blankal posto di _blank., Perché, se usato, si aprirà una nuova scheda e quindi utilizzare la stessa scheda se il link viene cliccato di nuovo Tuttavia, questo è solo perché, come GolezTrol sottolineato, si riferisce al nome a di una cornice / finestra, che verrebbe impostata e utilizzata quando si preme di nuovo il collegamento per aprirlo nella stessa scheda).

Considerazioni sulla sicurezza!

Lo scopo rel="noopener noreferrer"è impedire alla scheda appena aperta di essere in grado di modificare la scheda originale in modo dannoso. Per ulteriori informazioni su questa vulnerabilità, consultare queste risorse:

— SharkofMirkwood
fonte

16

Tutti gli obiettivi speciali iniziano con un carattere di sottolineatura. blanksarebbe il nome di una cornice o finestra. Può sembrare che funzioni, perché probabilmente una nuova finestra o scheda verrà aperta quando non esiste nessuna con il nome "vuoto", ma un secondo clic sul collegamento dovrebbe aprire nuovamente la pagina in quella stessa scheda invece di aprirne un'altra.

— GolezTrol,

2

Beh, suppongo che non sia invalido, è solo diverso. Invece di blankte potresti anche usare foo, penso, mentre in _blankrealtà ha un significato speciale. Non riesco a trovare alcuna informazione per dimostrare il contrario. Puoi?

— GolezTrol,

2

@Stefan No, _blankandrà bene; i collegamenti si apriranno ciascuno in una scheda diversa. Se si specifica un nome senza il carattere di sottolineatura, (ad es. blank) I collegamenti si apriranno nella stessa scheda.

— SharkofMirkwood,

6

Un consiglio: essere consapevoli della vulnerabilità dovuta a _blank. Maggiori informazioni medium.com/@jitbit/…

— Aistis

1

Un'altra pagina con la vulnerabilità mathiasbynens.github.io/rel-noopener di cui è un esempio da solo.

— PhoneixS,

99

Utilizzare uno di questi secondo le vostre esigenze.

Apri il documento collegato in una nuova finestra o scheda:

 <a href="xyz.html" target="_blank"> Link </a>

Apri il documento collegato nello stesso frame in cui è stato fatto clic (impostazione predefinita):

 <a href="xyz.html" target="_self"> Link </a>

Apri il documento collegato nel frame principale:

 <a href="xyz.html" target="_parent"> Link </a>

Apri il documento collegato in tutto il corpo della finestra:

 <a href="xyz.html" target="_top"> Link </a>

Apri il documento collegato in una cornice denominata:

 <a href="xyz.html" target="framename"> Link </a>

Vedi MDN

— Lo studente sempre
fonte

Grazie per l'informazione. Come aprire il collegamento in una nuova scheda quando si fa clic?

— Shajeel Afzal,

Usa il codice in html, come condiviso sopra. La maggior parte dei nuovi browser apre i collegamenti in una nuova scheda per impostazione predefinita quando si utilizza target = "_ blank"

— Learner Always

1

Tieni presente che target="_blank"ha una vulnerabilità, puoi leggerlo in mathiasbynens.github.io/rel-noopener

— PhoneixS

36

Se desideri eseguire il comando una volta per l'intero sito, invece di doverlo fare dopo ogni collegamento. Prova questo posto all'interno del capo del tuo sito web e bingo.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

spero che sia di aiuto

— Cyberquill
fonte

3

non dimenticare di aggiungere rel = "noopener noreferrer"

— Blundering Philosopher

13

Utilizzare target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

— Evan Hahn
fonte

3

non dimenticare di aggiungere rel = "noopener noreferrer"

— Blundering Philosopher

6

Quando usare target='_blank':

La versione HTML (alcuni dispositivi non la supportano):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

La versione JavaScript per tutti i dispositivi:

L'uso di rel = "external" è perfettamente valido

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

e per Jquery puoi provare con quello qui sotto:

$("#content a[href^='http://']").attr("target","_blank");

Se le impostazioni del browser non ti consentono di aprire in nuove finestre:

href = "google.com";
onclick="window.open (this.href, ''); return false";

— Kaleem Ullah
fonte

1

non dimenticare di aggiungere rel = "noopener noreferrer"

— Blundering Philosopher

6

target="_blank"l'attributo farà il lavoro. Basta non dimenticare di aggiungere rel="noopener noreferrer"per risolvere la potenziale vulnerabilità. Maggiori informazioni qui: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>

— Vadym P
fonte

Un'altra spiegazione della vulnerabilità qui: mathiasbynens.github.io/rel-noopener

— Blundering Philosopher

2

Puoi usare:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

Tuttavia, quanto sopra rende il tuo sito vulnerabile agli attacchi di phishing. Puoi impedire che ciò accada in alcuni browser aggiungendo rel = "noopener noreferrer" al tuo link. Con questo aggiunto, l'esempio sopra diventa:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

controlla per maggiori informazioni: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

— Thabang
fonte

0

Potresti farlo in questo modo:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

Guarda anche il seguente URL su MDN per ulteriori informazioni su sicurezza e privacy:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

che a sua volta ha un link a un buon articolo chiamato Target = "_ blank" - la vulnerabilità più sottovalutata di sempre :

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

— Darmis
fonte