Объект screen. Получение информации

Опубликовал: admin Wednesday, April 11, 2024 в категории HTML | Пока нет комментариев

о мониторе пользователя

Объект screen содержит информацию о характеристиках видеосистемы ком-

пьютера клиента.

Свойства объекта screen:

? width — полная ширина экрана в пикселах;

? height — полная высота экрана в пикселах;

? availWidth — ширина, доступная для окна Web-браузера;

? availHeight — высота, доступная для окна Web-браузера;

? colorDepth возвращает глубину цвета: 4 — для 16 цветов, 8 — для

256 цветов, 32 — для 16,7 млн цветов.

Для примера выведем информацию о мониторе пользователя (листинг 3.53).

Листинг 3.53. Информация о видеосистеме

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Информация о видеосистеме</title>

1251">

</head>

<body>

<h1 style="text-align: center">Информация о видеосистеме</h1>

<div>

<!-

document.write(screen.width + " – полная ширина экрана в пикселах.<br>");

document.write(screen.height);

document.write(" – полная высота экрана в пикселах.<br>");

document.write(screen.availWidth);

document.write(" – ширина, доступная для окна Web-браузера.<br>");

document.write(screen.availHeight);

document.write(" – высота, доступная для окна Web-браузера.<br>");

document.write(screen.colorDepth + " – глубина цвета.");

//->

</script>

</div>

</body>

</html>

3.17.8. Объект location.

Разбор составляющих URL-адреса документа.

Создание многостраничных HTML-документов

Объект location содержит информацию об URL-адресе текущей Web-

страницы.

Свойства объекта location:

? href — полный URL-адрес документа;

? protocol — идентификатор протокола;

? port — номер порта;

? host — имя компьютера в сети Интернет, вместе с номером порта;

? hostname — имя компьютера в сети Интернет;

? pathname — путь и имя файла;

? search — строка параметров, указанная после знака "?" (включая этот знак);

? hash — имя "якоря" (закладки) в документе, указанное после знака "#" (включая этот знак).

Методы объекта location:

? assign() загружает документ, URL-адрес которого указан в качестве па-

раметра;

? reload() перезагружает документ;

? replace() загружает документ, URL-адрес которого указан в качестве параметра. При этом информация об URL-адресе предыдущего докумен- та удаляется из объекта history.

Загрузить новый документ можно не только с помощью методов assign() или

replace(), но и присвоив новый URL-адрес свойству href объекта location:

window.location.href = "newURL.html";

Если нужно загрузить документ в какой-либо фрейм, то сначала необходимо указать имя фрейма:

frameName.location.href = "newURL.html";

frameName.location.assign("newURL.html");

Для примера разберем URL-адрес документа на составляющие (листинг 3.54).

Листинг 3.54. Информация об URL-адресе

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Информация об URL-адресе</title>

1251">

</head>

<body>

<h1 style="text-align: center">Информация об URL-адресе</h1>

<div>

<!- document.write(window.location.href);

document.write(" – полный URL-адрес документа.<br>"); document.write(window.location.protocol); document.write(" – идентификатор протокола.<br>");

document.write(window.location.port + " – номер порта.<br>");

document.write(window.location.host);

document.write(" – имя компьютера в сети Интернет, "); document.write("вместе с номером порта.<br>"); document.write(window.location.hostname);

document.write(" – имя компьютера в сети Интернет.<br>");

document.write(window.location.pathname + " – путь и имя файла.<br>");

document.write(window.location.search); document.write(" – строка параметров.<br>"); document.write(window.location.hash + " – имя якоря (закладки)"); document.write(" в документе.<br>");

//->

</script>

</div>

</body>

</html>

Через строку URL-адреса могут передаваться некоторые параметры для про- граммы, расположенной на сервере. Например, для просмотра многостра- ничного каталога может передаваться номер страницы. Но параметры могут быть переданы и HTML-документу. В листинге 3.55 приведен пример созда- ния многостраничного HTML-документа.

Листинг 3.55. Многостраничный HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Многостраничный HTML-документ</title>

1251">

</head>

<body>

<h1 style="text-align: center">Многостраничный HTML-документ</h1>

<div>

<a href="test.html?page=1&param1=5&param2=Hello">Страница

1</a><br>

<a href="test.html?page=2&param1=5">Страница 2</a><br>

<a href="test.html?page=3">Страница 3</a><br><br>

<!-

var arr1, arr2;

var obj = {};

if (window.location.search != "") {

var Str = window.location.search.substr(1);

if (Str.indexOf("&") != -1) {

arr1 = Str.split("&");

for (var i=0, c=arr1.length; i<c; i++) { arr2 = arr1[i].split("="); obj[arr2[0]] = arr2[1];

}

else {

arr2 = Str.split("=");

obj[arr2[0]] = arr2[1];

}

else {

obj.page = "1";

}

if (obj.page=="1") {

document.write("Содержание страницы 1.<br><br>");

}

if (obj.page=="2") {

document.write("Содержание страницы 2.<br><br>");

}

if (obj.page=="3") {

document.write("Содержание страницы 3.<br><br>");

}

if (obj.param1!=undefined) {

document.write("Параметр param1 равен " + obj.param1 + "<br>");

}

if (obj.param2!=undefined) {

document.write("Параметр param2 равен " + obj.param2 + "<br>");

}

//->

</script>

</div>

</body>

</html>

У этого метода есть большой минус. HTML-документ будет всегда содержать все фрагменты. При этом посетителю будет показываться только тот фраг- мент, который задан параметрами. Однако при каждом переходе по ссылкам документ будет заново загружаться с сервера. Если документ имеет большой размер, то он каждый раз будет долго загружаться только ради одного фраг- мента. А зачем? Ведь все нужные фрагменты уже есть в документе! По этой причине лучше воспользоваться свойством display объекта style, а не пере- давать параметры через URL-адрес. В листинге 3.56 показан пример исполь- зования свойства display объекта style.

Листинг 3.56. Использование свойства display объекта style

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Многостраничный HTML-документ</title>

1251">

<!-

function f_go(page) {

switch (page) {

case 1:

document.getElementById("page1").style.display = "block"; document.getElementById("page2").style.display = "none"; document.getElementById("page3").style.display = "none"; break;

case 2:

document.getElementById("page1").style.display = "none";

document.getElementById("page2").style.display = "block";

document.getElementById("page3").style.display = "none";

break;

case 3:

document.getElementById("page1").style.display = "none"; document.getElementById("page2").style.display = "none"; document.getElementById("page3").style.display = "block";

}

//->

</script>

div div { border: #FFE9B3 1px solid; background-color: #FFFBEF;

min-height: 100px; margin: 10px 5px 10px 5px }

</style>

</head>

<body>

<h1 style="text-align: center">Многостраничный HTML-документ</h1>

<div><a href="#" onclick="f_go(1); return false;">Страница 1</a>

<div id="page1">Содержание страницы 1.</div></div>

<div><a href="#" onclick="f_go(2); return false;">Страница 2</a>

<div id="page2" style="display: none">Содержание страницы 2.</div></div>

<div><a href="#" onclick="f_go(3); return false;">Страница 3</a>

<div id="page3" style="display: none">Содержание страницы 3.</div></div>

</body>

</html>

Этот пример и выглядит гораздо проще, и не требует никакой перезагрузки страницы.

Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)

Популярное

Категории

Объект screen. Получение информации

Похожие посты:

Комментировать Cancel reply