| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Створити посилання, яка відкриває документ в новому вікні.
Рішення
За замовчуванням посилання відкриваються в тому ж вікні, де вони розташовані. Щоб будь-яке посилання відкривалися в новому вікні, до тегу <a> слід додати атрибут target зі значенням _blank, як показано в прикладі 1.
Приклад 1. Посилання у новому вікні
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Посилання</title> </head> <body> <p><a href="1.html">Посилання відкриється в новому вікні</a></p> <p><a href="2.html" target="_blank">Посилання відкриється в новому вікні</a></p> </body> </html>
Врахуйте, що при використанні суворого <!DOCTYPE> атрибут target в HTML4 XHTML засуджується і код з ним не пройде валідацію. Щоб у такому випадку зробити посилання для відкриття в новому вікні і дотримати коректність коду, одних HTML і CSS недостатньо, тому доведеться звернутися до скриптів. Спочатку необхідно виділити посилання, які будуть відкриватися в новому вікні, наприклад, атрибутом rel зі значенням external. Цей атрибут коротко описує посилання або куди вона веде. Браузери не сприймають цей атрибут, але це і не потрібно, оскільки ми будемо перевіряти всі посилання через JavaScript (приклад 2). До потрібне посиланнями додається все той же target. Але так як це робиться програмно, то валідатор хитрощі не помітить.
Приклад 2. Відкриття посилання через JavaScript
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Посилання в новому вікні</title>
<script type="text/javascript">
/*<![CDATA[ */
function externalLinks() {
links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++) {
link = links[i];
if (link.getAttribute("href") && link.getAttribute("rel") == "external")
link.target = "_blank";
}
}
window.onload = externalLinks;
/* ]]> */
</script>
</head>
<body>
<p><a href="1.html">Посилання відкриється в поточному вікні</a></p>
<p><a href="2.html" rel="external">Посилання відкриється в новому вікні</a></p>
</body>
</html>