Приднестровская поддержка XOOPS
Объект 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).
Листинг 54. Информация об URL-адресе
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Информация об URL-адресе</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h1 style="text-align: center">Информация об URL-адресе</h1>
<div>
<script type="text/javascript">
<!--
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-документу. В листинге 55 приведен пример создания многостраничного HTML-документа.
Листинг 55. Многостраничный HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Многостраничный HTML-документ</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-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>
<script type="text/javascript">
<!--
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-адрес. В листинге 56 показан пример использования свойства display объекта style.
Листинг 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
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>
<style type="text/css">
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>
Этот пример и выглядит гораздо проще, и не требует никакой перезагрузки страницы.
Отправитель | Нити |
---|
5 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |