Объект Window содержит также методы, прокручивающие документ внутри окна или фрейма. Метод scrollBy() прокручивает документ на указанное количество пикселов влево или вправо, вверх или вниз, а метод scrollTo() – на абсолютную позицию. Он перемещает документ таким образом, что точка документа с ука_
300 Глава 14. Работа с окнами броузера
занными координатами отображается в левом верхнем углу области документа в окне.
В современных броузерах HTML_элементы документа (см. главу 15) имеют такие свойства, как offsetLeft и offsetTop, которые содержат координаты X и Y элемен_ та (в разделе 16.2.3 описываются методы, которые могут использоваться для оп_ ределения координат любого элемента). После того как координаты элемента оп_ ределены, с помощью метода scrollTo()можно прокрутить содержимое окна так, что любой конкретный элемент переместится в левый верхний угол окна.
Другой способ прокрутки заключается в обращении к методу focus() элемента документа (например, поля ввода или кнопки), в результате элементу передает_ ся фокус ввода. Как побочный эффект операции передачи фокуса ввода доку_ мент прокручивается так, чтобы элемент с фокусом ввода стал видимым. Обра_ тите внимание: это не означает, что элемент обязательно переместится в левый верхний угол окна, метод лишь гарантирует, что элемент станет видимым.
Большинством современных броузеров поддерживается еще один удобный ме_ тод прокрутки: вызов метода scrollIntoView() для любого HTML_элемента делает этот элемент видимым. Данный метод пытается расположить указанный эле_ мент как можно ближе к верхней границе окна, но это, конечно же, не относится к элементам, расположенным достаточно близко к концу документа. Метод scrollIntoView() реализован не так широко, как метод focus(), зато работает со всеми HTML_элементами, а не только с теми, которые способны принимать фо_ кус ввода. Подробнее об этом методе можно прочитать в четвертой части книги.
Последний способ прокрутки окна из сценариев заключается в определении якорных элементов в виде тегов <a name=> в тех позициях, к которым может по_ требоваться прокрутить документ. После этого можно использовать имена якор_ ных элементов для записи в свойство hash объекта Location. Например, если в до_ кументе имеется якорный элемент с именем «top» в начале документа, тогда вернуться к началу документа можно будет следующим образом:
window.location.hash = "#top";
Прием с использованием именованных якорных элементов расширяет возмож_ ности навигации в пределах документа. Кроме того, он делает позицию в доку_ менте видимой в адресной строке броузера, позволяет устанавливать закладки и возвращаться к предыдущей позиции с помощью кнопки Назад, что может быть весьма привлекательным.
В то же время загромождение списка истории просмотра именованными якоря_ ми, сгенерированными сценариями, в некоторых ситуациях можно рассматри_ вать как досадную помеху. Чтобы прокрутить документ к именованному якор_ ному элементу (в большинстве броузеров) без создания новой записи в списке ис_ тории, следует использовать метод Location.replace():
window.location.replace("#top");
Пример использования методов объекта Window
Пример 14.4 демонстрирует порядок использования методов open(), close() и moveTo() объекта Window, а также некоторые другие обсуждавшиеся нами прие_ мы работы с окнами. В примере создается новое окно и затем с помощью метода
14.4. Методы управления окнами
setInterval() задаются интервалы повторяющихся вызовов функции, перемеща_ ющей это окно по экрану. Размер экрана определяется с помощью объекта Screen и потом на основе этих данных осуществляется отскок окна при достижении им любого края экрана.
Пример 14.4. Создание и перемещение окна
<script>
var bounce = {
x:0, y:0, w:200, h:200, // Положение окна и его
размеры
dx:5, dy:5,
// Скорость перемещения
interval: 100,
// Частота обновления в
миллисекундах
win: null,
// Создаваемое окно
timer: null,
// Возвращаемое значение метода setInterval()
// Запуск анимации start: function() {
// Вначале окно располагается в центре экрана bounce.x = (screen.width _ bounce.w)/2; bounce.y = (screen.height _ bounce.h)/2;
// Создать окно, которое будет перемещаться по экрану
// URL javascript: _ простейший способ вывести короткий документ
