Последнее обновление:
Как сделать кнопку НАЗАД на Web-странице
Иногда на вебстраницах возникает необходимость временно перейти на какую-либо другую (назовем ее вспомогательной) страницу, а затем вернуться обратно и продолжить работу с ней. Например, это может быть – страница справки, регистрации.
При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых html/CSS здесь не хватит, необходимо будет использовать javascript.
Самое простое – это, например, использование такой строчки в скрипте на вспомогательной странице:
history.back();
Метод history запоминает историю переходов на странице и, по сути, его использование аналогично использованию кнопок браузера «Вперед» и «Назад», только несколько более функционально. Это – наиболее простой и удобный способ, но, только при одном условии: если новая (вспомогательная) страница не будет открыта в новом окне. Ведь иначе вспомогательная страница будет открываться впервые (точнее, сеанс для нее будет первый, переходов на ней еще не было). А это означает, что переходить назад, по сути-то, некуда. Поэтому данный способ нельзя назвать универсальным. Он не сработает, если пользователь принудительно откроет страницу в новой вкладке или за него сделает это браузер – в соответствии с настройками. В таком случае и атрибут ссылки target=”_self” не поможет: с открытой вспомогательной страницы невозможно будет перейти обратно (если, конечно, не ввести URL исходной страницы в адресной строке браузера вручную).
Более универсальный способ
Для его реализации понадобятся скрипты как на исходной, так и на вспомогательной страницах. Идея может быть разной. Одна из них основана на том, что адрес (URL) исходной страницы сохраняется в адресной строке браузера в виде GET-запроса. Тем самым. вспомогательная страница, получая такой запрос, знает о его источнике. Основываясь на этом, появляется возможность перехода обратно, т.е. на ту страницу, с которой был совершен переход.
Схематически это можно представить следующим образом:
Скрипт на исходной странице
На странице, С КОТОРОЙ должен осуществляться переход, находится следующий скрипт, представляющий собой функцию – обработчик клика мыши (onclick):
<script type="text/javascript">
function save_back(url) {
var docum_protocol = document.location.protocol;
var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == '/') {
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}
</script>
Для того, чтобы функция в скрипте сработала, необходимо установить ее обработчик на какой-нибудь элемент одним из способов, например, так:
<a href="http://example.com" onclick="to_comment_rules(“http://example.com”); return false">Нажмите, чтобы перейти на вспомогательную страницу</a>
Обратите внимание, что атрибут href этой ссылки имеет соответствующий адрес, который указан в функции-обработчике события onclick. Это сделано для того, чтобы поисковые роботы понимали, на какую страницу будет происходить переход при нажатии на ссылку. Если это не нужно, тогда следует сделать пустой атрибут href, вида
href="#"
Принцип работы этого скрипта заключается в том, что при вызове функции save_back(url) происходит открытие (вспомогательной) страницы, имеющей адрес url. Для этого определяется протокол страницы (например, http или https), а также остальная часть URL исходной вебстраницы, в том числе с, быть может, имеющимися данными GET-запроса (это то, что находится в URL после знака «?»). Полученные данные добавляются к URL открываемой страницы – и происходит переход на нее.
Скрипт на вспомогательной странице
На ней должен быть примерно такой скрипт:
<script type="text/javascript">
function return_to_initial_page() {
var docum_location = document.location.toString().split("?");
var docum_href = docum_location[1];
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;
var get = docum_location[number_questions];
var question = "";
if(number_questions > 1){
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}
</script>
Этот скрипт также будет запускаться при клике мышью на какой-нибудь элемент, на который установлен соответствующий обработчик:
<a href="#" onclick="return_to_initial_page(); return false;" title="Назад">Вернуться</a>
При клике на эту ссылку сработает скрипт, содержащийся в функции return_to_initial_page().
Обратите внимание, что в обоих ссылках (и на исходной, и на вспомогательной страницах) в обработчики кликов мыши добавлено
return false;
Эта строка отменяет действие при клике мышью на ссылку по умолчанию. Дело в том, что по умолчанию происходит переход по ссылке. При этом переход будет происходить именно на тот адрес, который указан в атрибуте href. Этот адрес (в частности, на вспомогательной странице) может не содержать обратного адреса страницы, с которой был совершен переход (если переход на вспомогательную страницу возможен не с какой-либо одной определенной, а с нескольких исходных страниц).
Если вместо ссылки будет фигурировать другой элемент, например, <p> или <div>, то необходимость в return false отпадет, конечно.
Итак, скрипт на вспомогательной странице читает содержимое адресной строки и затем разбивает ее в массив по элементам «?». Обратим внимание, что в URL могут быть два таких символа. Первый появится, как уже было сказано, вследствие того, что к адресу вспомогательной страницы был добавлен адрес (за вычетом протокола) адрес исходной страницы. А второй мог присутствовать, как результат наличия параметров GET-запроса при загрузке исходной страницы. Иными словами, в адресной строке вспомогательной страницы может присутствовать один или два знака вопроса. Для перехода со вспомогательной страницы на исходную при клике на ссылку
<a href=”#” onclick="return_to_initial_page(); return false;" title="Назад">Вернуться</a>
из адресной строки считывается запрос и преобразуется к такому же виду, который он имел на исходной странице, после чего происходит загрузка страницы по этому адресу.
Замечания
Кроме того, следует отметить, что в статье, по сути, речь идет не о возврате на исходную страницу, а о повторной ее загрузке. Это, конечно, лишь имитация возврата. В частности, данные, введенные на этой странице, ее настройки могут не сохраниться. Кроме того, в отличие от именно ВОЗВРАТА, при загрузке страницы она будет открыта с самого начала сайта (т.е. верхняя ее часть будет расположена вверху экрана). Тогда как «истинный» возврат назад возвращает (исходную) страницу именно в том месте, из которого был сделан переход. Поэтому попробуем скомбинировать оба способа.
Комбинированный способ
Итак, поставим задачу:
- если вспомогательная страница открывается в той же самой вкладке (окне), то пусть будет доступен метод
history.back(); - а вот если вспомогательная страница открывается в новом окне, то должен работать обсуждавшийся выше метод (ибо при этом
history.back()не сработает).
Скрипт на вспомогательной странице немного изменится (добавится упомянутая выше строчка):
<script type="text/javascript">
function return_to_initial_page() {
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location[1];
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location[number_questions];
var question = "";
if (number_questions > 1) {
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}
</script>
Вначале пытаемся вернуться назад. Если получится – оставшаяся часть скрипта не сработает и произойдет возврат на исходную страницу в то же самое место, откуда был совершен переход. Если нет – тогда, как и ранее, из параметров GET-запроса извлекаем адрес исходной страницы и переходим на нее.
Заключение
Конечно, в этой статье показан лишь один из вариантов технологии «возвращения» НАЗАД - на исходную страницу. Для этой цели, помимо GET-запроса, можно было бы использовать и иные технологии, например локальное хранилище localStorage. Кроме того, для полной имитации возврата НАЗАД неплохо было бы через GET-запрос передавать и величину прокрутки исходной страницы - чтобы потом, даже при открытии вспомогательной страницы в новом окне - вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.