Открытие, закрытие и позиционирование окон

Последнее обновление: 01.11.2023

Язык JavaScript позволят программно управлять окнами веб-браузера. Для этого объект window предоставляет ряд методов. Так, метод open() открывает определенный ресурс в новом окне или вкладке браузера. Стоит учитывать, что подобное действие лучше выполнять по действию пользователя, например, по нажатию на кнопку, потому что в ином случае браузеры могут заблокировать подобные окна. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Click</button>
<script>
function openWindow(){
  window.open("https://microsoft.com");
}
</script>
</body>
</html>

Здесь на веб-странице определена кнопка - элемент button. У кнопки установлен атрибут onclick, который указывает на функцию javascript, которая будет выполняться по нажатию этой кнопки.

В коде javascript определена функция openWindow(), которая выполняется по нажатию на кнопку. В этой функции выполняется функция window.open(), в которую в качестве первого параметра передается адрес - в данном случае "https://microsoft.com". И по нажатию на кнопку будет открываться в новой вкладке страницы "https://microsoft.com".

window.open в javascript

Метод open() принимает ряд параметров:

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

В качестве первого параметра - url передается путь к ресурсу.

Второй параметр - target передается путь к ресурсу. Распространенные значения:

  • _self: страница открывается в текущей вкладке

  • _blank: страница открывается в новой вкладке или в отдельном окне

Например, открытие адреса в той же вкладке:

window.open("https://metanit.com", "_self");

Третий параметр позволяет установить набор стилевых характеристик окна. Каждая стилевая характеристика определяется в виде наборов name=value, где name - название стилевой характеристики, а value - ее значение. Друг от друга стилевые характеристики отделены запятой.

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

  • popup: указывает, будет ли открываться страница в отдельном всплывающем окне. Для этого может принимать такие значения, как yes, 1 или true. Например:

    window.open("https://metanit.com", "_blank", "popup=yes");
    всплывающие окна и window.open в javascript

  • width / innerWidth: ширина окна в пикселях. Например, width=640

  • height / innerHeight: высота окна в пикселях. Например, height=480

  • left / screenX: координата X относительно начала экрана в пикселях. Например, left=0

  • top / screenY: координата Y относительно начала экрана в пикселях. Например, top=0

  • location: указывает, будет ли отображаться адресная строка. Например, location=yes

  • menubar: указывает, будет ли отображаться панель меню. Например, menubar=yes

  • scrollbars: указывает, будет ли окно иметь полосы прокрутки. Например, scrollbars=yes

  • status: указывает, будет ли отображаться строка состояния. Например, status=yes

  • toolbar: указывает, будет ли отображаться панель инструментов. Например, toolbar=yes

Последние пять параметров в качестве значений могут принимать yes и no, вместо которых также можно использовать 1 и 0 соответственно

Пример применения нескольких параметров:

window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200");

Стоит отметить, что функция возвращает ссылку на окно, и с помощью этой ссылки мы можем управлять окном.

Также стоит отметить, что через свойство opener окна можно получить ссылку на главное окно, из которого было открыто текущее.

Закрытие окна

С помощью метода close() можно закрыть окно. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="closeWindow()">Close</button>
<script>
let metanitWindow = null;

function openWindow(){
    if(!metanitWindow || metanitWindow.closed){  // если окно не открыто
        metanitWindow = window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200,popup=yes");
   }
}
function closeWindow(){
    metanitWindow?.close(); // если окно открыто, то закрываем его
    metanitWindow = null;
}
</script>
</body>
</html>

Здесь определены две кнопки для открытия и закрытия окна. Ссылка на само окно помещается в переменную metanitWindow, которая изначально равна null. По нажатию на первую кнопку вызывается функция openWindow(). В этой функции проверяем, что metanitWindow не равен null и что окно не закрыто (metanitWindow.closed не равно false). Вторая проверка необходима на случай, если окно будет закрыто нажатием на крестик в самом окне (в этом случае closed=true). И если окно не открыто, открываем его.

По нажатию на вторую кнопку у объекта metanitWindow вызываем метод close и устанавливаем переменную в null.

Управление позицией и размером окна

Для управления/изменения позиции и размера окна объект window предоставляет ряд методов:

  • moveBy(): перемещает текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет перемещение по горизонтали, второй параметр - перемещение по вертикали в пикселях.

  • moveTo(): перемещает текущее окно браузера по горизонтали и вертикали в указанное положение. Первый параметр определяет положение по горизонтали, второй параметр — положение по вертикали в пикселях.

  • resizeBy(): масштабирует текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет значение масштабирования по горизонтали, второй параметр — значение масштабирования по вертикали.

  • resizeTo(): масштабирует текущее окно браузера по горизонтали и вертикали до заданного размера. Первый параметр определяет ширину, второй параметр — высоту.

  • scroll(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

  • scrollBy(): прокручивает содержимое окна на указанный коэффициент. Первый параметр определяет коэффициент прокрутки по горизонтали, второй параметр определяет коэффициент прокрутки по вертикали.

  • scrollTo(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

Примеры управления позицией и размерами окна:

// сдвигаем окно браузера на 200 пикселей по горизонтали и на 100 пикселей по вертикали
window.moveBy(200, 100);
// Помещаем окно браузера на позицию с координатами (200, 150)
window.moveTo(200, 150);
// Увеличиваем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(200, 100);
// Сжимаем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(-200, -100);
// Прокручиваем контент окна на 100 пикселей по горизонтали и 200 пикселей по вертикали
window.scrollBy(100, 200);
// Прокручиваем содержимое браузера до позиции (100, 200)
window.scrollTo(100, 200);

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

Например, с помощью метода moveTo() переместитм окно на новую позицию:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="moveWindow()">Move</button>
<script>
let testWindow = null;

// открываем окно
function openWindow(){
    testWindow = window.open("test.html", "_blank", "width=600,height=400,left=200,top=200");
}
// сдвигаем окно
function moveWindow(){
    testWindow.moveTo(500,400);
}
</script>
</body>
</html>

В данном случае по нажатию на кнопку Open открываем окно, а по нажатию на кнопку Move перемещаем его на позицию с координатами x=500, y=400 относительно левого верхнего угла экрана.

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм