Вернуться на предыдущую страницу javascript. Создаем кнопку "вернуться назад"

Иногда на вебстраницах возникает необходимость временно перейти на какую-либо другую (назовем ее вспомогательной) страницу, а затем вернуться обратно и продолжить работу с ней. Например, это может быть – страница справки, регистрации.

При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых html/CSS здесь не хватит, необходимо будет использовать javascript.

Самое простое – это, например, использование такой строчки в скрипте на вспомогательной странице:

Метод history запоминает историю переходов на странице и, по сути, его использование аналогично использованию кнопок браузера «Вперед» и «Назад», только несколько более функционально. Это – наиболее простой и удобный способ, но, только при одном условии: если новая (вспомогательная) страница не будет открыта в новом окне. Ведь иначе вспомогательная страница будет открываться впервые (точнее, сеанс для нее будет первый, переходов на ней еще не было). А это означает, что переходить назад, по сути-то, некуда. Поэтому данный способ нельзя назвать универсальным. Он не сработает, если пользователь принудительно откроет страницу в новой вкладке или за него сделает это браузер – в соответствии с настройками. В таком случае и атрибут ссылки target=”_self” не поможет: с открытой вспомогательной страницы невозможно будет перейти обратно (если, конечно, не ввести URL исходной страницы в адресной строке браузера вручную).

Для его реализации понадобятся скрипты как на исходной, так и на вспомогательной страницах. Идея может быть разной. Одна из них основана на том, что адрес (URL) исходной страницы сохраняется в адресной строке браузера в виде GET-запроса. Тем самым. вспомогательная страница, получая такой запрос, знает о его источнике. Основываясь на этом, появляется возможность перехода обратно, т.е. на ту страницу, с которой был совершен переход.

Схематически это можно представить следующим образом:

На странице, С КОТОРОЙ должен осуществляться переход, находится следующий скрипт, представляющий собой функцию – обработчик клика мыши (onclick):

function save_back(url) {

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);
}

Для того, чтобы функция в скрипте сработала, необходимо установить ее обработчик на какой-нибудь элемент одним из способов, например, так:

Нажмите, чтобы перейти на вспомогательную страницу

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

Принцип работы этого скрипта заключается в том, что при вызове функции save_back(url) происходит открытие (вспомогательной) страницы, имеющей адрес url. Для этого определяется протокол страницы (например, http или https), а также остальная часть URL исходной вебстраницы, в том числе с, быть может, имеющимися данными GET-запроса (это то, что находится в URL после знака «?»). Полученные данные добавляются к URL открываемой страницы – и происходит переход на нее.

На ней должен быть примерно такой скрипт:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var question = "";
if(number_questions > 1){
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

Этот скрипт также будет запускаться при клике мышью на какой-нибудь элемент, на который установлен соответствующий обработчик:

Вернуться

Эта строка отменяет действие при клике мышью на ссылку по умолчанию. Дело в том, что по умолчанию происходит переход по ссылке. При этом переход будет происходить именно на тот адрес, который указан в атрибуте href. Этот адрес (в частности, на вспомогательной странице) может не содержать обратного адреса страницы, с которой был совершен переход (если переход на вспомогательную страницу возможен не с какой-либо одной определенной, а с нескольких исходных страниц).

Итак, скрипт на вспомогательной странице читает содержимое адресной строки и затем разбивает ее в массив по элементам «?». Обратим внимание, что в URL могут быть два таких символа. Первый появится, как уже было сказано, вследствие того, что к адресу вспомогательной страницы был добавлен адрес (за вычетом протокола) адрес исходной страницы. А второй мог присутствовать, как результат наличия параметров GET-запроса при загрузке исходной страницы. Иными словами, в адресной строке вспомогательной страницы может присутствовать один или два знака вопроса. Для перехода со вспомогательной страницы на исходную при клике на ссылку

Вернуться

из адресной строки считывается запрос и преобразуется к такому же виду, который он имел на исходной странице, после чего происходит загрузка страницы по этому адресу.

Кроме того, следует отметить, что в статье, по сути, речь идет не о возврате на исходную страницу, а о повторной ее загрузке. Это, конечно, лишь имитация возврата. В частности, данные, введенные на этой странице, ее настройки могут не сохраниться. Кроме того, в отличие от именно ВОЗВРАТА, при загрузке страницы она будет открыта с самого начала сайта (т.е. верхняя ее часть будет расположена вверху экрана). Тогда как «истинный» возврат назад возвращает (исходную) страницу именно в том месте, из которого был сделан переход. Поэтому попробуем скомбинировать оба способа.

Итак, поставим задачу:

если вспомогательная страница открывается в той же самой вкладке (окне), то пусть будет доступен метод history.back();

а вот если вспомогательная страница открывается в новом окне, то должен работать обсуждавшийся выше метод (ибо при этом history.back() не сработает).

Скрипт на вспомогательной странице немного изменится (добавится упомянутая выше строчка):

function return_to_initial_page() {
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var question = "";
if (number_questions > 1) {
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}

Вначале пытаемся вернуться назад. Если получится – оставшаяся часть скрипта не сработает и произойдет возврат на исходную страницу в то же самое место, откуда был совершен переход. Если нет – тогда, как и ранее, из параметров GET-запроса извлекаем адрес исходной страницы и переходим на нее.

Конечно, в этой статье показан лишь один из вариантов технологии «возвращения» НАЗАД - на исходную страницу. Для этой цели, помимо GET-запроса, можно было бы использовать и иные технологии, например локальное хранилище localStorage . Кроме того, для полной имитации возврата НАЗАД неплохо было бы через GET-запрос передавать и величину прокрутки исходной страницы - чтобы потом, даже при открытии вспомогательной страницы в новом окне - вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.

Добрый день, возник вопрос как перенести кнопку назад и поставить ее рядом с кнопкой далее при оформлении заказа.У меня сейчас это выглядит так.https://yadi.sk/i/_ZNvGrvEhqSk3Если перенести ее вниз то она перестает работать.код отвечающий за...

Есть решение

Приветствую, кто подскажет, как можно сделать кнопку назад, к примеру в корзине, чтобы человек мог вернуться на предедущую страницу?

Воткнуть в шаблон где хотите кнопку, например, вот это

+1

Когда нажимаю кнопку назад на браузере у меня как будто слетают все стили пока не обновлю страницуТема default должно показывать как на скрине ниже)Подскажите в чем проблема

Здравствуйте, сделал кнопку "Вернуться назад" в корзине, даже не кнопку, а просто ссылку с кодомВернуться назадТеперь при возвращении назад в корзине...

Есть решение

Добрый день!Столкнулся с такой проблемой: при добавлении товара в корзину и нажатии в браузере кнопки "назад", информация о товарах в корзине (в дополнительном блоке) не сохраняется, пока не обновишь страницу. Т.е. заходим на сайт, переходим...

На сайте, который вы указали используется плагин для корзины.Как вариант с доработками, можно использовать отправку добавления товаров не на?html=1, а на?html=1&items=1 это в ответ даст полностью содержимое корзины.

Добрый день.При каждом шаге во время оформления заказа указывается кнопка "Далее".В теме "Suprime" код кнопки я нашел: