Объекты history, location и screen

Объект history представляет интерфейс к списку истории Web-браузера, т. е. списку всех Web-страниц, просмотренных пользователем в те­чение времени, указанного в настройках.

Этот объект поддерживает общее для всех Web-браузеров свойство length, возвращающее размер списка посещений Web-страниц данным Web-браузером.

Для объекта history определены три метода, общие для всех Web-браузеров:

· back() – загружает в окно Web-браузера предыдущий документ из списка посещений;

· forward() – загружает в окно Web-браузера следующий документ из списка посещений;

· go(позиция) – загружает в окно Web-браузера документ из списка посещений с заданным целым числом – позицией по отношению к выводимому в окне текущему документу (если позиция задана со знаком минус, выводится документ, находящийся левее от текущего на заданную позицию; если позиция со знаком плюс или без знака, выводится документ, находящийся правее от текущего на заданную позицию).

Вызов методов back()и forward() эквивалентен нажатию кнопок Назад и Вперед на панели инструментов Web-браузера.

Пример 4.5.50. Использование методов объекта history:

Сформируем следующие три страницы со следующими значениями тела документа:

Страница 1:

<h1>Страница 1</h1>

<p><a href="page2.html">Страница 2</a></p>

<p><button onclick="history.forward()">

Следующая страница списка</button></p>

Страница 2:

<h1>Страница 2</h1>

<p><a href="page3.html">Страница 3</a></p>

<p><button onclick="history.forward()">

Следующая страница списка</button></p>

<p><button onclick="history.back()">

Предыдущая страница списка</button></p>

Страница 3:

<h1>Страница 3</h1>

<p><button onclick="history.back()">

Предыдущая страница списка</button></p>

<p><button onclick="history.go(-2)">

Начало списка</button></p>

После вывода первой Web-страницы с помощью гиперссылок выведем вторую и третью страницы:

В результате этих выводов будет сформирован список посещений из трех страниц. После нажатия кнопки Начало списка на третьей странице будет выведена первая страница. Если затем на первой странице нажать кнопку Следующая страница списка, то будет выведена вторая страница. При нажатии кнопки Предыдущая страница списка на второй странице будет выведена первая страница.

Объект location содержит информацию о местонахождении текущего документа, т. е. его URL. Этот объект можно использовать для перехо­да на другой документ и перезагрузки текущего документа.

Объект location имеет следующие свойства (компоненты URL) только для чтения, поддерживаемые всеми Web-браузерами:

· protocol – содержит идентификатор протокола передачи;

· hostname – содержит имя сервера;

· port – содержит номер порта, если он задан, иначе – пустая строка;

· host – содержит имя сервера и номер порта;

· pathname – содержит полный путь к файлу, если он задан, иначе – пустая строка;

· hash – содержит именованную ссылку в документе HTML после символа "#", если она есть, иначе – пустая строка;

· search – содержит строку параметров после символа "?", если она есть, иначе – пустая строка.

Свойство href содержит все компоненты URL. Это свойство доступно как для чтения, так и для изменения.

Рис. 4.5.4. Компоненты URL – свойства объекта location

Для объекта location определены следующие методы:

· assign(URL) – загружает Web-страницу с заданным URL с Web-сервера (отсутствует в Opera);

· replace(URL) – загружает Web-страницу с заданным URL с Web-сервера и заменяет в списке посещений Web-браузера адрес предыдущего документа HTML адресом нового документа (отсутствует в Opera);

· reload() – перезагружает документ HTML с Web-сервера.

Вызов метода reload() эквивалентен нажатию кнопки Обновить на панели инструментов Web-браузера.

Пример 4.5.51. Использование свойств объекта location:

1. Передача параметров следующей загружаемой Web-страницы:

Для передачи параметра цвета текста в документе HTML, загружаемым первым, задается следующая функция:

function setColor(URL)

{

// Получение выделенного цвета текста

selectedColor =

document.getElementById("colorMenuChoice").value;

// Переход к следующей Web-странице

location.href = URL + "?" + selectedColor;

}

Тело этого документа HTML имеет следующий вид:

<h1>Выбор цвета текста</h1>

<p>Выберите цвет текста:</p>

<form>

<select id="colorMenuChoice">

<option value="black">Черный</option>

<option value="red">Красный</option>

<option value="green">Зеленый</option>

<option value="blue">Синий</option>

</select>

</form>

<p><button onclick="setColor('nextPage.html')">

Следующая страница</button></p>

Тело документа HTML для следующей Web-страницы записывается следующим образом:

<script type="text/javascript">

// Установка цвета текста

document.getElementsByTagName("body")[0].style.color =

location.search.substr(1);

</script>

<h1>Следующая страница</h1>

<p>Выводится с цветом текста,

заданным в предыдущей странице</p>

В первой Web-странице выбирается красный цвет текста. После нажатия кнопки в загружается следующая Web-страница, в которой установлен красный цвет текста:

2. Проверка заданных в форме значений перед отправкой формы на Web-сервер:

Для предварительной проверки посылаемых на сервер данных формы (имени и пароля пользователя) зададим следующую функцию:

function submitForm()

{

// Получение имени пользователя

userName = document.getElementById("userName").value;

// Получение пароля пользователя

userPass = document.getElementById("userPass").value;

// Если не задано имя или пароль пользователя

if(userName == "" || userPass == "")

{

// Вывод сообщения об ошибке

alert("Не задано имя и/или пароль пользователя");

// Выход из функции

return;

}

// Переход к обработке формы на Web-сервере

location.href =

"https://someCompany.com/access.php?userPass=" +

userName + "&userPass=" + userPass;

}

Тело документа HTML для ввода имени и пароля пользователя имеет следующий вид:

<h2>Введите свое имя и пароль:</h2>

<form>

<p><input type="text" id="userName"

name="userName" value=""/></p>

<p><input type="password" id="userPass"

name="userPass" value=""/></p>

<p><input type="button" value="Вход в систему"

onclick="submitForm()"/></p>

</form>

Если не введено имя или пароль, то при нажатии кнопки Вход в систему в Web-странице будет выведено сообщение:

Если и имя и пароль введены:

то при нажатии кнопки Вход в систему на Web-сервер будет послан следующий запрос:

Объект screen служит для доступа к характеристикам видеосистемы компьютера, на котором находится Web-браузер. Этот объект содержит следующие основные свойства, доступные только для чтения во всех Web-браузерах:

· availWidth – содержит ширину области экрана (в пикселях) без панели за­дач и элементов графического интерфейса сис­темы;

· availHeight – содержит высоту области экрана (в пикселях) без панели за­дач и элементов графического интерфейса сис­темы;

· width – содержит полную ширину экрана (в пикселях);

· height – содержит полную высоту экрана (в пикселях);

· colorDepth – содержит глубину цвета; для 16 цветов возвращается 2, для 256 – 8, для 16,7 миллионов цветов (режим High Color) – 32.

Мето­дов объект screen не имеет.

Пример 4.5.52. Использование свойств объекта screen:

Следующий фрагмент сценария:

alert("Ширина экрана=" + screen.width +

"\nВысота экрана=" + screen.height +

"\nДоступная ширина экрана=" + screen.availWidth +

"\nДоступная высота экрана=" + screen.availHeight +

"\nГлубина цвета=" + screen.colorDepth);

выводит на экран характеристики экрана дисплея: