Wiki-учебник по веб-технологиям: JavaScript/ПанельНавигации ...

Главная | Каталог |

Панель навигации


Давайте посмотрим на панель навигации. У нас есть несколько ссылок в одном фрейме. Если пользователь нажимает на эти ссылки, страницы не будут появляться в том же самом фрейме — они будут загружены во второй фрейм.

Сначала нам неоходим сценарий, который создаст фреймы. Этот текст напоминает первый пример, который был в этой части:

frames3.htm


<html>
<frameset rows="80%,20%"> 
  <frame src="start.htm" name="main"> 
  <frame src="menu.htm" name="menu"> 
</frameset> 
</html>


Страница start.htm — начальная страница, которая будет отображаться во фрейме main сначала. Не существует никаких специальных требований для этой страницы.

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

menu.htm


<html>
<head>
<script language="JavaScript">
<!-- hide

function load(url) {
  parent.main.location.href= url;
}

// -->
</script>
</head>
<body>

<a href="javascript:load('first.htm')">first</a>
<a href="second.htm" target="main">second</a>
<a href="third.htm" target="_top">third</a>

</body>
</html>


Здесь вы видите различные пути загрузки новой страницы во фрейм main. Первая ссылка использует функцию load().Взгляните на то, как эта функция вызывается:

<a href="javascript:load('first.htm')">first</a>


Вы видите, что мы позволяем браузеру выполнять код JavaScript, вместо того, чтобы загрузить другую страницу — мы должны использовать javascript: в свойстве href. Вы видите, что мы пишем 'first.htm' внутри скобок. Эта строка передается в функцию load(). Функция load() определена через:

function load(url) {
  parent.main.location.href= url;
}


Здесь можете видеть, что мы пишем url внутри скобок. Это означает, что строка 'first1.htm' хранится в переменной url. Теперь внутри load() мы можем использовать эту переменную. В дальнейшем мы рассмотрим последующие примеры этого важного понятия передачи переменной.

Вторая ссылка использует свойство target. Фактически это не JavaScript. Это — HTML-свойство. Вы видите, что мы должны только определить имя фрейма. Пожалуйста обратите внимание, что мы не помещаем parent перед именем фрейма. Это может немного спутать. Причина этого то, что target это HTML, а не JavaScript.

Третья ссылка показывает вам, как удалить фреймы с помощью свойства target.
Если вы хотите удалить фреймы функцией load()(), вам просто надо написать parent.location.href= url внутри функции.

Итак, который путь вы должны выбрать? Это зависит от вашего сценария и что вы хотите сделать. Свойство target очень просто. Вы могли бы использовать его, если вы хотите только загрузить страницу в другой фрейм. Решение на JavaScript (то есть первая ссылка) обычно используется, если вы хотите сделать несколько вещей как реакцию на щелчок на ссылке. Одна общая проблема состоит в том, чтобы загрузить две страницы сразу в двух различных фреймах. Хотя вы могли бы решить её свойством target используя напрямую функцию JavaScript. Давайте условимся, что вы имеете три фрейма, названные frame1,frame2 и frame3. Пользователь нажимает на ссылку в frame1. Затем вы хотите загрузить две различных страницы в два других фрейма. Например, вы можете использовать эту функцию:

function loadtwo() {
  parent.frame1.location.href= "first.htm";
  parent.frame2.location.href= "second.htm";
}


Если вы хотите сохранить функцию более гибкой, вы здесь также можете использовать передачу через переменные. Это выглядит так:

function loadtwo(url1, url2) {
  parent.frame1.location.href= url1;
  parent.frame2.location.href= url2;
}


Затем, вы можете вызывать эту функцию с помощью loadtwo(«first.htm», “second.htm”) или loadtwo(«third.htm”, “forth.htm”). Передачу переменную делает вашу функцию более гибкой. Вы можете использовать её много раз в различных контекстах.