2015-04-30
1007
Объект window расположен на самом верхнем уровне иерархии объектов, структура которых изображена ни рис. 3.6. Подчиненными объектами (или объектами нижнего уровня) являются объекты history, location, frame, document. Свойства объекта history представляют адреса ранее загруженных HTML-страниц. Свойства объекта location связаны с URL-адресом отображаемого документа. Свойства объекта frame связаны со специальным способом представления данных.
Рис. 3.6. Иерархическая структура объектов
Объект history содержит сведения о страницах, которые отображались или отображаются в браузере. Свойство history.length содержит длину списка адресов посещаемых страниц. URL- адрес страницы, открытой в окне, можно узнать, воспользовавшись свойством history.current. Адрес страницы, к которой перейдет пользователь по кнопке Вперед (Forward) сохраняется в свойстве history.next. Воспользоваться этим свойством имеет смысл только тогда, когда хотя бы один раз осуществлялся переход к предыдущей загруженной странице по кнопке Назад (Back). Адрес страницы, к которой перейдет пользователь, если щелкнет по кнопке Назад (Back) сохраняется в свойстве history.previos.
|
|
|
К элементам объекта history можно обращаться по индексу. В этом случае объект history рассматривается как массив, каждый элемент которого содержит адрес посещаемой страницы, текущая страница представлена элементом history[0], предыдущая history[-1], следующая history[1]. Объект history имеет три метода. Можно открыть страницу, адрес которой хранится в списке посещаемых страниц, например, так history.go(-1) или history.go(2). Использование метода history.back приведет к загрузке предыдущей страницы, метод history.forward обеспечивает переход к следующей странице.
Навигация по документам на основе свойств объекта history
Рассмотрим следующий способ связи элементов друг с другом. Первый документ имеет ссылку на второй, второй - на третий, третий - на четвертый, и, наконец, четвертый документ имеет ссылку на первый. В каждом из документов следует предусмотреть возврат к предыдущему документу. Кроме того, имеется пятый (общий) документ, к которому должен быть предусмотрен переход из любого из четырех документов, а возврат из пятого документа должен быть к тому документу, который пятый вызвал. Схема описанной навигации представлена на рис. 3.7.
Рис. 3.7. Навигация по документам на основе свойств объекта history
В первом документе есть следующие две ссылки: второй документ и на общий. Кроме того должна быть ссылка на документ для обеспечения связи с документом, вызвавшим данный. HTML- код первого документа хранится в листинге 3.5,а.
| Листинг 3.5,a. Первый документ из схемы навигации |
<html>
<head>
<title>Первый документ</title>
</head>
<body>
<h3>Первый документ</h3>
<a href=2.htm>ссылка на 2</a><br>
<a href=all.htm>ссылка на общий</a><br>
<a href="javascript:history.go(-1)">возврат к вызвавшему</a><br>
</body>
</html>
|
|
|
До рассмотренного примера всегда указывался конкретный URL-адрес страницы, к которой осуществлялся переход по ссылке. В данном случае переход
<a href="javascript:history.go(-1)"> возврат к вызвавшему </a>
переход будет осуществлен к той странице, которая находится в списке адресов перед текущей, в нашей схеме навигации, это страница, вызвавшая данную. HTML- код второй и третьей страницы приводить не будем, он мало отличается от первой. В четвертом документе с помощью элементов формы выводятся свойства объекта history. HTML- код документа приведен в листинге 3.5,б.
| Листинг 3.5,б. Четвертый документ из схемы навигации |
<HTML>
<HEAD>
<TITLE>Свойства объекта window.history</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function winh(obj)
{ obj.t0.value= window.history.length
obj.t1.value= window.history.current
obj.t2.value= window.history.next
obj.t3.value= window.history.previous
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h3>Четвертый документ</h3>
<a href=1.htm>ссылка на 1</a><br>
<a href=all.htm>ссылка на общий</a><br>
<a href="javascript:history.go(-1)">возврат к вызвавшему</a><br>
<h4>Свойства объекта window.history</h4>
<form name="form1">
<input type=button value="Определить" onClick="winh(form1)">
<input type=reset value="Очистить">
<pre>
<input type=text name=t0> length (длина списка адресов)
<input type=text name=t1> current(адрес текущей страницы)
<input type=text name=t2> next(адрес следующей страницы)
<input type=text name=t3> previous(адрес предыдущей страницы)
</pre></form></BODY></HTML>
Общий документ может использоваться в случае, когда при выполнении задания требуется перейти к справке, текст справки можно хранить в общем документе. Ознакомившись со справкой, требуется вернуться к рассматриваемому документу. HTML- код общего документа представлен в листинге 3.5,в.
| Листинг 3.5,в. Общий документ, к которому обращаются остальные |
<HTML>
<HEAD>
<TITLE>общий документ</TITLE>
</HEAD>
<BODY>
<h3>Общий документ</h3>
<A HREF="javascript:history.go(-1);">
к документу, вызвавшему данный</A>
</script></BODY></HTML>
Объект location
Объект location содержит сведения о документе, который открыт в окне. Свойство href содержит полный URL адрес загруженной страницы. Загрузить в текущее окно новый документ можно, если изменить свойство window.location.href. Объект location имеет два метода. Метод location.reload, перезагружает текущий документ, его действия аналогичны действиям по кнопке Обновить (Reload). Метод location.replace замещает текущую страницу той, адрес которой указан в качестве параметра. Этот метод не изменяет историю браузера.
Получение сведений о браузере
Данные об обозревателе можно получить с помощью свойств объекта navigator. Объект navigator не принадлежит к иерархической структуре объектов браузера. Свойства объекта navigator позволяют определить тип браузера, платформу, на которой он работает, используемый язык и другие свойства. Некоторые сведения о браузере можно получить, если воспользоваться сценарием, описанным в листинге 3.6.
| Листинг 3.6. Получение сведений о браузере |
<HTML>
<HEAD>
<TITLE>Получение сведений о браузерет</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function propnav(obj)
{ obj.t0.value= navigator.appCodeName
obj.t1.value= navigator.appName
obj.t2.value= navigator.appVersion
obj.t3.value= navigator.userAgent
obj.t4.value= navigator.language
obj.t5.value= navigator.platform
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>Вывод на экран сведений о браузере</h4>
<form name="form2">
<input type=button value="Посмотреть" onClick="propnav(form2)">
<br><br>
<input type=text name=t0 size=45> Кодовое название<br>
<input type=text name=t1 size=45> Имя программы<br>
<input type=text name=t2 size=45> Версия программы<br>
<input type=text name=t3 size=45> Агент пользователя<br>
<input type=text name=t4 size=45> Язык<br>
<input type=text name=t5 size=45> Платформа<br>
</form></BODY></HTML>
|
|
|
На рис. 3.8 представлен результат выполнения сценария, в поля формы записаны значения, характеризующие браузер.
Рис. 3.8. Получение сведений о браузере
Свойства объекта document
Свойства объекта document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т.д. Объект document в зависимости от своего содержимого может иметь объекты, являющиеся для него подчиненными или дочерними. В частности подчиненным объектом для объекта документ являются объекты form, image, link, area и др. Для каждой страницы создается один объект document, некоторые его свойства соответствуют параметрам тега: bgColor, fgColor, linkColor, alinkColor, vlinkColor.
Методы write и writeln записывают в документ текст, задаваемый параметром. HTML- код документа хранится в листинге 3.7.
| Листинг 3.7. Некоторые свойства документа |
<HTML>
<head>
<title>Информация о загруженном документе</title>
</head>
<body>
<h4>Последнее обновление страницы, URL-адрес, название документа</h4>
<script>
document.writeln ("<B>Последнее обновление страницы: </B>"+ document.lastModified+"<br>")
document.writeln ("<B>URL-адрес: </B>"+document.URL+"<br>")
document.writeln ("<B>Название документа: </B>"+document.title+"<br>")
document.writeln ("<B>Цвет фона документа: </B>"+document.bgColor+"<br>")
document.writeln ("<B>Цвет текста документа: </B>"+document.fgColor+"<br>")
document.writeln ("<B>Цвет гиперссылки после нажатия кнопки мыши: </B>"+document.alinkColor+"<br>")
document.writeln ("<B>Цвет гиперссылки: </B>"+document.linkColor+"<br>")
document.writeln ("<B>Цвет просмотренной гиперссылки: </B>"+document.vlinkColor+"<br>")
</script></body></HTML>
Если на странице расположена форма, то все ее элементы являются подчиненными объектами этой формы. Тегу <form> соответствует объект form, являющийся подчиненным объекту document. Доступ к форме можно осуществить с помощью значения, заданного в параметре name тега <form>. Объект form имеет свойство forms, в котором содержаться ссылки на все формы документа. Ссылки перенумерованы с нуля. Доступ к первой форме документа можно получить так: document.forms[0], ко второй- document.forms[1] и т.д. Вместо индекса в свойстве-массиве forms можно указывать строку, значение которой имя переменной для формы. Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы.
|
|
|
Свойство elements формы хранит информацию обо всех элементах формы в том порядке, в каком они встречаются в HTML-документе. Получить доступ к полям формы можно, воспользовавшись свойствами, следующим образом:
document.forms[0].elements[0]
document.forms[0].elements[1]
