Лекция: Динамическое создание документов
Теперь рассмотрим, как с помощью JavaScript можно динамически создавать новые документы. То есть новая HTML-страницf будет формироваться в зависимости от различных ситуаций по заданным вами параметрам. Например, бывает необходимо оптимизировать страницу для различного разрешения экрана. Или вам захотелось, чтобы вид документа менялся в зависимости от определенной даты. Но для начала создадим простой HTML-документ, который будет выводиться в новом окне. Рассмотрим следующий скрипт:
<html>
<head>
<script language=«JavaScript»>
<!--
function NewWin()
{
// создать новое окно
NewDoc=window.open("", «NewWindow»,
«width=500,height=200,status=yes,toolbar=yes,menubar=yes»);
// открыть объект document для последующей печати
NewDoc.document.open();
// генерировать новый документ
NewDoc.document.write("<html>");
NewDoc.document.write("<head>");
NewDoc.document.write("<title>Пример динамического ");
NewDoc.document.write(«создания документов</title>»);
NewDoc.document.write("</head>");
NewDoc.document.write("<body>");
NewDoc.document.write("<center>");
NewDoc.document.write("<font size=+3>");
NewDoc.document.write(«Этот HTML-документ создан „);
NewDoc.document.write(“с помощью JavaScript!»);
NewDoc.document.write("</font>");
NewDoc.document.write("</center>");
NewDoc.document.write("</body>");
NewDoc.document.write("</html>");
// закрыть документ — (но не окно!)
NewDoc.document.close();
}
// -->
</script>
</head>
<body>
<center>
<input type=button value=«Новый документ» onClick=«NewWin()»>
</center
</body>
</html>
Пример выполнения данного скрипта представлен на рисунке 11.
Рисунок 11 – Динамическое создание документа
В данном примере формирование нового документа выполняется функцией NewWin(). Рассмотрим ее действие. Сначала с помощью метода open() открывается новое окно браузера. Первый параметр метода является пустой строкой (""), так как мы не желаем в данном случае указывать конкретный адрес URL. После того, как мы открыли окно, наступает очередь открыть для записи объекта document. Делается это с помощью команды:
// открыть объект document для последующей печати
NewDoc.document.open();
Здесь мы обращаемся к open() – методу объекта document. Однако это совсем не то же самое, что метод open() объекта window. Эта команда не открывает нового окна – она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку NewDoc, чтобы получить возможность писать в новом окне. В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:
// генерировать новый документ
NewDoc.document.write("<html>");
NewDoc.document.write("<head>");
NewDoc.document.write("<title>Пример динамического ");
NewDoc.document.write(«создания документов</title>»);
NewDoc.document.write("</head>");
NewDoc.document.write("<body>");
NewDoc.document.write("<center>");
NewDoc.document.write("<font size=+3>");
NewDoc.document.write(«Этот HTML-документ создан „);
NewDoc.document.write(“с помощью JavaScript!»);
NewDoc.document.write("</font>");
NewDoc.document.write("</center>");
NewDoc.document.write("</body>");
NewDoc.document.write("</html>");
Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. При этом Вы можете использовать абсолютно любые тэги HTML. По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:
// закрыть документ – (но не окно!)
NewDoc.document.close();
Теперь нам только остается в нужном месте вызвать функцию командой
<input type=button value=«Новый документ» onClick=«NewDoc()»>
или, например, указав ссылку:
<a href='javascript:NewDoc()'>Новый документ</a>