window.open()

Метод open() объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.

        
          
          window.open('https://practicum.yandex.ru/');
          window.open('https://practicum.yandex.ru/');

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Метод open() имеет три опциональных параметра:

        
          
          window.open(url, target, windowFeatures);
          window.open(url, target, windowFeatures);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

url – строка, которая содержит относительный или абсолютный URL.

target – строка, которая указывает где откроется новое окно. Он может принимать те же значения, что и атрибут target тега <a>: имя окна или одно из ключевых слов _self, _blank, _parent, _top.

windowFeatures – строка, которая позволяет детально описать, как будет выглядеть новое окно. Опции в строке указываются через запятую в формате name=value, для булевых типов значение можно опустить.

Вызвать метод без параметров тоже можно, по умолчанию будет открыта чистая вкладка about:blank.

Числовые:

width or innerWidth / height or innerHeight - определит ширину и высоту содержимого окна включая полосы прокрутки. Минимальное возможное значения - 100px.

left or screenX / top or screenY - здесь можно указать расстояние от левой верхней части (или рабочей области) экрана пользователя, на котором откроется окно.

Булевые:

popup - открывает ссылку в новом окне

menubar - отвечает за отображение строки меню

toolbar - управляет показом кнопок панели инструментов и панели закладок

location - отвечает за показ адресной строки

resizable - позволяет включить/выключить возможность пользователям изменять размеры окна

scrollbars - отображение полос прокрутки

status - отображение строки состояния

noopener - помогает повысить безопасность сайта, так как предотвращает доступ открываемого ресурса к текущей странице (через сеанс браузера).
При использовании noopener значения второго параметра метода open() (кроме _top, _self, _parent), будут обработаны как _blank

noreferrer - предотвращает передачу информации об исходном ресурсе на целевой. При установке этого значения как true noopener также становится true.

        
          
          window.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окнеwindow.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex"window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указанным
          window.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окне

window.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex"

window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указанным

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Использование метода open() позволяет получить ссылку на новое окно и взаимодействовать с ним, например:

        
          
          const newWindow = window.open("", "new window", "popup");newWindow.document.write("<p>Hello, World!</p>");// откроется новое окно с текстом "Hello, World!"
          const newWindow = window.open("", "new window", "popup");
newWindow.document.write("<p>Hello, World!</p>");
// откроется новое окно с текстом "Hello, World!"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Авторы MDN рекомендуют использовать метод open() в крайних случаях и (никогда!) не прибегать к встроенному (inline) использованию window.open().

        
          
          <a href='#' onclick='window.open(`any url`)'>  <!-- когда делаете так, где-то плачет котик. Не делайте так -->
          <a href='#' onclick='window.open(`any url`)'>  <!-- когда делаете так, где-то плачет котик. Не делайте так -->

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У метода open() есть несколько недостатков:

1. многие браузеры блокируют попапы.
2. open() решает за пользователя, как именно открыть ссылку. Улучшится ли пользовательский опыт, если чтению контента будут мешать неожиданно всплывающие окна или переходы на новую вкладку (вместо открытия их в фоновом режиме)? Вряд ли.
3. инлайновые значения вызывают неожиданное поведение ссылки при взаимодействии с ней (и не только). Важно и то, что они также передают неправильную семантику скринридерам.

Узнать подробнее можно на сайте MDN