JS — Эмуляция кнопки «назад» в javascript
Хочу написать кнопку, при нажатии на которую будет эмулироваться кнопка «назад», как в браузере. Есть такая функция в javascript?
Отслеживать
51.6k 201 201 золотой знак 63 63 серебряных знака 245 245 бронзовых знаков
задан 23 окт 2017 в 4:14
duddeniska duddeniska
3,958 17 17 золотых знаков 67 67 серебряных знаков 113 113 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
В HTML5 появилось history API, которое поддерживает использование браузерной истории
Вы можете вынести код из onclick в другую функцию, если хотите добавить еще какие-то действия, которые должны произойти до перехода назад.
Отслеживать
ответ дан 23 окт 2017 в 4:20
Sergey Glazirin Sergey Glazirin
5,628 5 5 золотых знаков 19 19 серебряных знаков 36 36 бронзовых знаков
Не хочу заводить новую тему, посему спрошу тут. У меня на странице есть переход на новую страницу. С главной на дочернюю, грубо говоря. На дочерней странице список треков, по которым можно кликнуть и пойдет воспроизведение. При переходе на дочернюю страницу и последующим нажатием кнопки «назад» в системе андроид, происходит возврат на главную страницу — это то, что мне нужно. Но если я начинаю клацать по трекам, то что бы вернуться на главную, мне нужно кнопку «назад» нажать ровно столько раз, сколько раз я кликнул по ссылкам — это то, чего я хочу избежать. Как это можно реализовать?
5 июн 2019 в 13:50
Мне кажется, что для этого лучше задать новый вопрос, так как браузер для андроида, судя по всему работает по другому, да и желательно иметь какой-то пример кода страницы с треками, который бы помог выявить причину такого поведения.
Как сделать кнопку НАЗАД на Web-странице
Иногда на вебстраницах возникает необходимость временно перейти на какую-либо другую (назовем ее вспомогательной) страницу, а затем вернуться обратно и продолжить работу с ней. Например, это может быть – страница справки, регистрации. При этом, очевидно, обратный адрес может быть самым разным. Как реализовать такой обратный переход на сайте? Чистых html/CSS здесь не хватит, необходимо будет использовать javascript. Самое простое – это, например, использование такой строчки в скрипте на вспомогательной странице: history.back(); Метод history запоминает историю переходов на странице и, по сути, его использование аналогично использованию кнопок браузера «Вперед» и «Назад», только несколько более функционально. Это – наиболее простой и удобный способ, но, только при одном условии: если новая (вспомогательная) страница не будет открыта в новом окне. Ведь иначе вспомогательная страница будет открываться впервые (точнее, сеанс для нее будет первый, переходов на ней еще не было). А это означает, что переходить назад, по сути-то, некуда. Поэтому данный способ нельзя назвать универсальным. Он не сработает, если пользователь принудительно откроет страницу в новой вкладке или за него сделает это браузер – в соответствии с настройками. В таком случае и атрибут ссылки target=”_self” не поможет: с открытой вспомогательной страницы невозможно будет перейти обратно (если, конечно, не ввести URL исходной страницы в адресной строке браузера вручную).
Более универсальный способ
Для его реализации понадобятся скрипты как на исходной, так и на вспомогательной страницах. Идея может быть разной. Одна из них основана на том, что адрес (URL) исходной страницы сохраняется в адресной строке браузера в виде GET-запроса. Тем самым. вспомогательная страница, получая такой запрос, знает о его источнике. Основываясь на этом, появляется возможность перехода обратно, т.е. на ту страницу, с которой был совершен переход. Схематически это можно представить следующим образом:
Скрипт на исходной странице
На странице, С КОТОРОЙ должен осуществляться переход, находится следующий скрипт, представляющий собой функцию – обработчик клика мыши ( onclick ):
Для того, чтобы функция в скрипте сработала, необходимо установить ее обработчик на какой-нибудь элемент одним из способов, например, так: Нажмите, чтобы перейти на вспомогательную страницу Обратите внимание, что атрибут href этой ссылки имеет соответствующий адрес, который указан в функции-обработчике события onclick. Это сделано для того, чтобы поисковые роботы понимали, на какую страницу будет происходить переход при нажатии на ссылку. Если это не нужно, тогда следует сделать пустой атрибут href, вида href=»#» Принцип работы этого скрипта заключается в том, что при вызове функции save_back(url) происходит открытие (вспомогательной) страницы, имеющей адрес url. Для этого определяется протокол страницы (например, http или https), а также остальная часть URL исходной вебстраницы, в том числе с, быть может, имеющимися данными GET-запроса (это то, что находится в URL после знака «?»). Полученные данные добавляются к URL открываемой страницы – и происходит переход на нее.
Скрипт на вспомогательной странице
На ней должен быть примерно такой скрипт: Этот скрипт также будет запускаться при клике мышью на какой-нибудь элемент, на который установлен соответствующий обработчик: Вернуться При клике на эту ссылку сработает скрипт, содержащийся в функции return_to_initial_page(). Обратите внимание, что в обоих ссылках (и на исходной, и на вспомогательной страницах) в обработчики кликов мыши добавлено return false; Эта строка отменяет действие при клике мышью на ссылку по умолчанию. Дело в том, что по умолчанию происходит переход по ссылке. При этом переход будет происходить именно на тот адрес, который указан в атрибуте href. Этот адрес (в частности, на вспомогательной странице) может не содержать обратного адреса страницы, с которой был совершен переход (если переход на вспомогательную страницу возможен не с какой-либо одной определенной, а с нескольких исходных страниц). Если вместо ссылки будет фигурировать другой элемент, например,
или , то необходимость в return false отпадет, конечно. Итак, скрипт на вспомогательной странице читает содержимое адресной строки и затем разбивает ее в массив по элементам «?». Обратим внимание, что в URL могут быть два таких символа. Первый появится, как уже было сказано, вследствие того, что к адресу вспомогательной страницы был добавлен адрес (за вычетом протокола) адрес исходной страницы. А второй мог присутствовать, как результат наличия параметров GET-запроса при загрузке исходной страницы. Иными словами, в адресной строке вспомогательной страницы может присутствовать один или два знака вопроса. Для перехода со вспомогательной страницы на исходную при клике на ссылку Вернуться из адресной строки считывается запрос и преобразуется к такому же виду, который он имел на исходной странице, после чего происходит загрузка страницы по этому адресу.
Замечания
Кроме того, следует отметить, что в статье, по сути, речь идет не о возврате на исходную страницу, а о повторной ее загрузке. Это, конечно, лишь имитация возврата. В частности, данные, введенные на этой странице, ее настройки могут не сохраниться. Кроме того, в отличие от именно ВОЗВРАТА, при загрузке страницы она будет открыта с самого начала сайта (т.е. верхняя ее часть будет расположена вверху экрана). Тогда как «истинный» возврат назад возвращает (исходную) страницу именно в том месте, из которого был сделан переход. Поэтому попробуем скомбинировать оба способа.
Комбинированный способ
если вспомогательная страница открывается в той же самой вкладке (окне), то пусть будет доступен метод history.back();
а вот если вспомогательная страница открывается в новом окне, то должен работать обсуждавшийся выше метод (ибо при этом history.back() не сработает).
Скрипт на вспомогательной странице немного изменится (добавится упомянутая выше строчка):
Вначале пытаемся вернуться назад. Если получится – оставшаяся часть скрипта не сработает и произойдет возврат на исходную страницу в то же самое место, откуда был совершен переход. Если нет – тогда, как и ранее, из параметров GET-запроса извлекаем адрес исходной страницы и переходим на нее.
Заключение
Конечно, в этой статье показан лишь один из вариантов технологии «возвращения» НАЗАД — на исходную страницу. Для этой цели, помимо GET-запроса, можно было бы использовать и иные технологии, например локальное хранилище localStorage . Кроме того, для полной имитации возврата НАЗАД неплохо было бы через GET-запрос передавать и величину прокрутки исходной страницы — чтобы потом, даже при открытии вспомогательной страницы в новом окне — вернуться в то же самое место исходной страницы, откуда был ранее сделан переход.
Как сделать кнопку назад?
- HTML
- +1 ещё
Как расположить объекты в div в строчку?
- 1 подписчик
- минуту назад
- 2 просмотра
- JavaScript
Как сделать append блока в правильном месте?
- 1 подписчик
- 32 минуты назад
- 32 просмотра
- HTML
- +1 ещё
Почему фоновая картинка то пропадает, то появляется?
- 1 подписчик
- час назад
- 22 просмотра
- JavaScript
Как вставить инлайновый скрипт на DOM веб страницы при разработке расширения для гугл хром?
- 1 подписчик
- 5 часов назад
- 66 просмотров
- JavaScript
- +1 ещё
Почему popup окно открывается только со второго нажатия?
- 1 подписчик
- 6 часов назад
- 35 просмотров
- JavaScript
- +3 ещё
Как сделать ограничитель поля символов?
- 1 подписчик
- 7 часов назад
- 49 просмотров
- JavaScript
Почему не получается обработать response с сервера?
- 1 подписчик
- 9 часов назад
- 84 просмотра
- HTML
Допустимо ли двоеточие в значении атрибута data?
- 1 подписчик
- 10 часов назад
- 53 просмотра
- JavaScript
Не могу как расшифровать js, можете помочь?
- 1 подписчик
- 16 часов назад
- 113 просмотров
- JavaScript
- +1 ещё
Как открыть модальное окно bootstrap при навидению?
- 1 подписчик
- 18 часов назад
- 100 просмотров
от 20 000 до 30 000 ₽
До 350 000 ₽
от 5 500 до 6 500 $
08 янв. 2024, в 20:24
3000 руб./за проект
08 янв. 2024, в 20:10
500 руб./за проект
08 янв. 2024, в 19:59
50000 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Как наработать навык декомпозиции задач?
- 4 подписчика
- 3 ответа
- 2 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 2 подписчика
- 2 ответа
- 3 подписчика
- 1 ответ
- 3 подписчика
- 0 ответов
- 2 подписчика
- 0 ответов
- 2 подписчика
- 5 ответов
- 2 подписчика
- 4 ответа
Как сделать кнопку назад на web-странице. Создаем кнопку «вернуться назад» Вернуться на прежнюю страницу
В этой статье мы рассмотрим, каким способом можно создать кнопку «Вернуться назад» в любом нужном для вас месте. Думаю из самого названия кнопки уже понятно, что будет происходить при нажатии на нее. Такую кнопку можно вставить как в категорию, так и в сам материал. Делается все достаточно просто.
Есть несколько вариантов, как можно добавить кнопку, но я лично использовал только один способ. А именно третий вариант из предложенных мною трех. Чуть далее расскажу, почему именно он.
Какие вообще есть у нас варианты:
Плюс в третьем варианте в том, что если надо будет отредактировать текст на кнопке или изменить/добавить класс стиля, то нужно будет всего поправить сам модуль, а не исправлять кнопку во всех местах, где она стоит.
Так вот, на одном из своих сайтах я и использовал третий вариант:
Был создан модуль «HTML-код» и туда с помощью расширения «Sourcerer», которое дает возможность добавлять любой код в материал, был вставлен код кнопки.
Мой рабочий код кнопки:
Текст немного украшен стрелкой, с помощью компонентов из bootstrap 3, а самой кнопке заданы стили через CSS.
Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.
Последствия этого могут быть ужасны: во время экспериментов неадекватная реакция сайта на нажатие кнопки «назад» была причиной ухода многих пользователей, причем с бранью и нелестными отзывами. В большинстве случаев даже почтенные, седовласые испытуемые страшно выходили из себя.
Из этой статьи вы узнаете:
- что ожидают пользователи от кнопки «вернуться назад»;
- каковы 5 самых распространенных ошибок;
- простое решение этих проблем.
Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?
Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.
Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.
Большая часть посетителей не разбирается в технических моментах, а полагается только на интуитивные представления о том, как должен работать ресурс. Поэтому при нажатии кнопки «назад» они ожидают страницу, на которой уже получили важный опыт, а получают страницу со слегка измененным интерфейсом.
Ниже приведены наиболее популярные интерактивные элементы и рекомендации по их использованию для максимального улучшения пользовательского опыта и юзабилити.
Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.
Использование фильтров часто преображает страницу и дает человеку новый опыт. Поэтому страница после сортировки воспринимается как новая, даже если на ней ничего не подгружалось. Это происходит потому, что после каждого взаимодействия посетителя со страницей интернет-магазина получается новая выдача результатов.
Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.
3. Форма регистрации/оплаты
Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».
Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.
Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.
В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».
Пользователи не готовы отказаться от кнопки «назад»
Учитывая, как широко применяется эта функция интернет-браузера, вопрос несоответствия ожиданий пользователя с видением разработчиков становится критическим — не стоит воспринимать его легкомысленно.
Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.
Пользователи ПК тоже часто нажимают кнопку — но не так, как владельцы мобильных, ибо пользователям настольных компьютеров доступна удобная навигация по сайту.
Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».
Добрый день, возник вопрос как перенести кнопку назад и поставить ее рядом с кнопкой далее при оформлении заказа.У меня сейчас это выглядит так.https://yadi.sk/i/_ZNvGrvEhqSk3Если перенести ее вниз то она перестает работать.код отвечающий за.
Приветствую, кто подскажет, как можно сделать кнопку назад, к примеру в корзине, чтобы человек мог вернуться на предедущую страницу?
Воткнуть в шаблон где хотите кнопку, например, вот это
Когда нажимаю кнопку назад на браузере у меня как будто слетают все стили пока не обновлю страницуТема default должно показывать как на скрине ниже)Подскажите в чем проблема
Добрый день!Столкнулся с такой проблемой: при добавлении товара в корзину и нажатии в браузере кнопки «назад», информация о товарах в корзине (в дополнительном блоке) не сохраняется, пока не обновишь страницу. Т.е. заходим на сайт, переходим.
На сайте, который вы указали используется плагин для корзины.Как вариант с доработками, можно использовать отправку добавления товаров не на?html=1, а на?html=1&items=1 это в ответ даст полностью содержимое корзины.
Добрый день.При каждом шаге во время оформления заказа указывается кнопка «Далее».В теме «Suprime» код кнопки я нашел: