Управление окнами
Для взаимодействия с пользователем в объекте 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);