Как открыть ссылку в новом окне?

Высокая сложность

Раздел: Ссылки

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. Ссылка в новом окне

HTML5IE 9Cr 16Op 11Sa 5Fx 10

<!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.1IE 9Cr 16Op 11Sa 5Fx 10

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

JavaScriptXHTMLссылки

Если вам понравились материалы сайта, вы можете поддержать сайт, купив Рецепты CSS в формате CHM или в виде набора HTML-файлов за 50 р.