Метод open() окна

Метод open() интерфейса Window загружает указанный ресурс в новый или существующий контекст просмотра (то есть, вкладку, окно или iframe) под указанным именем.

url Необязательный

Строка, указывающая URL или путь к загружаемому ресурсу. Если указана пустая строка ("") или этот параметр опущен, в целевой контекст просмотра открывается пустая страница.

target Необязательный

Строка без пробелов, указывающая имя контекста просмотра, в который загружается ресурс. Если имя не соответствует существующему контексту, создаётся новый контекст и ему присваивается указанное имя. Также можно использовать специальные ключевые слова имени target, _self, _blank (по умолчанию), _parent, _top, и _unfencedTop. _unfencedTop относится только к рамкам с ограниченным доступом.

Это имя может быть использовано в качестве атрибута target элементов <a> или <form>.

windowFeatures Необязательный

Строка, содержащая список параметров окна, разделённых запятыми, в формате name=value. Булевы значения могут быть установлены в true с помощью одного из следующих: name, name=yes, name=true, или name=n, где n — любое целое число отличное от нуля. Эти параметры включают в себя такие опции, как размер и положение окна по умолчанию, открытие минимального всплывающего окна и т. д. Поддерживаются следующие опции:

attributionsrc Экспериментальный

Указывает, что браузер должен отправить заголовок Attribution-Reporting-Eligible вместе с вызовом open(). Этот вызов должен быть выполнен с использованием временной активацией (т. е. внутри обработчика события взаимодействия пользователя, например click ), в течение пяти секунд после взаимодействия пользователя. На стороне сервера это используется для запуска отправки заголовка Attribution-Reporting-Register-Source в ответе для завершения регистрации источника атрибуции.

Кроме того, браузер также вызывается для сохранения связанных данных источника (как предоставлено в заголовке ответа Attribution-Reporting-Register-Source) при завершении метода open().

Для получения более подробной информации обратитесь к API отчётов об атрибуции.

Примечание: Вызовы open() не могут быть использованы для регистрации триггера атрибуции.

popup

По умолчанию, window.open открывает страницу в новой вкладке. Если popup установлено в true, запрашивается использование минимального всплывающего окна. Функциональные возможности пользовательского интерфейса, включённые в всплывающее окно, автоматически определяются браузером, как правило, включая только адресную строку. Если popup присутствует и установлено в false, открывается новая вкладка.

Существует несколько устаревших параметров, которые ранее использовались для управления функциями пользовательского интерфейса открываемого окна. В современных браузерах они имеют только эффект запроса всплывающего окна. Если popup не указано, а windowFeatures содержит любые параметры (включая нераспознанные), кроме noopener, noreferrer, или attributionsrc, окно также открывается как всплывающее окно, если выполняются следующие условия:

• location и toolbar оба false или отсутствуют
• menubar false или отсутствует
• resizable false
• scrollbars false или отсутствует
• status false или отсутствует

В противном случае окно открывается как вкладка.

width или innerWidth

Указывает ширину области содержимого, включая полосы прокрутки. Минимальное требуемое значение — 100.

height или innerHeight

Указывает высоту области содержимого, включая полосы прокрутки. Минимальное требуемое значение — 100.

left или screenX

Указывает расстояние в пикселях от левого края рабочей области, определённой операционной системой пользователя, где будет создано новое окно.

top или screenY

Указывает расстояние в пикселях от верхнего края рабочей области, определённой операционной системой пользователя, где будет создано новое окно.

noopener

Если этот параметр установлен, новое окно не будет иметь доступа к исходному окну через Window.opener и возвращает null.

При использовании noopener, имена целевых объектов, отличные от _top, _self, и _parent, обрабатываются так же, как _blank для определения, следует ли открывать новый контекст просмотра.

noreferrer

Если этот параметр установлен, браузер опустит заголовок Referer, а также установит noopener в true. Для получения дополнительной информации см. rel="noreferrer".

Значение null обрабатывается так же, как пустая строка ("").

Если браузер успешно открывает новый контекст просмотра, возвращается объект WindowProxy. Возвращённая ссылка может быть использована для доступа к свойствам и методам нового контекста, если он соответствует требованиям безопасности политики одинакового происхождения .

Если используется заголовок HTTP Cross-Origin-Opener-Policy и политики документа таковы, что документ открывается в новой группе контекстов просмотра, ссылки на открытое окно разрываются, и возвращаемый объект укажет, что открытое окно закрыто (closed равно true).

null возвращается, если браузер не может открыть новый контекст просмотра, например, из-за блокировки браузером всплывающих окон.

Метод open() интерфейса Window принимает URL в качестве параметра и загружает ресурс, который он определяет, в новую или существующую вкладку или окно. Параметр target определяет, в какое окно или вкладку загрузить ресурс, а параметр windowFeatures позволяет управлять открытием нового всплывающего окна с минимальными элементами пользовательского интерфейса и управлять его размером и положением.

Удаленные URL-адреса не будут загружаться немедленно. Когда window.open() возвращается, окно всегда содержит about:blank. Фактическая загрузка URL откладывается и начинается после выполнения текущего блока скрипта. Создание окна и загрузка указанного ресурса выполняются асинхронно.

Современные браузеры имеют строгие политики блокировки всплывающих окон. Всплывающие окна должны открываться в ответ на вход пользователя, и для каждого вызова Window.open() требуется отдельное событие пользовательского жеста. Это предотвращает рассылку пользователю множества окон. Однако это создаёт проблему для многооконных приложений. Чтобы обойти это ограничение, вы можете разработать свои приложения так:

• Открывать не более одного нового окна за раз.
• Использовать существующие окна для отображения различных страниц.
• Предупреждать пользователей о необходимости обновления настроек браузера для разрешения открытия нескольких окон.

В качестве альтернативы, следующий пример демонстрирует, как открыть всплывающее окно, используя параметр popup.

window.open("https://www.mozilla.org/", "mozillaWindow", "popup");

Возможно управление размером и положением нового всплывающего окна:

const windowFeatures = "left=100,top=100,width=320,height=320";
const handle = window.open(
  "https://www.mozilla.org/",
  "mozillaWindow",
  windowFeatures,
);
if (!handle) {
  // The window wasn't allowed to open
  // This is likely caused by built-in popup blockers.
  // …
}

В некоторых случаях JavaScript отключён или недоступен, и window.open() не будет работать. Вместо того, чтобы полагаться только на наличие этой функции, мы можем предоставить альтернативное решение, чтобы сайт или приложение всё ещё функционировали.

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

HTML

<a href="https://www.wikipedia.org/" target="OpenWikipediaWindow">
  Wikipedia, a free encyclopedia (opens in another, possibly already existing,
  tab)
</a>

JavaScript

let windowObjectReference = null; // global variable
function openRequestedTab(url, windowName) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName);
  } else {
    windowObjectReference.focus();
  }
}

const link = document.querySelector("a[target='OpenWikipediaWindow']");
link.addEventListener(
  "click",
  (event) => {
    openRequestedTab(link.href);
    event.preventDefault();
  },
  false,
);

Вышеприведенный код решает несколько проблем с удобством использования, связанных с открытием ссылок в всплывающих окнах. Цель атрибута event.preventDefault() в коде заключается в отмене стандартного действия ссылки: если обработчик событий для click выполняется, то стандартное действие ссылки не нужно выполнять. Но если поддержка JavaScript отключена или отсутствует в браузере пользователя, то обработчик событий для click игнорируется, и браузер загружает указанный ресурс во фрейм или окно с именем "WikipediaWindowName". Если нет ни фрейма, ни окна с именем "WikipediaWindowName", то браузер создаст новое окно и назовет его "WikipediaWindowName".

Использование "_blank" в качестве значения атрибута target приведет к созданию нескольких новых и безымянных окон на рабочем столе пользователя, которые нельзя переиспользовать. Постарайтесь задать осмысленное имя атрибуту target и переиспользовать этот атрибут на вашей странице, чтобы щелчок по другой ссылке мог загрузить указанный ресурс в уже созданном и отображенном окне (что ускорит процесс для пользователя) и, таким образом, оправдать причину (и ресурсы пользователя, затраченное время) для создания вторичного окна в первую очередь. Использование одного значения атрибута target и его повторное использование в ссылках гораздо более дружественно к ресурсам пользователя, поскольку это создает только одно вторичное окно, которое повторно используется.

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

HTML

<p>
  <a href="https://www.wikipedia.org/" target="SingleSecondaryWindowName">
    Wikipedia, a free encyclopedia (opens in another, possibly already existing,
    tab)
  </a>
</p>
<p>
  <a
    href="https://support.mozilla.org/products/firefox"
    target="SingleSecondaryWindowName">
    Firefox FAQ (opens in another, possibly already existing, tab)
  </a>
</p>

JavaScript

let windowObjectReference = null; // global variable
let previousURL; /* global variable that will store the
                    url currently in the secondary window */
function openRequestedSingleTab(url) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, "SingleSecondaryWindowName");
  } else if (previousURL !== url) {
    windowObjectReference = window.open(url, "SingleSecondaryWindowName");
    /* if the resource to load is different,
       then we load it in the already opened secondary window and then
       we bring such window back on top/in front of its parent window. */
    windowObjectReference.focus();
  } else {
    windowObjectReference.focus();
  }
  previousURL = url;
  /* explanation: we store the current url in order to compare url
     in the event of another call of this function. */
}

const links = document.querySelectorAll(
  "a[target='SingleSecondaryWindowName']",
);
for (const link of links) {
  link.addEventListener(
    "click",
    (event) => {
      openRequestedSingleTab(link.href);
      event.preventDefault();
    },
    false,
  );
}

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

// Script from example.com
const otherOriginContext = window.open("https://example.org");
// example.com and example.org are not the same origin

console.log(otherOriginContext.origin);
// DOMException: Permission denied to access property "origin" on cross-origin object

// Script from example.com
const sameOriginContext = window.open("https://example.com");
// This time, the new browsing context has the same origin

console.log(sameOriginContext.origin);
// https://example.com

Дополнительную информацию см. в статье Политика одинакового происхождения.

Желательно избегать window.open(), по нескольким причинам:

• Современные браузеры предлагают функцию блокировки всплывающих окон.
• Современные браузеры поддерживают вкладку, и пользователи браузеров с вкладками предпочитают открывать новые вкладки, а не новые окна в большинстве случаев.
• Пользователи могут использовать встроенные функции или расширения браузера, чтобы выбрать, открывать ли ссылку в новом окне, в том же окне, в новой вкладке, в той же вкладке или в фоновом режиме. Принудительное открытие в определенном режиме с помощью window.open() сбивает их с толку и игнорирует их привычки.
• Всплывающие окна не имеют панели инструментов меню, в то время как новые вкладки используют пользовательский интерфейс окна браузера; поэтому многие пользователи предпочитают просмотр вкладок, поскольку интерфейс остается стабильным.

Избегайте <a href="#" onclick="window.open(…);"> или <a href="javascript:window\.open(…)" …>.

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

При необходимости используйте элемент <button> вместо этого. В целом, вы должны использовать ссылку только для перехода по реальному URL-адресу.

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

<a target="WikipediaWindow" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

Цель состоит в том, чтобы предупредить пользователей об изменениях контекста, чтобы свести к минимуму путаницу с их стороны: изменение текущего окна или всплывающие новые окна могут сильно дезориентировать пользователей (в случае с всплывающим окном, нет панели инструментов с кнопкой «Назад», чтобы вернуться к предыдущему окну).

Когда явные изменения контекста явно идентифицируются до их возникновения, пользователи могут решить, хотят ли они продолжить, или подготовиться к изменению: они не будут не только сбиты с толку или чувствовать дезориентацию, но и более опытные пользователи смогут лучше решить, как открыть такие ссылки (в новом окне или нет, в том же окне, в новой вкладке или нет, в «фоновом» режиме или нет).

• WebAIM: Ссылки и гипертекст — Гипертекстовые ссылки
• MDN / Понимание WCAG, Руководство 3.2
• G200: Открытие новых окон и вкладок из ссылки только при необходимости
• G201: Предоставление пользователям предварительного уведомления при открытии нового окна

• target документация атрибута:
  • <a>
  • <form>
• window.close()
• window.closed
• window.focus()
• window.opener
• rel="opener" и rel="noopener"
• Политика одного происхождения