Язык 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".
Метод 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");
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 относительно левого верхнего угла экрана.