JS: Переход на другую страницу

Как сделать так, чтобы по нажатию на кнопку (картинку, текст, ячейку таблицы — нужное подчеркнуть) пользователь переходил на другую страницу?

У каждого (ну, почти) элемента страницы (то есть у практически любого тега) есть специальный атрибут onclick="…". Этот атрибут и определяет, что произойдёт, когда человек нажмёт на элемент (будь то кнопка, изображение или что-то другое).

А в JavaScript есть такое свойство страницы: location.href. В нём находится текущий адрес страницы. Если это свойство изменить, то браузер перейдёт на новый (изменённый) адрес.

Пример действующего кода:

<input
	type="button"
	value="Перейти на страницу 1.html"
	onclick="top.location.href='1.html';" />

В этом коде префикс javascript: говорит о том, что дальше будет идти JavaScript-код, а слово top сообщает о том, что мы будем менять адрес родительского фрейма. Адрес перехода указывается в одинарных кавычках. В нашем примере переход будет осуществлён на страницу 1.html.

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

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

Как сделать так, чтобы переход был только в текущем фрейме? Вместо слова top подставляем self, которое означает текущий документ. Пример кода:

<input
	type="button"
	value="Перейти на страницу 1.html в текущем фрейме"
	onclick="self.location.href='1.html';" />

Тогда переход состоится только в текущем фрейме, как показано на картинке:

Ну, а как тогда сделать так, чтобы при нажатии на кнопку в одном фрейме совершался переход в другом фрейме? В JavaScript есть специальный массив: top.frames, который содержит в себе все фреймы, которые есть на странице. А у каждого фрейма (тега <frame>) есть атрибут name, в котором указывается уникальное имя фрейма. Значит, чтобы сделать переход в определённом окне фрейма нужно написать так:

<input
	type="button"
	value="Перейти на страницу 1.html в текущем фрейме"
	onclick="top.frames['имя фрейма'].location.href='1.html';" />

И получится так, как показано на картинке:

Прошу не забывать: атрибут onclick можно применять не только к тегу <input>, но и к очень многим другим тегам.

Думаю, вопрос раскрыт. Если есть дополнения — пишите комментарии.

Ну и не забывайте, что если Вы делаете переход в ссылке, то гораздо правильнее воспользоваться атрибутом target тега <a>.

Мысли по теме:

17.10.2006 5:20 der Igel:

В onclick нет необходимости указывать javascript. Это схема в URI, и её надо указывать только в ссылках, т.е. если бы обработчик javascript был указан в атрибуте href ссылки.

Связь с автором: derigel < doggy > rsdn.ru

17.10.2006 10:10 Евгений:

Совершенно верно, для меня это скорее привычка. Дурная, надо признать…

23.5.2007 6:28 ZelFF:

А вот такой вопрос... Как сделать переход с обычной страницы на страницу, содержащую ифрейм, причём чтоб страница в этом ифрейме отобразилась на нужной метке... Можно ли вообще такое реализовать? Заранее спасибо за ответ:)

23.5.2007 12:26 Евгений:

А это уже сложнее. Сходу так не отвечу даже…
По-моему не удастся так.

Связь с автором: evgeny ( кошка ) neverov.name

Высказаться:

Поставьте свою оценку:

Средняя оценка этой страницы:
3.57 (7 оценок)