Всем доброго времени суток и давайте непосредственно приступим к рассмотрению данной темы. За работу с окнами в js отвечает метод open объекта window, выглядит это все примерно следующим образом.

var url = window.open('');
console.log(url);

c помощью данного действия у нас должна открыться новая вкладка в браузере. Если вкладка не открылась, то это нормально , так как все сплывающие окна современные браузеры блокируют. Это связано прежде всего с надоедливой рекламой и баннерами.

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

Теперь перейдем к коду, как мы видим с помощью метода open мы открываем пустую вкладку, если же мы хотим открыть какой либо новый ресурс допустим vk, то указываем его адрес в самом методе

var url = window.open('https://vk.com');
console.log(url);

также следую обратить внимание на , то что возвращает нам этот метод в переменную url.

Если окно заблокировано браузером то нам вернется null если нет то объект window. Зная про это мы можем запросить разрешение пользователя на открытие новой вкладки или окна, пример:

var url = window.open('https://vk.com');
if(url === null){
    alert('Разрешите открыть страницу в новой вкладе с адресом https://vk.com');
}

Мы можем использовать полученный объект window для выполнения кода в открывающемся окне. Пример:

var url = window.open('https://vk.com','name');
if(url === null){
    alert('Разрешите открыть окно в новой вкладе с адрессом https://vk.com');
}
else{
    url.alert('Добро пожаловать на страницу vk');
}

здесь как видите при переходе на страницу vk мы вывели модальное окно с приветствием.

Едем дальше, вообще метод open можем принимать в себя три параметра.

Это url - адрес куда мы хотим перейти, который мы уже рассмотрели

name - название нового окна, используя это параметр вы идентифицируете данное окно и следовательно не сможете открыть еще одно такое же.

options - параметры или настройки с помощью чего вы сможете задавать размеры окна, позиции и т. п.

Все три параметра задаются в таком порядке:

window.open(url, name,options)

теперь непосредственно перйдем к практике:

var url = window.open('','name');

как вы знаете с помощью данного приема мы откроем новую пустую вкладку, но здесь мы указали параметр name , то есть задали идентификатор или имя для окна. Теперь мы не сможет используя данный код открыть более одного окна или вкладки. Проверьте сами с параметром или без.

var url = window.open('https://vk.com','name','width=500,height=500,top=100,left=500');

данный код откроет нам страницу в новом окне с заданными размерами и позицией расположения. Здесь в качестве параметра options перечислены через запятую свойства которые мы применили к нашему окну. Отмечу что все значения в единице измерения пиксели.

width и height - ширина и высота окна.

top и left - позиция по осям y и x от левого верхнего края.

Рассмотрим еще один метод для работы с окнами объекта window

window.close();

метод close() закрывает текущее окно , как правило он работает только с окнами которые были открыты за счет других (с помощью метода open, или ссылки с атрибутом target="_blank")

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

Я желаю вам успехов и удачи. Пока!