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

При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых 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-запрос передавать и величину прокрутки исходной страницы - чтобы потом, даже при открытии вспомогательной страницы в новом окне - вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.

В этой статье мы рассмотрим, каким способом можно создать кнопку "Вернуться назад" в любом нужном для вас месте. Думаю из самого названия кнопки уже понятно, что будет происходить при нажатии на нее. Такую кнопку можно вставить как в категорию, так и в сам материал. Делается все достаточно просто.

Есть несколько вариантов, как можно добавить кнопку, но я лично использовал только один способ. А именно третий вариант из предложенных мною трех. Чуть далее расскажу, почему именно он.

Какие вообще есть у нас варианты:

Отредактировать файлы шаблона Jooml-ы.

Просто вставить код кнопки в нужное место.

Создать модуль "HTML-код", вставить туда код кнопки, и потом выводить этот модуль в нужном месте.

Плюс в третьем варианте в том, что если надо будет отредактировать текст на кнопке или изменить/добавить класс стиля, то нужно будет всего поправить сам модуль, а не исправлять кнопку во всех местах, где она стоит.

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

Был создан модуль «HTML-код» и туда с помощью расширения "Sourcerer", которое дает возможность добавлять любой код в материал, был вставлен код кнопки.

Мой рабочий код кнопки:

Вернуться назад

Текст немного украшен стрелкой, с помощью компонентов из bootstrap 3, а самой кнопке заданы стили через CSS.

В этом видеоуроке мы рассмотрим 3 варианта как сделать кнопку НАЗАД для перемещения по сайту на предыдущие страницы в обратном порядке. Кнопка НАЗАД также необходима когда с нескольких страниц сайта (A1, A2…An) ссылки ведут на одну и ту же страницу (B), а с этой страницы (B) необходимо вернуться на предыдущую страницу (An) сайта, с которой Вы попали на страницу (B).

Смотрите новый видеоурок:

Код кнопки “вернуться назад” для размещения на сайте:

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Назад" / > < / a >

Кнопка Назад. Для чего нужна?

В этом видеоуроке мы сделаем кнопку возврата назад на предыдущие страницы сайта в программе Adobe Muse. Эта кнопка будет возвращать по тому же пути, по которому мы ходили на сайте.

Кнопка Назад. Проект для урока.

Для того чтобы сделать этот урок, я приготовил небольшой проект, точнее его небольшим называть нельзя, здесь он состоит из , страниц верхнего уровня, страниц первого уровня и также для страницы «page-2» есть еще несколько дочерних страниц. И для разнообразия я создал два шаблона. Первый шаблон применил к трем первым страницам. А второй шаблон применил ко всем остальным.

Давайте начнем. Кнопку Назад – мы будем делать в «Шаблоне С», чтобы она сразу появилась на тех страницах, к которым применен данный шаблон. Я захожу в редактирование данного шаблона, и именно сюда мы будем вставлять нашу кнопку «Назад».

Кнопка Назад. 3 способа.

Кнопку «Назад» мы сможем вставить тремя способами. У меня есть специальный файл, который я уже заготовил в блокноте. И есть три способа, три кода, используя которые, у нас получится вставить такую кнопку на сайте.

Кнопка Назад. Способ№1 – простой текст.

Первый вариант – это просто текст. Кнопка будет у нас в виде текста. Я копирую данный код:

< input type = "button" onclick = "history.back();" value = "Назад" / >

И вставляю его в шаблон. Выглядит это вот так. У нас просто текст и он выделен белым цветом. Я размещу его вот здесь. Для того чтобы понять, как это все работает, мы нажимаем клавиши ctrl+alt+E для того, чтобы просмотреть весь сайт со всеми его страницами в браузере. Вот так выглядит главная страница сайта. Мы можем серфить по меню, выбирать страницы. Здесь у нас есть выпадающие меню. И, например, с главной страницы мы сразу перешли на страницу «page-3». И здесь у нас есть кнопочка «Назад».

Эта кнопка активная, но при наведении курсора мыши на нее, не появляется рука с пальцем. Мы можем спокойно нажать на эту кнопку, и нас перебросит назад на главную страницу. Точно также мы можем нажать на страницу «page-3», потом перейти на страницу «page-4» и нажать кнопку «Назад», она нас перебросит на страницу «page-3», и если мы еще раз нажмем на кнопку «Назад», то она нас переносит на главную страницу. Вот таким образом работает кнопка «Назад».

Но данную кнопку сложно назвать кнопкой, поскольку она представляет собой только вот такую надпись, выделенную белым цветом. Если мы захотим отредактировать ее в Muse, мы сможем изменить только размер текста, например, я поставлю здесь «36», чтобы вам было лучше видно. Цвет текста мы, по-моему, менять не можем. Сейчас я попробую поставить красный. Я выбрал красный цвет, но это никак не повлияло на нашу надпись, так что цвет мы менять не можем. Мы можем поменять размер. Попробуем сделать жирным и выставить по центру. Все, что мы можем сделать, так это такое редактирование. Если мы хотим сделать заливку данному блоку, например, сделать оранжевым цветом, то наш текст все равно будет выделяться белым, и, в принципе, выглядит не очень красиво.

