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

Ціна 74 грн. + 3 подарунки
відправка  Укрпоштою  40  грн.golubci

Як відкрити посилання в новому вікні?

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

завдання

Створити посилання, яка відкриває документ в новому вікні.

Рішення

За замовчуванням посилання відкриваються в тому ж вікні, де вони розташовані. Щоб будь-яке посилання відкривалася в новому вікні, до тегу слід додати атрибут target зі значенням _blank, як показано в прикладі 1.

приклад 1. Посилання в новому вікні

HTML5 IE Cr Op Sa Fx

Врахуйте, що при використанні суворого атрибут target в HTML4 і XHTML засуджується і код з ним не пройде валідацію. Щоб в такому випадку зробити посилання для відкриття в новому вікні і дотримати коректність коду, одних HTML і CSS недостатньо, тому доведеться звернутися до скриптів. Спочатку необхідно якось виділити посилання, які будуть відкриватися в новому вікні, наприклад, атрибутом rel зі значенням external . Цей атрибут коротко описує посилання або куди вона веде. Браузери не сприймають цей атрибут, але це і не потрібно, оскільки ми будемо перевіряти всі посилання через JavaScript (приклад 2). До за потрібне посиланнях додається все той же target . Але так як це робиться програмно, то валідатор хитрощі не помітить.

Дізнайтеся як відкрити посилання в новому вікні або на новій вкладці

Один з відвідувачів сайту запитав, як відкрити посилання в новому вікні HTML . У цій статті я відповім на це питання.

  • Що вам буде потрібно
  • Як відкрити посилання в новій вкладці або в новому вікні браузера (автоматично)
  • У цього методу не так багато плюсів
  • Сайт стає вразливим для фішингових атак
  • висновок

Що вам буде потрібно

Відвідувач не уточнив, яким редактором користується, тому будемо вважати, що він працює безпосередньо в HTML . Але це не означає, що ви не зможете слідувати цій інструкції, якщо використовуєте для створення сайту будь-якої візуальний редактор. Просто потрібно буде отримати доступ до розмітки сторінки. Більшість редакторів і блог-платформ дозволяють вручну відредагувати HTML-код .

Наприклад, якщо ви працюєте в Expression Web, можна відредагувати код сторінки, переключившись в «Режим коду» (Code mode).

Як відкрити посилання в новій вкладці або в новому вікні браузера (автоматично)

Коротка відповідь: просто додайте до своїх посиланнях (тегу) атрибут target = "_ blank" .

Припустимо, що у вас є наступна посилання:

Змініть її, щоб вона виглядала наступним чином:

Тепер, коли користувачі клацають по цьому посиланню, вона відкриється в новому вікні або на новій вкладці (в залежності від того, яким браузером вони користуються, і як він налаштований).

Зверніть увагу, що якщо ви використовуєте DOCTYPE із суворим синтаксисом XHTML 1.0 або 1.1, то не вийде одночасно використовувати наведений вище код та пройти валідацію сторінки. Але підозрюю, що цими стандартами ніхто не користується. «Перехідні» версії цих стандартів для відкриття в новому вікні HTML нам цілком підійдуть, і в них також підтримується атрибут target .

У цього методу не так багато плюсів

Багато починаючі веб-майстри думають, що, відкриваючи посилання в новому вікні, користувачі з меншою ймовірністю покинуть сайт. Це в корені невірно. Якщо хтось клацне по посиланню, а потім захоче повернутися на ваш сайт, вони просто натиснуть кнопку «Назад». Про цю функцію навіть не самі технічно підковані люди дізнаються відразу після знайомства з інтернетом. Просунуті користувачі до того ж знають, що можна використовувати опцію «Відкрити посилання в новій вкладці» (або «Відкрити посилання в новому вікні»).

Створюючи посилання, які відкриваються в новому вікні, ви заважаєте користувачам повернутися на сайт. Може здатися, що вони без праці повернуться в перше вікно з вашим сайтом. Мій досвід показує, що це не так — людей збиває з пантелику непрацююча кнопка «Назад». Вони навіть не підозрюють, що перед ними нова вкладка або нове вікно. Коли у них не виходить швидко повернутися на попередню сторінку, вони просто здаються і переходять на інші ресурси.

З досвідченими користувачами справи йдуть не краще. Їх дуже дратує «звичка» вашого сайту відкривати нові вікна без дозволу. На те вони і досвідчені користувачі — якби вони хотіли відкрити нову вкладку, вони б зробили це самі, і їм анітрохи не подобається, що це роблять без їх згоди. Ще гірше, якщо всі ваші посилання відкриваються в новому вікні.

Сайт стає вразливим для фішингових атак

Якщо ви застосовуєте кнопку HTML відкрити в новому вікні, використовуючи target = "_ blank", сайт, на який веде посилання, отримує доступ до вікна / вкладці з вашої сторінкою і може підмінити її вміст.

Це не тільки не втримає користувачів на сайті (якщо ви відкривали нові вкладки саме з цією метою), але і піддасть загрозі відвідувачів. Наприклад, якщо у вас є сторінка входу користувача, що знаходиться за посиланням сайт може замінити її на копію вашої, але при цьому збирає логіни і паролі користувачів. Такий вид атак називається «фішинг».

І це не теоретична вразливість. Фахівці відділу безпеки Google відзначили «значна кількість повідомлень» про подібний перехопленні вкладок з метою впровадження шкідливого програмного забезпечення.

Деякі браузери дозволяють запобігти подібну поведінку додаванням до заслання атрибута rel = "noopener noreferrer» . Приклад, наведений на початку статті, буде виглядати наступним чином:

Теоретично, як rel = "noopener», так і rel = "noreferrer» має бути достатньо, щоб захиститися від подібної атаки при відкритті сторінки в новому вікні HTML . При цьому коректніше використовувати атрибут rel = "noopener», так як у rel = "noreferrer» є побічний ефект — браузер не передаватиме сайту URL джерела запиту. Але на даний момент не всі браузери підтримують атрибут rel = "noopener» . Аналогічно, rel = "noreferrer" не підтримується деякими браузерами. Тому, якщо захочете захистити користувачів якомога більшого числа браузерів, ймовірно, доведеться використовувати обидва атрибути.

Проте, цей прийом працює тільки на актуальних версіях Chrome, Firefox і Safari . Internet Explorer цю функцію не підтримує, хоча я встиг швидко перевірити 11 версію IE, і вона, начебто, захищена від подібної атаки при настройках безпеки, які застосовуються за замовчуванням. Щодо браузера Microsoft Edge точно сказати не можу.

Іншими словами, описаний вище метод не можна назвати стовідсотковим захистом. Кращий спосіб уникнути цієї проблеми — використовувати нормальні посилання без атрибута target = "_ blank" .

висновок

Загальна рекомендація — по можливості уникати відкриття вкладок в новому вікні HTML . Звичайно, в деяких випадках цього не уникнути. У цій ситуації можна попередити відвідувачів сайту про те, що «посилання відкривається в новому вікні». Це не сильно допоможе середньостатистичному користувачеві і не захистить його від фішингових атак через ваш сайт, але хоча б не буде дратувати більш досвідчених користувачів.

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

посилання відкрити в новому вікні

Сьогодні ми розберемо кілька варіантів, як відкрити посилання в новій вкладці html.

Найчастіше, цей прийом використовують для утримання відвідувачів на своєму сайті, якщо на сайті присутні посилання, що ведуть на сторонні ресурси. Відкриття посилання в новій вкладці html дозволяє затримати відвідувача на своєму сайті. Так як, при натисканні на посилання, відбувається відкриття в окремій вкладці, і, формально, відвідувач залишається на вашому сайті.

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

Навігація по статті:

  • Атрибут target = _ blank
  • тег base
  • Відкриття посилання за допомогою JavaScript

Атрибут target = _ blank

Цей спосіб є найбільш поширеним, і відомий практично кожному веб-розробнику, і полягає він у додаванні в тег спеціального атрибута target з присвоєним значення _blank.

Виглядати це буде наступним чином:

Працює це так:

При своїй простоті цей варіант має свої недоліки:

  1. 1. При перевірці коду валідатором, можливе виникнення помилок.
  2. 2. Користуючись цим методом, ви позбавляєте користувача свободи дії, що може викликати невдоволення. Досвідчені веб-розробники дотримуються думки, що користувачеві необхідно залишати свободу вибору в цьому питанні. Використання даного способу вважається поганим тоном.

тег base

Дозволяє не вказувати для кожного посилання атрибут target. Тобто відкриття всіх посилань автоматично станься в окремій вкладці. Для використання даного методу необхідно на початку сторінки, перед, додати наступний рядок:

Ссылка на основную публикацию