Як відкрити посилання в новій вкладці на html?

390

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

Я вже знаю, що <a href="http://www.WEBSITE_NAME.com"></a>відкриває посилання на тій же вкладці. Будь-які ідеї, як зробити його відкритим у новому?

— ZenthyxProgramming
джерело

40

використання<a href="url" target="_blank">...</a>

— Rohit Agrawal

1

Як каже Рохіт, додайте параметр target = "_ blank", однак на FireFox принаймні, якщо ви зробите два підкреслення target = "__ blank", він відкриється на новій вкладці, але натиснувши інші посилання, використовуючи ту ж подвійну підкреслення, відкриється нова сторінок на попередній новій вкладці, тобто у вас відкрита лише одна додаткова вкладка.

— Джастін Левене

599

Встановіть атрибут "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буде назва кадру чи вікна. Це може здатися, що нове вікно чи вкладка, ймовірно, буде відкрито, коли жодної не існує з назвою 'blank', але другим клацанням посилання знову відкриється сторінка на тій самій вкладці, а не відкривається ще одна.

— GolezTrol

2

Ну, мабуть, він недійсний, він просто інший. Я вважаю, що замість blankвас так само добре можна використовувати foo, хоча _blankнасправді має особливе значення. Я не можу знайти жодної інформації, яка могла б довести інше. Ти можеш?

— GolezTrol

2

@Stefan Ні, _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"

— Учень завжди"

1

Майте на увазі, що target="_blank"це вразливість, ви можете прочитати про це у mathiasbynens.github.io/rel-noopener

— PhoneixS

36

Якщо ви хочете зробити команду один раз для всього свого сайту, замість того, щоб робити це після кожного посилання. Спробуйте це місце у керівника вашого веб-сайту та бінго.

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

сподіваюся, що це допомагає

— Кіберкілл
джерело

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

— Табанг
джерело

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/

— Дарміс
джерело