Открытие нового окна

241

посл. ред. 18.03.2018

Описание метода `window.open()`

Метод window.open() открывает новое окно браузера или вкладку, как если бы в меню браузера выбрать пункт Открыть новое окно или Открыть новую вкладку. В это окно загружается документ в соответствии с указанными параметрами. Данный метод возвращает ссылку на объект window открытого окна или null, если окно не открылось.

window.open(URL, имя_окна[, параметры_окна])

URL: Абсолютный или относительный адрес ресурса для загрузки в новое окно. Можно указывать любые файлы (HTML-документы, картинки и т.п.), поддерживаемые браузером. Если в качестве URL передаётся пустая строка, тогда открывается пустое окно, но ничего не загружается.
имя_окна: Имя нового окна. Оно может использоваться в качестве значения атрибута target тега <a> для перехода именно в это окно. Имя окна не должно содержать пробелов. Данный параметр не имеет отношения к заголовку окна.
параметры_окна: Необязательный аргумент. Параметры окна передаются в виде строки, содержащей список настроек окна (размеры, положение и т.д.), разделённых запятыми. Строка не должна содержать пробелов. Изменить настройки окна после его открытия нельзя.

Пример использования:

open('https://ya.ru', 'yandex_window');
// откроет новое окно (вкладку) и загрузит страницу 'https://ya.ru'

Новое окно открывается сразу при вызове window.open() и изначально оно пустое. Загрузка ресурса не начинается до тех пор, пока не выполнится весь текущий скриптовый блок.

Если окно с указанным именем уже открыто, тогда загрузка документа выполнится в это же окно. В этом случае метод вернёт ссылку на данное окно, а передаваемые параметры окна проигнорируются. Если и URL - пустая строка, тогда с окном вообще ничего не произойдёт. Чтобы при каждом вызове window.open() открывалось новое окно, в качестве имени окна можно указать специальное значение _blank.

<html>
<head>
  <title>BOM-интерфейс</title>
</head>
<body>
  <button onclick="sameWindow()">Всегда то же окно</button>
  <br>
  <button onclick="newWindow()">Всегда новое окно</button>
</body>
</html>
 
<script>
function sameWindow() {
  open('https://ya.ru', 'yandex_window');
}
function newWindow() {
  open('https://ya.ru', '_blank');
}
</script>

Если при открытии окна его параметры не указаны (третий агрумент метода window.open() опущен или передана пустая строка), тогда внешний вид нового окна будет таким же, как у исходного (со всеми панелями инструментов), или документ загрузится в новой вкладке исходного окна браузера. Если же указан хотя бы один параметр, то все остальные параметры (кроме titlebar и close, которые установлены по умолчанию) считаются отменёнными.

Если параметр должен принимать числовое значение, то оно указывается после знака = (равно), например width=640.

Если опция может иметь только два состояния (включена/отключена), тогда есть три способа для её включения. Примеры:

location=yes
location=1
location

Для отключения опций им необходимо присвоить значение no или 0. По умолчанию все опции, кроме titlebar и close, отключены. Поэтому не имеет смысла отключать остальные опции, кроме этих двух.

<html>
<head>
  <title>BOM-интерфейс</title>
</head>
<body>
  <button onclick="newWindow()">Открыть новое окно</button>
</body>
</html>
 
<script>
function newWindow() {
  open(
    'http://WebGentleman.ru/javascript/',
    'WebGentleman.ru',
    'width=320,height=320,scrollbars'
  );
}
</script>

В примере выше для открываемого окна будут использоваться опции scrollbars, titlebar и close, а также установлен размер области документа 320x320 пикселей.

Если в параметрах открываемого окна не указаны его размеры, тогда используются размеры исходного окна.

Если в параметрах не указано положение окна, тогда оно размещается на 22 пикселя ниже и 22 пикселя правее исходного.

Если в параметрах окна не указаны ни размеры, ни положение окна, а исходное окно развёрнуто на весь экран, новое окно тоже разворачивается на весь экран.

В некоторых браузерах пользователь может сам установить параметры открываемых окон, которые нельзя изменить опциями метода window.open().

Параметры окна

Размеры и положение

left: Расстояние от левой границы экрана до окна. Окно не может быть выведено за областью экрана.
top: Расстояние от верхней границы экрана до окна. Окно не может быть выведено за областью экрана.
height: Высота области содержимого документа в пикселях, включая горизонтальную полосу прокрутки. Не может быть меньше 100.
width: Ширина области содержимого документа в пикселях, включая вертикальную полосу прокрутки. Не может быть меньше 100.

Функциональность

menubar: Используется для отображения основного меню (Файл, Правка, Вид...).
toolbar: Используется для отображения панелей инструментов (панель навигации, панель вкладок, панели плагинов и т.д.).
location: Используется для отображения адресной строки.
personalbar: Используется для отображения панели закладок.
status: Используется для отображения строки состояния. Удаление строки состояния может привести к потере полезной информации (иногда, жизненно необходимой для пользователя) и функциональности окна, поэтому использовать эту опцию необходимо всегда.
resizable: Разрешает изменять размер окна.
scrollbars: Используется для отображения вертикальной и горизонтальной полос прокрутки, если элементы страницы не помещаются в области просмотра документа. Необходимо всегда включать данную опцию, чтобы пользователь имел возможность просмотреть весь документ.
titlebar: Используется для отображения заголовка окна. По умолчанию опция включена.
close: Используется для отображения иконок сворачивания и закрытия окна. По умолчанию опция включена.

Использование на практике

Чаще всего метод window.open() применяется для открытия ссылок в новом окне (именно окне, а не вкладке). Это делается очень просто:

<html>
<head>
  <title>BOM-интерфейс</title>
</head>
<body>
  <p>
    <a
      href="https://ya.ru"
      target="window_example_1"
      onclick="windowOpenExample(event)"
    >Поиск Yandex</a>    
  </p>
  <p>
    <a
      href="https://google.ru"
      target="window_example_1"
      onclick="windowOpenExample(event)"
    >Поиск Google</a>    
  </p>
</body>
</html>
 
<script>
var window_objects = []; /* массив всех открываемых окон */

function windowOpenExample(event) {
  event.preventDefault(); /* отмена действий браузера по умолчанию */
  var ref_href = event.currentTarget.href; /* URL из ссылки */
  var ref_target = event.currentTarget.target; /* имя окна из ссылки */

  if ((window_objects[ref_target] == undefined) || window_objects[ref_target].closed) {
    /* если окно ещё не открыто или уже закрыто, тогда можно задать параметры для окна */
    window_objects[ref_target] = window.open(
      ref_href,
      ref_target,
      'top=0,left=0,height=400,width=400,resizable,scrollbars,status'
    );
    window_objects[ref_target].moveTo(0, 0);
    window_objects[ref_target].resizeTo(400, 400);
  } else {
    /* если окно открыто, тогда его параметры изменить нельзя */
    window_objects[ref_target] = window.open(
      ref_href,
      ref_target
    );
  }

  window_objects[ref_target].focus(); /* фокусировка на окне */
}
</script>

Поиск Yandex

Поиск Google

Приведённая функция загружает ресурс в новом окне и всегда фокусируется на нём, даже если окно уже было открыто.

Значения атрибутов href и target можно было бы передать напрямую в обработчике onclick, но тогда при отключенном JavaScript ссылка не будет работать.

Методы moveTo() и resizeTo() используются на случай, если параметры окна top, left, height или width не поддерживаются браузером. Это увеличивает вероятность кроссбраузерного отображения, но не гарантирует, так как moveTo() и resizeTo() тоже могут не поддерживаться.

Полезные советы

Избегайте использования `window.open()`

Большинство браузеров позволяют открывать ссылки в новых вкладках и, зачастую, этого бывает достаточно для web-разработчика.

Использование window.open() нежелательно по следующим причинам:

Скорость открытия вкладки намного выше, чем скорость открытия нового окна, что является предпочтительным для пользователя.
Чем больше открыто окон, тем сложнее навигация между ними. Навигация по вкладкам удобнее и понятнее.
В новых окнах могут отсутствовать различные меню, панели инструментов, полосы прокрутки и т.д. Открывая ресурс в новой вкладке, об этом можно не беспокоиться.
Открытие нового окна увеличивает нагрузку на операционную систему пользователя.

Помечайте ссылки, создающие новые окна

Пользователь может не заметить, что открылось новое окно. Это может дезориентировать его (отсутствие кнопки Назад и т.п.), что является нежелательным моментом. Если предварительно пометить ссылку, которая должна открыться в новом окне, тогда пользователь будет готов к этому.

Указать, что ссылка откроется в новом окне, можно с помощью атрибута title, стилизацией курсора мыши или добавлением иконки к ссылке. Пример:

<p>
  Наведите курсор: 
  <a
    href="https://ya.ru"
    target="window_example_2"
    onclick="windowOpenExample(event)"
    style="cursor: url('window-open-cursor.cur'), pointer;"
    title="Откроется в новом окне"
  >Поиск Yandex <img src="window-open-icon.png" alt="Открыть в новом окне"></a>
</p>

Наведите курсор: Поиск Yandex Открыть в новом окне .

Также, иконку можно использовать отдельно для открытия ссылки в новом окне, а на саму ссылку обработчик не вешать. Пример:

<p>
  <a href="https://google.ru">Поиск Google</a> 
  <a
    href="https://google.ru"
    target="window_example_3"
    title="Открыть в новом окне"
    onclick="windowOpenExample(event)"
  ><img src="window-open-icon.png" alt="Открыть в новом окне"></a>
</p>

Поиск Google

Если нажать на саму ссылку, она откроется в соответствии с настройками браузера. По клику на иконке точно откроется новое окно.

Указывайте реальный URL в атрибуте `href`

Обязательно необходимо использовать реальный URL в атрибуте href. В таком случае, ссылка останется работоспособной при отключенном JavaScript или если браузер не поддерживает открытие новых окон.

Всегда используйте атрибут `target`

Если JavaScript отключен или не поддерживается, тогда атрибут target подскажет браузеру, что ссылку необходимо открыть в новом окне (вкладке).

Избегайте использования `_blank`

Всегда используйте конкретные имена открываемых окон. Это позволит повторно использовать уже открытые окна, что увеличит скорость открытия страницы и сэкономит системные ресурсы.

Использование ключевого слова _blank нецелесообразно, так как это приводит к открытию новых безымянных окон, которые нельзя использовать повторно.

В любом случае, хорошим считается такой код, который не противоречит окончательному выбору пользователя. Правильный код должен расширять возможности браузера и предоставлять пользователю более широкий выбор для открытия ссылок.