Панель навигации
Давайте посмотрим на панель навигации. У нас есть несколько ссылок в одном фрейме. Если пользователь нажимает на эти ссылки, страницы не будут появляться в том же самом фрейме — они будут загружены во второй фрейм.
Сначала нам неоходим сценарий, который создаст фреймы. Этот текст напоминает первый пример, который был в этой части:
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). Передачу переменную делает вашу функцию более гибкой. Вы можете использовать её много раз в различных контекстах.