Об'єкт Window. Створення дочірніх вікон

Динамічне формування документа у нове вікно

Спливаюче вікно («попап» – від англ. Popup window) – один із старих способів показати користувачеві ще один документ. Вони були придумані для відображення нового контенту поверх відкритого головного вікна.

Але з того часу з'явилися інші способи зробити це: JavaScript може завантажити вміст викликом fetch(мережевий запит) і показати його в створеному <div>, так що Popup використовуються не кожен день.

Крім того, Popup не дуже добрі для мобільних пристроїв, які не вміють показувати кілька вікон одночасно.

Але для деяких завдань Popup ще використовуються

Виконується в такій послідовності:

Створити нове вікно;
Відкрити запис у нове вікно;
Створити документ, який виводиться у вікно.
Вивести документ у вікно.
Закрити запис у нове вікно.

Об'єкт window знаходиться у вершині ієрархії об'єктів і містить у собі всі інші об'єкти браузера. Об'єкт window описує поточне вікно браузера та його вміст.

Методи об'єкта Window

метод	опис
open	Відкриває нове вікно
close	Закриває вікно
alert, prompt, confirm	Стандартні діалогові панелі
setInterval	Вказує функції виконуватися періодично через задану кількість мілісекунд.
setTimeout	Запускає функцію через задану кількість мілісекунд.
clearInterval	Скасує дію методу setInterval.
clearTimeout	Скасує дію методу setTimeout.

Відкрити нове вікно та закрити його

змінна = open();

змінна = open(файл);

змінна = open(файл, ім'я_вікна);

змінна = open(файл, ім'я_вікна, параметри_вікна);

змінна.close();

змінна - екземпляр створюваного вікна.
файл - рядок, ім'я файлу, який потрібно відобразити у створеному вікні. Якщо параметр не встановлено, створюється пусте вікно. Тоді формування документа у цьому вікні потрібно здійснювати динамічно за допомогою методу document.write.
ім'я_вікна - рядок, ім'я вікна; використовується для звернення до створеного вікна (значення якості "id" об'єкта window).
параметри_вікна - рядок, властивості вікна; коли параметр не заданий, використовуються властивості вікна за промовчанням. Параметри вікна задаються у рядку параметри_вікна у вигляді:

"параметр1=значення1,параметр2=значення2,...,параметрN=значенняN"

Зауваження

Не рекомендується залишати пробіл після роздільної коми.

Опис деяких параметрів вікна

параметр	значення	опис
width	число	Ширина вікна у пікселах. Мінімальне значення - 100.
height	число	Висота вікна у пікселах. Мінімальне значення - 100.
left	число	Задає горизонтальну координату лівого верхнього кута вікна у пікселах.
top	число	Задає вертикальну координату лівого верхнього кута вікна у пікселах.

Приклад 1

Нагадування:

Є ще один дуже простий та лаконічний синтаксис для створення функцій, який часто краще, ніж функціональні вирази.

Це називається "стрілочні функції", тому що виглядає так: let func = (arg1, arg2, ...argN) => expression

Це створює функцію, func яка приймає аргументи arg1..argN, потім оцінює expression їх використання праворуч і повертає свій результат.

let sum = (a, b) => a + b;

Найбільш коротка форма для: let sum = function(a, b) { return a + b; };

Приклад 2

Напишіть програму, яка за натисканням кнопки створює нове порожнє вікно, в яке виводиться текст.

Приклад 3

Напишіть програму, яка за натисканням кнопки створює нове вікно, в яке виводиться існуючий html-документ і після натискання іншої кнопки, закриває створене вікно.

Методи open( ) та close() об'єкта document

Якщо документ у дочірньому вікні формується динамічно, за допомогою методу document.write(), потрібно обов'язково перед використанням цього методу відкрити запис у нове вікно методом document.open(), а після завершення виведення у нове вікно закрити запис методом document.close(). При виведенні нового вікна обов'язково потрібно вказувати ім'я об'єкта.

Приклад 4

А якщо на сторінці будуть представлені вірші не двох і більше поетів. Як же нам змінити скрипт, щоб він містив всього дві функції, одну для відкриття вікна, а іншу для його закриття. Створимо ще дві сторінки DW3.html (А.С. Пушкін) та DW4.html (Ганна Ахматова). Додамо кнопки для цих сторінок. Внесемо зміни до коду нашого скрипта.

Тепер вікна по черзі відчиняються і відразу зачиняються. Якщо потрібно Відкрити все відразу, а потім позакривати, потрібно внести зміни до оброблювача закриття вікна.

Внесемо ще зміни до коду нашого скрипта, щоб выкно выдчинялося в заданій позиції.

Приклад 5

На сторінці кнопка "Показати", при натисканні на неї з'являється спливаюче вікно з текстом і двома кнопками "автор?" і "Х", при натисканні на кнопку "автор?" на консолі відображається автор рядків, при натисканні на "Х" вікно закривається і на консолі пишеться "Закрито".

Розмітка сторінки:

Таблиця стилів:

Скрипт.Під час написання скрипта використовуємо методи DOM і Callback - функції.

Результат:

Приклад 6(друга реалізація)

Розмітка сторінки:

Таблиця стилів:

Скрипт.

Результат:

Назад Вперед Зміст