4. Вікна й динамічне керування документами

Створення вікон
      Відкриття нових вікон у проглядачі — чудова можливість мови 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".
Зауважте: у цьому рядку не має бути пропусків.
      Перелік властивостей вікна, якими можна керувати, такий:

directoriesyes / no
height кількість пікселів
location yes / no
menubar yes / no
resizable yes / no
scrollbars yes / no
status yes / no
toolbar yes / no
width кількість пікселів

      Свого часу у версії 1.2 мови JavaScript було долучено деякі нові властивості:

alwaysLoweredyes / 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();
[попереднє] [зміст] [наступне]