Как открыть ссылку в новой вкладке на HTML?

391

Я работаю над проектом HTML, и я не могу узнать, как открыть ссылку на новой вкладке без JavaScript.

Я уже знаю, что <a href="http://www.WEBSITE_NAME.com"></a>открывает ссылку в той же вкладке. Любые идеи, как сделать его открытым в новом?

html hyperlink anchor browser-tab ZenthyxProgramming
источник
40
использование<a href="url" target="_blank">...</a>
Rohit Agrawal
1
Как говорит Рохит, добавьте param target = "_ blank", однако, по крайней мере, в FireFox, если вы сделаете два подчеркивания target = "__ blank", он откроется на новой вкладке, но при нажатии на другие ссылки с использованием того же двойного подчеркивания откроется новый страниц предыдущей новой вкладки, то есть у вас открыта только одна дополнительная вкладка.
Джастин Левен

Ответы:

601

Установите атрибут target для ссылки _blank:

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

Изменить: другие примеры см. Здесь: http://www.w3schools.com/tags/att_a_target.asp

(Примечание: я ранее предлагал blankвместо того, чтобы, _blankпотому что, если он используется, он откроет новую вкладку, а затем использует ту же вкладку, если ссылка будет нажата снова. Однако это только потому, что, как указал GolezTrol, он ссылается на имя a фрейма / окна, которое будет установлено и использовано при повторном нажатии ссылки, чтобы открыть ее на той же вкладке).

Рассмотрение безопасности!

Это rel="noopener noreferrer"сделано для того, чтобы вновь открытая вкладка не могла злонамеренно изменить исходную вкладку. Для получения дополнительной информации об этой уязвимости см. Эти ресурсы:

SharkofMirkwood
источник
16
Все специальные цели начинаются с подчеркивания. blankбудет имя кадра или окна. Может показаться, что это работает, потому что новое окно или вкладка, вероятно, будут открыты, когда ни одного из них не существует с именем «пусто», но второй щелчок по ссылке должен снова открыть страницу в той же вкладке, а не открывать еще одну.
GolezTrol
2
Ну, я думаю, что это не недействительно, это просто другое. Думаю, вместо того, чтобы blankвы могли с таким же успехом использовать foo, хотя на _blankсамом деле имеет особое значение. Я не могу найти информацию, чтобы доказать обратное. Ты можешь?
GolezTrol
2
@ Стефан Нет, _blankвсе будет хорошо; ссылки будут открываться на отдельной вкладке. Если вы укажете имя без подчеркивания (например, blankссылки будут открыты на той же вкладке).
SharkofMirkwood
6
Совет: знайте об уязвимости из-за _blank. Подробнее medium.com/@jitbit/...
Aistis
1
Еще одна страница с уязвимостью mathiasbynens.github.io/rel-noopener, которая сама по себе является примером.
PhoneixS
99

Используйте один из них в соответствии с вашими требованиями.

Откройте связанный документ в новом окне или вкладке:

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

Откройте связанный документ в том же фрейме, в котором он был нажат (по умолчанию):

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

Откройте связанный документ в родительском фрейме:

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

Откройте связанный документ в полном теле окна:

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

Откройте связанный документ в именованном фрейме:

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

Смотри MDN

Ученик всегда
источник
Спасибо за информацию. Как открыть ссылку в новой вкладке при нажатии?
Шаджил Афзал,
Используйте код в html, как указано выше. Большинство новых браузеров открывают ссылки в новой вкладке по умолчанию, когда вы используете target = "_ blank"
Learner Always
1
Имейте в виду, что target="_blank"имеет уязвимость, вы можете прочитать об этом в mathiasbynens.github.io/rel-noopener
PhoneixS
36

Если вы хотите выполнить команду один раз для всего сайта, а не делать это после каждой ссылки. Попробуйте это место в главе вашего веб-сайта и бинго.

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

надеюсь это поможет

Cyberquill
источник
3
не забудьте добавить rel = "noopener noreferrer"
Бездушный Философ
13

Используйте target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Эван Хан
источник
3
не забудьте добавить rel = "noopener noreferrer"
Бездушный Философ
6

Когда использовать target='_blank':

HTML-версия (некоторые устройства не поддерживают ее):

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

Версия JavaScript для всех устройств:

Использование rel = "external" совершенно правильно

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

и для Jquery можно попробовать с нижеприведенным:

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

Если настройки браузера не позволяют открываться в новых окнах:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Калим Улла
источник
1
не забудьте добавить rel = "noopener noreferrer"
Бездушный Философ
6

target="_blank"Атрибут сделает работу. Только не забудьте добавить, rel="noopener noreferrer"чтобы решить потенциальную уязвимость. Подробнее об этом здесь: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
Вадим П
источник
Еще одно объяснение уязвимости здесь: mathiasbynens.github.io/rel-noopener
Грубый Философ
2

Ты можешь использовать:

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

Однако вышеперечисленное делает ваш сайт уязвимым для фишинговых атак. Вы можете предотвратить это в некоторых браузерах, добавив rel = "noopener noreferrer" к вашей ссылке. С этим добавленным, приведенный выше пример становится:

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

проверьте для получения дополнительной информации: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
источник
0

Вы можете сделать это так:

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

Также посмотрите следующий URL на MDN для получения дополнительной информации о безопасности и конфиденциальности:

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

который в свою очередь имеет ссылку на хорошую статью с именем Target = "_ blank" - самой недооцененной уязвимостью за всю историю :

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

darmis
источник