При описании объекта document было сказано, что у него имеется свойство location, возвращающее ссылку на объект location для данного документа. Таким образом, объект location - это свойство объекта document.
Объект location содержит информацию о местонахождении текущего документа, т.е. его Интернет-адресе. Например, если Вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу. Впрочем, более важно, что есть возможность записывать в location.href свои новые значения для перехода на другой документ и перезагрузки текущего документа.
Покажем, как с помощью данного объекта можно осуществлять загрузку нового документа.
Пример 14.
…
<script>
function load(ad)
{document.location.href=ad.value;}
Данная функция загружает документ, расположенный по адресу, который мы укажем в поле ввода текста с именем AD. Таким образом, чтобы загрузить новый документ, достаточно присвоить значение адреса загружаемого документа свойству объекта document - location.
С другой стороны, данное свойство можно использовать для получения информации об адресе текущего документа. Например, так.
…
f.innerHTML = "Например: текущий документ имеет адрес "+document.location.href;
</script>
…
Т.е. адрес текущего документа будет возвращен в текст, содержащийся в абзаце с именем F.
Рассмотрим два метода данного объекта – reload и replace.
Пример 15.
Location.reload() – перезагружает текущий документ. По сути, этот метод аналогичен кнопке «Обновить» Web-обозревателя. В примере 14, для демонстрации работы этого метода на странице изображаются текущие секунды, зафиксированные в момент загрузки документа. Очевидно, что, при нажатии на кнопку «Обновить» обозревателя данные о секундах должны измениться. В этом несложно убедиться.
Кнопка «Перегрузить» вызывает функцию rel.
...
function rel()
{document.location.reload();}
...
<’script>
<input type="button" value='Перегрузить' onClick='rel()'>
Как видно, данная функция вызывает метод reload() объекта location. Результат действия полностью аналогичен результату, при нажатии на кнопку «Обновить» - обновление секунд произошло. Таким образом, мы убедились, что вызов функции reload() без параметров приводит к обновлению текущей страницы.
Кнопка «Перейти на пустую страницу (reload)» - вызывает функцию go().
...
function go()
{location.reload('null.html');}
...
<input type="button" value='Перейти на пустую страницу (reload)' onClick='go()'>
В этой функции вызов метода reload() осуществлён с параметром “ null.html”. Результатом выполнения данной функции будет загрузка в окно обозревателя документа с именем null.html (документ расположен в папке с примером). Поэтому работа метода reload() с указанием параметра аналогична присвоению значения параметра свойству href этого же объекта - location. В равнозначности этих действий легко убедиться, нажав кнопку «Перейти на пустую страницу (href)».
...
function go1()
{document.location.href='null.html'}
...
<input type="button" value='Перейти на пустую страницу (href)' onClick='go1()'>
Для демонстрации метода replce(Адрес) в примере существует кнопка «Перейти на пустую страницу (replace)». Вообще суть данного метода состоит в следующем: он замещает текущую страницу указанной в параметре Адрес. Действует аналогично указанию свойств объекта location вручную (location.href=Адрес). Разница в том, что этот метод не изменяет историю обозревателя. Другими словами, кнопку «Назад» обозревателя использовать уже будет нельзя. Так в нашем примере нажав на кнопку «Перейти на пустую страницу (replace)», мы перейдем на пустую страницу, адрес которой указан в качестве параметра:
...
function go2()
{ document.location.replace('null.html');}
...
<input type="button" value='Перейти на пустую страницу (replace)' onClick='go2()'>
Но кнопкой обозревателя «Назад» мы уже воспользоваться не сможем, так как записи о предыдущем документе в истории обозревателя не сохранилось.
Таким образом, мы установили сколькими разными способами можно загружать новые документы и перегружать текущие, чем эти способы отличаются.
Приведём пример совместного использования объектов window, document и location. (см. пример frame\index.html)
Создадим главный документ, содержащий два фрейма:
…
<frameset cols="35%,65%">
<frame name="fr1" src="fr1.htm">
<frame name="fr2" src="fr4.htm">
</frameset>
…
Документ fr1.htm содержит несколько кнопок:
…
<input type='button' value='Открыть Фрейм 1' onClick='fc1()'> <br>
<input type='button' value='Открыть Фрейм 2' onClick='fc2()'> <br>
<input type='button' value='Изменить размер фрейма' onClick='fc3()'> <br>
<input type='button' value='Вывод во фрейм' onClick='fc4()'> <br>
…
Рассмотрим каждую функцию:
…
function fc1()
{parent.fr2.location='fr2.htm'}
…
Как видно, в родительском окне, у фрейма с именем fr2 свойство loction установлено в fr2.html. Таким образом, при выполнении этой функции во фрейм с именем fr2 будет загружен документ fr2.htm.
...
function fc2()
{parent.fr2.location='fr3.htm'}
...
По аналогии, можно предположить, что в результате вызова этой функции в тот же фрейм будет загружен документ fr3.htm.
...
function fc3()
{parent.fr2.resizeBy(-30,-30)}
...
Эта функция уменьшает размер фрейма при каждом её вызове.
…
function fc4()
{ if (parent.fr2.location.pathname.indexOf("fr2.htm")!=-1 )
parent.fr2.document.all.text.innerHTML="Это фрейм 1";
if (parent.fr2.location.pathname.indexOf("fr3.htm")!=-1 )
parent.fr2.document.all.text.innerHTML="Это фрейм 2";
if (parent.fr2.location.pathname.indexOf("fr4.htm")!=-1 )
parent.fr2.document.all.text.innerHTML="Это пустая страница";
}
…
На рассмотрении этой функции остановимся подробнее. Эта функция должна выводить в документ его название, поэтому сначала необходимо определить, что за документ загружен. У объекта location есть свойство pathname, которое возвращает название загруженного документа. Например для документа fr2.htm это свойство вернёт «…путь к документу \fr2.htm» Используя метод indexOf , который применим для текстовых строк, определим номер, с которого в строке «…путь к документу \fr2.htm» встречается указанная подстрока "fr2.htm". Так например, для текстовой строки /D:\DiplomLuda\doc\Ex\1.html этот метод indexOf(“1.html”) вернёт 22 – начиная с 22 символа в строке /D:\DiplomLuda\doc\Ex\1.html встречается строка 1.html (отсчёт начинается с 0). Если же такой строки нет, то метод вернёт -1. Вообще этот метод является методом объекта String и будет рассмотрен ниже. Для нас важно следующее: если в строке имени (путь и имя) файла присутствует указное имя файла, то будет возвращено значение, отличное от -1 (т.е. это действительно предполагаемый документ) и в этом случае в этот документ выводим его название. Так, в первых двух строчках функции, если во фрейме fr2 загружен документ с именем файла fr2.htm, выводим в него «Это фрейм 2». Следующие строки работают аналогично.
Таким образом, мы рассмотрели пример работы с фреймами.