Wie öffne ich einen Link in einem neuen Tab auf HTML?

390

Ich arbeite an einem HTML-Projekt und kann nicht herausfinden, wie ein Link in einem neuen Tab ohne Javascript geöffnet werden kann.

Ich weiß bereits, dass <a href="http://www.WEBSITE_NAME.com"></a>der Link in derselben Registerkarte geöffnet wird. Irgendwelche Ideen, wie man es in einem neuen öffnen kann?

html hyperlink anchor browser-tab ZenthyxProgrammierung
quelle
40
Verwenden Sie<a href="url" target="_blank">...</a>
Rohit Agrawal
1
Wie Rohit sagt, fügen Sie den Parameter param = "_ blank" hinzu. Wenn Sie jedoch in FireFox mindestens zwei Unterstriche ausführen, wird target = "__ blank" in einem neuen Tab geöffnet. Wenn Sie jedoch auf andere Links mit demselben doppelten Unterstrich klicken, wird der neue geöffnet Seiten in der vorherigen neuen Registerkarte, dh Sie haben nur eine zusätzliche Registerkarte geöffnet.
Justin Levene

Antworten:

599

Setzen Sie das Attribut 'Ziel' des Links auf _blank:

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

Bearbeiten: Weitere Beispiele finden Sie hier: http://www.w3schools.com/tags/att_a_target.asp

(Hinweis: Ich habe zuvor vorgeschlagen, blankanstelle von, _blankweil bei Verwendung eine neue Registerkarte geöffnet wird und dann dieselbe Registerkarte verwendet wird, wenn der Link erneut angeklickt wird. Dies liegt jedoch nur daran, dass sich GolezTrol, wie darauf hingewiesen hat, auf den Namen bezieht a eines Rahmens / Fensters, das festgelegt und verwendet wird, wenn der Link erneut gedrückt wird, um ihn auf derselben Registerkarte zu öffnen).

Sicherheitsüberlegung!

Dies rel="noopener noreferrer"soll verhindern, dass die neu geöffnete Registerkarte die ursprüngliche Registerkarte in böswilliger Absicht ändern kann. Weitere Informationen zu dieser Sicherheitsanfälligkeit finden Sie in den folgenden Ressourcen:

SharkofMirkwood
quelle
16
Die Sonderziele beginnen alle mit einem Unterstrich. blankwäre der Name eines Rahmens oder Fensters. Es scheint zu funktionieren, da wahrscheinlich ein neues Fenster oder eine neue Registerkarte geöffnet wird, wenn keine mit dem Namen "leer" vorhanden ist. Ein zweiter Klick auf den Link sollte jedoch die Seite in derselben Registerkarte erneut öffnen, anstatt eine weitere zu öffnen.
GolezTrol
2
Nun, ich denke es ist nicht ungültig, es ist einfach anders. Anstelle von blankdir könnte man genauso gut gebrauchen foo, denke ich, obwohl es _blanktatsächlich eine besondere Bedeutung hat. Ich kann keine Informationen finden, die das Gegenteil beweisen. Können Sie?
GolezTrol
2
@Stefan Nein, _blankwird gut; Die Links werden jeweils in einer anderen Registerkarte geöffnet. Wenn Sie einen Namen ohne Unterstrich angeben, werden (z. B. blank) die Links auf derselben Registerkarte geöffnet.
SharkofMirkwood
6
Ein Tipp: Beachten Sie die Sicherheitsanfälligkeit aufgrund von _blank. Weitere Informationen medium.com/@jitbit/…
Aistis
1
Eine weitere Seite mit der Sicherheitsanfälligkeit mathiasbynens.github.io/rel-noopener, die ein Beispiel für sich ist.
PhoneixS
99

Verwenden Sie eine davon gemäß Ihren Anforderungen.

Öffnen Sie das verknüpfte Dokument in einem neuen Fenster oder einer neuen Registerkarte:

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

Öffnen Sie das verknüpfte Dokument in demselben Rahmen, in dem es angeklickt wurde (dies ist die Standardeinstellung):

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

Öffnen Sie das verknüpfte Dokument im übergeordneten Frame:

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

Öffnen Sie das verknüpfte Dokument im gesamten Fensterbereich:

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

Öffnen Sie das verknüpfte Dokument in einem benannten Rahmen:

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

Siehe MDN

Immer lernen
quelle
Danke für die Auskunft. Wie öffne ich den Link in einem neuen Tab, wenn ich darauf klicke?
Shajeel Afzal
Verwenden Sie den oben angegebenen HTML-Code. Die meisten neuen Browser öffnen die Links standardmäßig in einem neuen Tab, wenn Sie target = "_ blank" verwenden
Lerner immer
1
Denken Sie daran, dass target="_blank"es eine Sicherheitslücke gibt, die Sie in mathiasbynens.github.io/rel-noopener
PhoneixS
36

Wenn Sie den Befehl einmal für Ihre gesamte Site ausführen möchten, anstatt ihn nach jedem Link ausführen zu müssen. Probieren Sie diesen Ort im Kopf Ihrer Website und Bingo.

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

hoffe das hilft

Cyberquill
quelle
3
Vergessen Sie nicht, rel = "noopener noreferrer"
Blundering Philosopher
13

Verwendung target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn
quelle
3
Vergessen Sie nicht, rel = "noopener noreferrer"
hinzuzufügen
6

Wann zu verwenden target='_blank':

Die HTML-Version (einige Geräte unterstützen sie nicht):

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

Die JavaScript-Version für alle Geräte:

Die Verwendung von rel = "external" ist vollkommen gültig

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

und für Jquery kann man mit dem folgenden versuchen:

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

Wenn Sie in den Browsereinstellungen nicht in neuen Fenstern öffnen können:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Kaleem Ullah
quelle
1
Vergessen Sie nicht, rel = "noopener noreferrer"
Blundering Philosopher
6

target="_blank"Attribut erledigt den Job. Vergessen Sie nicht, etwas hinzuzufügen rel="noopener noreferrer", um die potenzielle Sicherheitsanfälligkeit zu beheben. Mehr dazu hier: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
Vadym P.
quelle
Eine weitere Erklärung für die Sicherheitsanfälligkeit hier: mathiasbynens.github.io/rel-noopener
Blundering Philosopher
2

Sie können verwenden:

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

Die oben genannten Punkte machen Ihre Website jedoch anfällig für Phishing-Angriffe. Sie können dies in einigen Browsern verhindern, indem Sie Ihrem Link rel = "noopener noreferrer" hinzufügen. Wenn dies hinzugefügt wird, wird das obige Beispiel:

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

Weitere Informationen finden Sie unter: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
quelle
0

Sie könnten es so machen:

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

Weitere Informationen zu Sicherheit und Datenschutz finden Sie auch in der folgenden URL auf MDN :

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

der wiederum einen Link zu einem guten Artikel namens Target = "_ blank" hat - die am meisten unterschätzte Sicherheitslücke aller Zeiten :

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

Darmis
quelle