Одной из наиболее распространенных функций, которую многие веб-дизайнеры любят добавлять на свои веб-страницы, является кнопка или ссылка «перейти к предыдущей», также известная как кнопка возврата в формате HTML, которая отправляет пользователя на последнюю веб-страницу, которую он посетил.
Как HTML-кнопка «Назад» помогает в навигации
Одним из наиболее важных аспектов любой веб-страницы является создание удобной и интуитивно понятной навигации для ваших посетителей. Когда у вас есть «внутренние» страницы, на которые есть ссылки с нескольких других страниц, может быть довольно сложно угадать, откуда пришел посетитель. В случае, если посетители пришли на страницу из поисковой системы или по другой ссылке, это невозможно узнать. Однако, используя кнопку «Назад» в формате HTML, вы можете предоставить своим посетителям удобную ссылку, которая возвращает их на страницу, с которой они пришли. Хотя у пользователей обычно есть возможность использовать кнопку «Назад» в браузере, которая делает то же самое, предоставление ссылки на вашей странице добавляет удобство и интуитивность вашему веб-сайту.
Программирование кнопки «Назад» с помощью HTML
Существуют различные методы создания кнопки или ссылки, которые перенаправят вашего посетителя на предыдущую страницу, на которой он был. Выбранный вами вариант зависит от того, как вы хотите, чтобы ссылка отображалась, и хотите ли вы предусмотреть тот факт, что у некоторых пользователей браузеры могут не поддерживать javascript.
Использование Javascript
Использование метода javascript является одним из самых популярных методов, которые используют многие начинающие веб-дизайнеры, потому что это очень просто. Однако, если вы используете этот подход, хорошей идеей будет включить фактическую связанную страницу, чтобы браузер мог перейти на случай, если браузер не может запустить javascript. В таком случае браузер проигнорирует код javascript, но вернется к ссылке, которую вы определили для переменной href. Выбирая, на какую страницу ссылаться, постарайтесь угадать, откуда пользователь пришел на ваш сайт, прежде чем попасть на эту страницу. Если вы не уверены, то вы всегда можете отправить их на главную страницу вашего сайта.
Javascript: текстовая ссылка
Этот первый метод javascript предоставляет пользователю текстовую ссылку, которая отправляет его на одну страницу назад.
<a href=»yourpage.html» onclick=»window.back()»>Вернуться на предыдущую страницу</a>
Вы можете использовать «history.back()» вместо «window.back()» — обе функции работают одинаково. Другой метод использования javascript — отправить пользователя на несколько страниц. Большинство веб-программистов отправляют посетителю обратно страницы «-1», но вы можете установить любое количество страниц по своему усмотрению.
<a href=»yourpage.html» onclick=»history.go(-1);»>Вернуться на предыдущую страницу</a>
Javascript: кнопка формы
Другой метод, использующий javascript, заключается в создании серой «кнопки формы», которая при нажатии будет вести себя так же, как метод ссылки, описанный в последнем разделе. Нет никакого реального преимущества в использовании этого метода по сравнению с подходом с текстовыми ссылками. Решающим фактором является действительно эстетика — какой вариант навигации вы хотите предоставить своим посетителям и как вы хотите, чтобы он выглядел?
<FORM><INPUT TYPE=»button» VALUE=»Предыдущая страница» onClick=»history.go(-1);»> </FORM>
Использование сценариев на стороне сервера
Техника, которую используют большинство профессиональных веб-дизайнеров, заключается в использовании включений на стороне сервера (SSI), где они могут писать код CGI, который обрабатывается на самом веб-сервере, устраняя необходимость в том, чтобы клиентский браузер запускал какой-либо код javascript. То, как написан этот код, зависит от того, как настроен веб-сервер и какой язык сценариев вы используете. Во всех случаях сценарий на стороне сервера использует переменную с именем «HTTP_REFERER».
Пример сценария с использованием CGI:
<A HREF=»<!—#echo var=»HTTP_REFERER»—>»>Перейти на предыдущую страницу</A>
Переменная HTTP_REFERER — это URL-адрес, по которому посетитель перешел на текущую веб-страницу. Если выбранным вами языком сценариев является PHP, то для доступа к переменной referer и ссылки на предыдущую страницу вы должны создать текстовую ссылку, используя следующий код.
<?php echo ‘<a href=»‘ . $_SERVER[«REFERER»] . ‘»>Перейти на предыдущую страницу</a>’; ?>
Или кнопку формы, используя этот код:
<?php echo ‘<form action=»‘ .$_SERVER[«REFERER»] .'» method=»get»> <input type=»submit» value=»Предыдущая страница»> </form>’; ?>
Заключительные слова
Добавление функции «возврата» на предыдущие страницы кажется очень простой концепцией, но когда вы пытаетесь внедрить самую простую и интуитивно понятную навигацию на свой веб-сайт , эти методы добавления такой функции становятся неотъемлемой частью любого веб-сайта. инструментарий программиста.