|
|
Окна и динамически создаваемые документы в JavaScript
Открытие новых окон в браузере - замечательная возможность языка JavaScript. Вы можете либо загружать в новое окно новые документы (например, те же документы HTML ), либо (динамически) создавать новые материалы.
Пример. Приводимый далее скрипт открывает новое окно браузера и загружает в него с помощью метода open() web -страничку bla.htm :
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin() {
myWin= open("bla.htm");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value=" Открыть новое окно " onClick="openWin()">
</form>
</body>
</html>
При этом Вы имеете возможность управлять самим процессом создания окна - Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню, задать его размер. Например, в следующем скрипте открывается новое окно размером 400 x 300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню. Свойства окна мы формулируем в строке "width=400,height=300,status=no,toolbar=no,menubar=no". Обратите внимание на то, что Вам нельзя помещать в этой строке символы пробела!
<html>
<head>
<script language="JavaScript">
<!-- hide
function openWin2() {
myWin= open("bla.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value=" Открыть новое окно " onClick="openWin2()">
</form>
</body>
</html>
Язык JavaScript дает возможность не только открывать окна, но и закрывать их. Для этого существует метод close() . Давайте, как было показано ранее, откроем новое окно. И загрузим туда очередную страницу:
<html>
<script language="JavaScript">
<!-- hide
function closeIt() {
close();
}
// -->
</script>
<center>
<form>
<input type=button value="Close it" onClick="closeIt()">
</form>
</center>
</html>
Если теперь в новом окне Вы нажмете кнопку, то оно будет закрыто. open() и close() - это методы объекта window . Мы должны помнить, что следует писать не просто open() и close() , а window.open() и window.close() . Однако в нашем случае объект window можно опустить - Вам нет необходимости писать префикс window , если Вы хотите всего лишь вызвать один из методов этого объекта (и такое возможно только для этого объекта).
Наконец, Вы можете разрешить Вашему скрипту на языке JavaScript самому создавать новые динамические HTML-страницы. Более того, Вы можете таким же образом создавать и другие документы Web, такие как VRML -сцены и т.д. Для удобства Вы можете размещать эти документы в отдельном окне или фрейме.
Для примера создадим простой 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>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>");
// закрыть документ - ( но не окно !)
myWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type=button value="On-the-fly" onClick="openWin3()">
</form>
</body>
</html>
Давайте рассмотрим функцию winOpen 3 () . Мы сначала открываем новое окно браузера. Поскольку первый аргумент функции open( ) - пустая строка ( "" ), то это значит, что мы не желаем в данном случае указывать конкретный адрес URL. В скрипте мы определяем переменную myWin и получаем с ее помощью доступ к новому окну. После того, как мы открыли окно, наступает очередь открыть для записи объект document . Делается это с помощью команды:
// открыть объект document для последующей печати
myWin.document.open();
Здесь мы обращаемся к open() - методу объекта document . Однако это совсем не то же самое, что метод open() объекта window ! Эта команда лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document . open () приставку myWin , чтобы получить возможность писать в новом окне.
В последующих строках скрипта с помощью вызова document . write () формируется текст нового документа:
// генерировать новый документ
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("This HTML-document has been created ");
myWin.document.write("with the help of JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
Здесь мы записываем в документ обычные тэги языка HTML - генерируем разметку HTML ! При этом Вы можете использовать абсолютно любые тэги HTML .
По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:
// закрыть документ - ( но не окно !)
myWin.document.close();
Комментариев: нету