Кнопка Назад. Способ№2 – Текст-ссылка.

< a href = "#" onclick = "history.back();return false;" > Назад< / a >

Сейчас мы его скопируем. Я нажимаю ctrl+C и перехожу в программу, и нажимаю ctrl+V для того, чтобы вставить на сайт. Он у нас выглядит вот такой ссылкой. Ссылка у нас синяя. Сейчас она не очень хороша видна. Давайте сделаем тоже 36-ой шрифт, чтобы укрупнить и увидеть поближе. Вот это у нас просто синяя ссылка. Если мы сейчас нажмем ctrl+alt+E, то увидим, что при просмотре она выглядит вот такой обычной синей ссылкой. Давайте еще перейдем пару раз, чтобы увидеть, нажимаем раз, два, возвращаемся. Вид у данной ссылки обычный, как у обычной ссылки.

К ней мы можем применять в программе Adobe Muse стили ссылок. Находятся стили ссылки в разделе «Гиперссылки», выбираем «Редактировать стили ссылки». У меня уже есть заготовленный вариант. Сейчас у меня уже есть заготовленный вариант. Вы видите, что к ней применен стиль. В стандартном состоянии и при наведении курсора мыши цвет синий и при активном состоянии – красный. Вы видели это при просмотре. Второй стиль я создал просто все черные состояния. Этот стиль мы можем применить к данной кнопке. Например, я выберу и применю к данной кнопке этот специальный стиль. И вы увидите, что наша надпись стала черной.

Здесь мы также можем сделать заливку, например, я сделаю тем же оранжевым цветом. Здесь уже можно редактировать текст. Поставим его по середине, выделим жирным. И, в принципе, этот вариант уже более похож на кнопку. Здесь уже нет такого белого выделения, и уже, в принципе, вариант уже вполне подходящий. При просмотре (ctrl+alt+E) давайте перейдем на страницу «page-3», на страницу «page-4» и еще раз пощелкаем. Эта кнопка работает точно также, как и первая, только имеет больше возможностей для редактирования дизайна.

Кнопка Назад. Способ№3 – кнопка – картинка.

И третий вариант как мы можем разместить кнопку – это кнопка у нас будет картинкой. Я копирую данный код:

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Картинка" / > < / a >

Перехожу в Muse, нажимаю «Вставить». И этот третий вариант у нас – картинка. Для того, чтобы у нас тут появилась картинка какая-нибудь, нам необходимо скачать из интернета какой-нибудь файлик картинки либо создать его самостоятельно. Картинку мы добавляем через функцию программы «Файл», выбираем «Добавить файлы для передачи». Я уже скачал пару картинок из интернета. Мы можем выбрать какую-нибудь. Давайте выберем вот эту с кнопкой «Назад». Теперь если мы посмотрим в разделе «Ресурсы», то у нас добавилась кнопка «back2.png» – «Передать». Этот файл у нас для передачи.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Назад" / > < / a >

Все, нажимаем «ОК». В самом Muse мы не увидим никаких изменений. Все изменения мы увидим только при просмотре сайта в браузере. Давайте нажмем снова ctrl+alt+E для просмотра сайта в браузере и попробуем посерфить по нашим страницам.

Кнопка Назад. Просмотр результата.

Перейдем на страницу, например, «page 2-1», теперь перейдем на страницу «page-2», теперь перейдем на страницу «page 3», далее на страницу «page-4». И теперь, если мы будем нажимать на кнопку назад, мы будем возвращаться последовательно в обратном порядке к главной странице сайта. Нажимаем «Назад», перемещаемся на страницу «page-3», на страницу «page-2». И здесь у нас уже нет кнопки. Если бы мы ее разместили в шаблоне, который применен к странице «page-2», то у нас бы здесь тоже была кнопка «Назад». Поскольку у нас ее нет, нам приходится перемещаться к главной странице, только нажав на кнопку «Главная» в меню. Давайте перейдем, например, на страницу «page 2-2-2», потом перейдем на страницу «page 2-2-1», потом на страницы «page-3 » и «page-4». И теперь в обратном порядке: страница «page-3», страница «page 2-2-1», страница «page 2-2-2» и на главную.

Конечно, вы можете не размещать данную кнопку у себя на сайте, а использовать обычные стрелки в браузере. Но если вы хотите, чтобы такая кнопка была у вас на сайте, то можете ее сделать вот такими способами.. И ссылка на статью будет под этим видео. На этом все. С вами был Дмитрий Шаповалов. Ставьте лайк к данному видео, подписывайтесь на канал , пишите комментарии внизу, а прощаюсь с вами до следующих видеоуроков.