Оглавление

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

Объект   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&amp;param1=5&amp;param2=Hello">Страница 1</a><br>
<a href="test.html?page=2&amp;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>

 

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

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити