Jak otworzyć link w nowej karcie HTML?

390

Pracuję nad projektem HTML i nie mogę dowiedzieć się, jak otworzyć link w nowej karcie bez javascript.

Wiem już, że <a href="http://www.WEBSITE_NAME.com"></a>otwiera link w tej samej zakładce. Jakieś pomysły, jak otworzyć go w nowym?

html hyperlink anchor browser-tab ZenthyxProgramming
źródło
40
użycie<a href="url" target="_blank">...</a>
Rohit Agrawal
1
Jak mówi Rohit, dodaj parametr param target = "_ blank", jednak w FireFox, przynajmniej jeśli wykonasz dwa podkreślenia target = "__ blank", otworzy się w nowej karcie, ale kliknięcie innych linków przy użyciu tego samego podwójnego podkreślenia spowoduje otwarcie nowego strony w poprzedniej nowej karcie, co oznacza, że ​​masz tylko jedną dodatkową otwartą kartę.
Justin Levene

Odpowiedzi:

599

Ustaw atrybut „target” linku na _blank:

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

Edycja: inne przykłady można znaleźć tutaj: http://www.w3schools.com/tags/att_a_target.asp

(Uwaga: poprzednio zasugerowałem blankzamiast, _blankponieważ jeśli zostanie użyty, otworzy nową kartę, a następnie użyje tej samej karty, jeśli link zostanie kliknięty ponownie. Jednak dzieje się tak tylko dlatego, jak wskazał GolezTrol, że odnosi się do nazwy a ramki / okna, który zostałby ustawiony i użyty po ponownym naciśnięciu łącza w celu otwarcia go na tej samej karcie).

Zagadnienie bezpieczeństwa!

Ma rel="noopener noreferrer"to na celu uniemożliwienie nowo otwartej karcie złośliwego modyfikowania oryginalnej karty. Aby uzyskać więcej informacji o tej podatności, zobacz następujące zasoby:

SharkofMirkwood
źródło
16
Wszystkie cele specjalne zaczynają się od podkreślenia. blankbędzie nazwą ramy lub okna. Może się wydawać, że działa, ponieważ nowe okno lub karta prawdopodobnie zostanie otwarte, gdy nie istnieje żadne z nazwą „puste”, ale drugie kliknięcie linku powinno ponownie otworzyć stronę w tej samej karcie zamiast otwierać kolejną.
GolezTrol
2
Myślę, że to nie jest nieprawidłowe, jest po prostu inne. Wydaje mi się, że zamiast blankciebie równie dobrze można by użyć foo, choć w _blankrzeczywistości ma on specjalne znaczenie. Nie mogę znaleźć żadnych informacji, które mogłyby udowodnić inaczej. Czy możesz?
GolezTrol
2
@Stefan Nie, _blankbędzie dobrze; linki otworzą się na innej karcie. Jeśli określisz nazwę bez podkreślenia (np. blank), Linki otworzą się na tej samej karcie.
SharkofMirkwood
6
Wskazówka: pamiętaj o podatności z powodu _blank. Więcej informacji medium.com/@jitbit/…
Aistis
1
Kolejna strona z podatnością mathiasbynens.github.io/rel-noopener, która sama w sobie jest przykładem.
PhoneixS,
99

Użyj jednego z nich zgodnie ze swoimi wymaganiami.

Otwórz połączony dokument w nowym oknie lub karcie:

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

Otwórz połączony dokument w tej samej ramce, w której został kliknięty (jest to ustawienie domyślne):

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

Otwórz połączony dokument w ramce nadrzędnej:

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

Otwórz połączony dokument w pełnej części okna:

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

Otwórz połączony dokument w nazwanej ramce:

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

Zobacz MDN

Uczeń zawsze
źródło
Dzięki za informację. Jak otworzyć link w nowej karcie po kliknięciu?
Shajeel Afzal
Użyj kodu w html, jak udostępniono powyżej. Większość nowych przeglądarek domyślnie otwiera linki w nowej karcie, gdy używasz target = "_ blank"
Uczeń zawsze
1
Pamiętaj, że target="_blank"istnieje luka, o której możesz przeczytać w mathiasbynens.github.io/rel-noopener
PhoneixS
36

Jeśli chcesz wykonać polecenie dla całej witryny, zamiast wykonywać je po każdym linku. Wypróbuj to miejsce w nagłówku witryny i bingo.

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

mam nadzieję że to pomoże

Cyberquill
źródło
3
nie zapomnij dodać rel = "noopener noreferrer"
Blundering Philosopher
13

Użyj target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn
źródło
3
nie zapomnij dodać rel = "noopener noreferrer"
Blundering Philosopher
6

Kiedy stosować target='_blank':

Wersja HTML (niektóre urządzenia jej nie obsługują):

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

Wersja JavaScript dla wszystkich urządzeń:

Zastosowanie rel = „external” jest całkowicie poprawne

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

i dla Jquery można spróbować z poniższym:

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

Jeśli ustawienia przeglądarki nie pozwalają na otwieranie w nowych oknach:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Kaleem Ullah
źródło
1
nie zapomnij dodać rel = "noopener noreferrer"
Blundering Philosopher
2

Możesz użyć:

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

Jednak powyższe czynią twoją witrynę podatną na ataki phishingowe. Możesz temu zapobiec w niektórych przeglądarkach, dodając rel = "noopener noreferrer" do swojego linku. Po dodaniu powyższy przykład staje się:

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

sprawdź więcej informacji: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
źródło
0

Możesz to zrobić w następujący sposób:

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

Zobacz także następujący adres URL w MDN, aby uzyskać więcej informacji na temat bezpieczeństwa i prywatności:

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

który z kolei zawiera link do dobrego artykułu o nazwie Target = "_ blank" - najbardziej niedoceniana luka w historii :

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

darmis
źródło