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

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

Диалоговые окна

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

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

alert("hello world");

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

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

И метод prompt() позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные. Данный метод возвращает введенное пользователем значение:

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

Если пользователь откажется вводить значение и нажмет на кнопку отмены, то метод возвратит значение null.

Функция prompt в JavaScript

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

Объект window также предоставляет ряд методов для управления окнами браузера. Так, метод open() открывает определенный ресурс в новом окне браузера:

var popup = window.open('https://microsoft.com', 'Microsoft', 'width=400, height=400, resizable=yes');

Метод open() принимает ряд параметров: путь к ресурсу, описательное название для окна и в качестве третьего параметра набор стилевых значений окна. Метод возвращает ссылку на объект нового окна.

Мы можем установить следующие стилевые характеристики:

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

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

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

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

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

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

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

  • location: будет ли окно иметь адресную строку. Например, location=no

  • scrollbars: допускается ли наличие полос прокрутки. Например, scrollbars=yes

  • status: наличие статусной строки. Например, status=yes

  • resizable: может ли окно изменять размеры. Например, resizable=no

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

var popup = window.open('https://microsoft.com', 'Microsoft', 'width=400, height=400, resizable=yes');
function closeWindow(){
	popup.close();
}
setTimeout(closeWindow, 10000);

Метод moveTo() позволяет переместить окно на новую позицию:

var popup = window.open('https://microsoft.com', 'Microsoft', 'width=400, height=400, resizable=yes');
popup.moveTo(50,50);

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

Метод resizeTo() позволяет изменить размеры окна:

var popup = window.open('https://microsoft.com', 'Microsoft', 'width=400, height=400, resizable=yes');
popup.resizeTo(500,350); // 500 - ширина и 350 - высота
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850