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

Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна.

Метод alert ()

Метод выводит окно с сообщением:

alert("hello world");

Метод confirm ()

Метод отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена. В зависимости от выбора пользователя метод возвращает true (если пользователь нажал OK) или false (если пользователь нажал кнопку Отмены):

var result = confirm("Завершить выполнение программы?");
if(result===true)
document.write("Работа программы завершена");
else
document.write("Программа продолжает работать");

Метод prompt ()

Метод позволяет с помощью диалогового окна запрашивать у пользователя данные, данный метод возвращает введенное пользователем значение. Если пользователь откажется вводить значение и нажмет на кнопку отмены, то метод возвратит значение null:

var age = prompt("Введите свой возраст:");
document.write("Вам " + age + " лет");

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

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

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

В коде 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://hmarketing.ru", "_self");

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

popup указывает, будет ли открываться страница в отдельном всплывающем окне. Для этого может принимать такие значения, как yes, 1 или true
width / innerWidth ширина окна в пикселях
height / innerHeight высота окна в пикселях
left / screenX координата X относительно начала экрана в пикселях
top / screenY координата Y относительно начала экрана в пикселях

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

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

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

Метод close ()

С помощью метода можно закрыть окно. Например, откроем новое окно и через 5 секунд закроем его:

function openWindow(){
const popup = window.open("https://metanit.com", "_blank", "width=600,height=400");
setTimeout(()=>popup.close(), 5000);
}

Метод moveTo ()

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

const popup = window.open("https://metanit.com", "_blank", "width=600,height=400");
popup.moveTo(500,400);