Створення вікон
Відкриття нових вікон у проглядачі — чудова можливість мови JavaScript. Можна або завантажувати у нові вікна нові документи, або (динамічно) створювати нові матеріали. Подивимося, як можна відкрити нове вікно. Потім — як завантажити в це вікно HTML-сторінку. І нарешті — як його закрити.
Поданий далі скрипт відкриває нове вікно проглядача і завантажує у нього певну web-сторінку:
<html><head>
<script language="JavaScript"> <!-- hide
function openWin() { myWin= open("something.htm");
}
// --> </script>
</head>
<body>
<form><input type="button" value="Перевірте приклад" onClick="openWin()">
</form>
</body></html>
У поданому прикладі у нове вікно за допомогою методу open() записано сторінку something.htm.
Зауважимо: існує можливість керувати процесом створення вікна. Наприклад, можна вказати, чи нове вікно буде мати рядок стану, панель інструментів або меню. Можна задати размір вікна. Наприклад, у наступному скрипті відкривають нове вікно разміром 400×300 екранних точок без рядка стану, без панелі інструментів, без меню.
<html><head>
<script language="JavaScript"> <!-- hide
function openWin2()
{
myWin= open("something.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
// -->
</script></head>
<body>
<form><input type="button" value="Перевірте openWin2" onClick="openWin2()"></form>
</body></html>
Очевидно, що властивості вікна задано таким рядком:
"width=400,height=300,status=no,toolbar=no,menubar=no".
Зауважте: у цьому рядку не має бути пропусків.
Перелік властивостей вікна, якими можна керувати, такий:
directories yes / no
height кількість пікселів
location yes / no
menubar yes / no
resizable yes / no
scrollbars yes / no
status yes / no
toolbar yes / no
width кількість пікселів
Свого часу у версії 1.2 мови JavaScript було долучено деякі нові властивості:
alwaysLowered yes / no
alwaysRaised yes / no
dependent yes / no
hotkeys yes / no
innerWidth кількість пікселів (замінює width)
innerHeight кількість пікселів (замінює height)
outerWidth кількість пікселів
outerHeight кількість пікселів
screenX кількість пікселів
screenY кількість пікселів
titlebar yes / no
z-lock yes / no
Назва вікна
При відкритті вікна використовують 3 аргументи:
myWin= open("something.htm", "displayWindow","width=400,height=300,status=no,toolbar=no,menubar=no");
Що таке другий аргумент? Це назва вікна. Раніше ми бачили, як його використали у параметрі target. Наприклад, знаючи назву вікна, можна завантажити туди нову сторінку з допомогою запису:
<a href="something.html" target="displayWindow">
При цьому Вам потрібно вказати назву відповідного вікна (якщо такого вікна немає, то буде створено нове).
Зауважте: myWin — це не назва вікна. Але лише за допомогою цієї змінної можна отримати доступ до вікна. Це звичайна змінна, тому область її дії — лише той скрипт, у якому вона визначена. А от назвою вікна (у даному випадку це displayWindow) — унікальним ідентификатором можна користуватися з довільного вікна проглядача.
Закриття вікон
Закривати вікна засобами мови JavaScript можна, використовуючи метод close(). Давайте, як було показано раніше, відкриємо нове вікно і завантажимо туда сторінку:
<html><script language="JavaScript"><!-- hide
function closeIt() { close();
}
// -->
</script><center>
<form><input type=button value="Закрийте вікно" onClick="closeIt()"></form>
</center></html>
Якщо у новоствореному вікні натиснути кнопку, то його буде закрито.
open() і close() — це методи об'єкту window. У загальному випадку потрібно писати не open() чи close(), а window.open() и window.close(). Але у даному випадку назву window можна опустити. Немає потреби писати префікс window, якщо викликають один з методів цього об'єкту.
Динамічне створення документів
Розглянемо чудову можливість JavaScript динамічно створювати документи. Спочатку створимо HTML-документ, який покажемо у новому вікні:
<html><head><script language="JavaScript"> <!-- hide
function openWin3()
{
myWin= open("", "displayWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
// відкриємо об'єкт document для наступного друку в ньому
myWin.document.open();
// створимо новий документ
myWin.document.write("<html><head><title>Вйо!");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write("Цей HTML-документ створено ");
myWin.document.write("з допомогою JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
// закриємо вікно (не вікно!)
myWin.document.close();
}// -->
</script></head><body>
<form><input type=button value="Вйо!" onClick="openWin3()">
</form></body></html>
Тут перший аргумент функції open() — порожній рядок (""). Інакше кажучи , не вказано конкретну адресу URL. Бо переглядач має не лише опрацювати наявний документ, але й створювати новий.
Ми означуємо нову змінну myWin. Саме з її допомогою можна отримати доступ до нового вікна. Зверніть увагу: у цьому випадку неможна скористатися для цього назвою вікна displayWindow.
Після відкриття вікна настає черга відкрити об'єкт document для запису. Це зроблено вказівкою:
// відкриємо об'єкт document для наступного друку в ньому
myWin.document.open();
Тут ми звертаємося до open() — методу об'єкту document. Але яка відмінність від методу open() об'єкту window ! Ця вказівка не вікриває нове вікно, а лише готує document до наступного друку. Зауважте: потрібно перед document.open() записати префікс myWin для отримання доступу до запису у новому вікні.
Формуємо текст нового документу у наступних рядках:
// створимо новий документ
myWin.document.write("<html><head><title>On-the-fly");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write("Цей HTML-документ створено ");
myWin.document.write("з допомогою JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
Крім фрази: "Цей HTML-документ створено з допомогою JavaScript!" у документ записано теги мови HTML. Таким чином можна породити розмітку HTML, використовуючи довільні теги HTML.
Далі документ закрито вказівкою:
// закриємо вікно (не вікно!)
myWin.document.close();
Можна не лише динамічно створити документ, але й розташувати його у наявному фреймі. Наприклад, при наявності двох фреймів з назвами frame1 i frame2 потрібно у frame2 створити новий документ. Для цього достатньо у frame1 написати таке:
parent.frame2.document.open();
parent.frame2.document.write("Привіт з frame1");
parent.frame2.document.close();