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

⇐ ПредыдущаяСтр 4 из 8Следующая ⇒

Створення вікон
Відкриття нових вікон у проглядачі — чудова можливість мови JavaScript. Можна або завантажувати у нові вікна нові документи, або (динамічно) створювати нові матеріали. Подивимося, як можна відкрити нове вікно. Потім — як завантажити в це вікно HTML-сторінку. І нарешті — як його закрити.
Поданий далі скрипт відкриває нове вікно проглядача і завантажує у нього певну web-сторінку:

<html><head><script language="JavaScript">  </script></head> <body><form><input type="button" value="Перевірте приклад" onClick="openWin()"></form></body></html>

У поданому прикладі у нове вікно за допомогою методу open() записано сторінку something.htm.
Зауважимо: існує можливість керувати процесом створення вікна. Наприклад, можна вказати, чи нове вікно буде мати рядок стану, панель інструментів або меню. Можна задати размір вікна. Наприклад, у наступному скрипті відкривають нове вікно разміром 400×300 екранних точок без рядка стану, без панелі інструментів, без меню.

<html><head><script language="JavaScript"> </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. Наприклад, знаючи назвву вікна, можна завантажити туди нову сторінку з допомогою запису:

При цьому Вам потрібно вказати назву відповідного вікна (якщо такого вікна немає, то буде створено нове).
Зауважте: myWin — це не назва вікна. Але лише за допомогою цієї змінної можна отримати доступ до вікна. Це звичайна змінна, тому область її дії — лише той скрипт, у якому вона визначена. А от назвою вікна (у даному випадку це displayWindow) — унікальним ідентификатором можна користуватися з довільного вікна проглядача.

Закриття вікон
Закривати вікна засобами мови JavaScript можна, використовуючи метод close(). Давайте, як було показано раніше, відкриємо нове вікно і завантажимо туда сторінку:

<html><script language="JavaScript"></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"> </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();

⇐ Предыдущая 1 2 345 6 7 8 Следующая ⇒

Date: 2015-07-24; view: 258; Нарушение авторских прав; Помощь в написании работы --> СЮДА...

mydocx.ru - 2015-2024 year. (0.007 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию