Как сделать кнопку назад в html

Как создать кнопки назад и вперед с помощью которых можно отменять и возвращать изменения?

Открываю html страницу в браузере, произвожу изменение каких либо элементов(например меняю цвет блока) . Надо создать кнопку , чтобы при нажатии эти изменения отменялись, и кнопку , чтобы возвращались обратно. Есть мысль, но не знаю как реализовать . Можно после любых изменений сохранять объект document в массив , и при нажатии на кнопку назад , загружать предыдущий элемент из массива в окно браузера ( то есть открывать экземпляр объекта document с теми свойствами, которые у него были на момент сохранения в массив)

• Вопрос задан более трёх лет назад
• 696 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Larisa Moroz @larisamoroz

Курю маны, втыкаю в код, ваяю, починяю.

Вам нужен HTML5 History API .
При каждом изменении ваших элементов делаете pushState , где в data сохраняете состояние ваших элементов
Потом ловить переход по кнопкам истории ( window.addEventListener(‘popstate’, … ) и восстанавливать состояние.

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов

Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, чтобы помочь заблудившимся посетителям попасть на предыдущую страницу. А также, как скрыть эту кнопку, если в браузере посетителя отсутствует история переходов по сайту.

Способы создания кнопки «назад» на JavaScript

Чтобы при нажатии кнопки заставить браузер переместиться на одну страницу назад, воспользуемся JavaScript методом history.back() . Объект history отвечает за историю переходов, которые пользователь совершил в переделах одной вкладки браузера. Эти переходы браузер сохраняет в сессию текущего окна. Если предыдущая страница отсутствует, данный вызов метода не делает ничего.

Способ 1

Самый простой способ сделать кнопку «назад» — прописать событие onclick wp-block-syntaxhighlighter-code «>

Способ 2

Несмотря на удобство 1 способа всё же правильнее будет настроить события из кода JavaScript методом addEventListener.

Скопируйте этот скрипт и вставьте его на нужную страницу.

В том месте, где требуется установить кнопку, добавьте HTML код:

Как скрыть кнопку «Вернуться назад» при прямом посещении

Если посетитель сделает прямой переход к странице содержащей кнопку «назад» и воспользуется этой кнопкой, то ничего не произойдёт, так как переходить будет некуда, либо его вернёт обратно на пустую вкладку. Поэтому логичнее будет эту кнопку скрыть.

Для этого будем использовать свойство history.length которое возвращает количество переходов (шагов) вперёд или назад, выполняемых в пределах текущей вкладки или окна.

Рассмотрим несколько возможностей history.length и поведение пользователя:

• Пользователь посещает страницу с новой вкладки браузера, тогда history.length = 2 . Если он кликнет по кнопке «назад», то перейдет на пустую вкладку.
• Пользователь открывает страницу на новой вкладке или окне, кликая по ссылке, тогда history.length = 1 . В этом случае возвращаться будет некуда, т.к. это новая сессия.
• Пользователь переходит на страницу после посещения нескольких страниц, в этом случае history.length > 2 и теперь мы можем ему показать кнопку «назад». В скрипте применим этот вариант.

Добавим кнопке класс, чтобы скрыть её при прямом заходе с помощью CSS, а когда посетитель выполнит переход с предыдущей страницы — удалим указанный класс методом classList.remove .

Скопируйте скрипт и вставьте на странице, где будет установлена кнопка. Если используете WordPress, то скрипт можно разместить в блоке «Произвольный HTML» редактора Гутенберг.

HTML код кнопки будет таким:

.history-hide < display: none!important; >#history-button

Ещё свойства объекта history, которые можно использовать для создания кнопок вперёд/назад:

• history.go(n) — свойство, позволяющее перемещаться по истории. В качестве аргумента передается смещение, относительно текущей позиции. Например, history.go(-2) вернёт вас на две страницы назад. Данный метод сработает только если страница, на которую нужно вернуться, существует в журнале;
• history.forward() — идентично вызову history.go(-1) , т.е. загружает следующую страницу, если она есть в истории. Можно использовать вместе с history.back() .

Кнопка возврата назад на PHP

Данный способ подходит для сайтов на PHP, в том числе и для WordPress. Установите этот код в файл с расширением .php в том месте, где требуется вывести кнопку:

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

Кнопка перехода «Назад» с дочерних страниц на родительскую для WordPress

Если стоит задача установить на дочерних страницах кнопку «вернуться назад» с URL-адресом родительской страницы, скопируйте и вставьте в файл page.php этот код:

Где использовать кнопку «назад»

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

Отправить донат автору

Картой или Qiwi

Оставьте комментарий

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

Для публикации кода в комментариях используйте следующие шорткоды —
[php]ваш код[/php] — для PHP, [css]ваш код[/css] — для CSS, [code lang=»js»]ваш код[/code] — для HTML или JS, указав соответствующий lang.

Из последнего

Как удалить часть шаблона в редакторе сайта WordPress

Если неиспользуемая часть шаблона в редакторе сайта WP не удаляется и появляется уведомление «Подходящий маршруту …

Как передать IP посетителей в Яндекс Метрику и Google Аналитику

Рассмотрим два варианта передачи IP посетителей сайта в Яндекс Метрику и Google Аналитику: через код …

Оптимизация сайта WP с плагином LiteSpeed и QUIC.cloud

Из этой статьи вы узнаете, как на сайте WordPesss настроить плагин LiteSpeed и CDN от …

Какие права доступа к файлам и папкам WordPress нужно установить и как исправить ошибку failed (13: Permission denied)

Стандартными правами для большинства CMS, в том числе и для WordPress, являются права доступа 755 …

Как установить XAMPP и WordPress на домашний компьютер

Из этой пошаговой инструкции вы узнаете, как установить локальный веб-сервер XAMPP на операционную систему Windows, …

Как сделать кнопку назад или как вернуться на предыдущую страницу? HTML и JS

Как сделать кнопку назад или как вернуться на предыдущую страницу средствами HTML и JS? В данной статье мы рассмотрим многие решения и примеры с функцией history в js.

Код HTML и JS

Как сделать кнопку, которая вернёт на 2 и более страниц назад?

У функции back есть значение. Например, указав, ‘-2’ — пользователь возвращается на 2 страницы назад. Смотрим пример:

Код HTML и JS

И да — ссылкой может быть и изображение, и блок и тд.

Код HTML и JS

Как автоматически переслать пользователя назад? JS

Для этого достаточно перед закрывающим head написать

Код HTML и JS

. 
 

Другие функции с history в js

Обновить, назад, вперёд.

Код HTML и JS

Обновить 
Вперёд 
Назад 
Вперёд

Спасибо за внимание! Вопрос частый! Надеюсь многим поможет!)

Как сделать кнопку назад в html

Во всех современных браузерах есть кнопка «Back», которая позволяет пользователю повторно просмотреть те страницы, которые он уже видел раньше.

Также существует кнопка «Refresh», которая позволяет «обновить» страницу, которую пользователь просматривает.

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

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

Страницы бывают двух видов: статические и динамические (последние еще иногда называют скриптами). Статическая страница всегда выглядит для пользователя одинаково. Динамическая страница, как правило, выглядит по-разному в зависимости от того, какие данные были переданы от браузера серверу. Мы поговорим о том, как эти данные передаются, когда будем рассказывать об отличии методов GET и POST.

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

• адрес страницы (который ещё называют Universal Resource Locator — URL),
• зарезервированное слово HTTP-протокола (GET или POST), которое сообщает серверу, что именно пользователь браузера хочет сделать со страницей. Дело в том, что некоторые браузеры позволяют своим пользователям не только просматривать страницы с сервера, но и заменять их другими страницами по своему усмотрению или даже удалять. Разумеется, сервер не каждому пользователю позволит изменять или удалять страницы. Это зарезервированное слово называется «метод» или «метод протокола http». Методы GET и POST используются для получения страницы с сервера, при этом они могут посылать серверу дополнительные данные, которые сервер может использовать для формирования страницы. Метод GET показывает эти данные в адресной строке браузера. Они выглядят как символ «?» с какой — либо строчкой после него. Метод POST этого не делает, посылая серверу данные немного другим образом. Есть и ещё одно отличие, о нем ниже.

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

Существует индустриальный стандарт — rfc 2616 ftp://ftp.rfc-editor.org/in-notes/rfc2616.txt, который определяет, как производители браузеров должны реализовывать функциональность, в том числе и функциональность кнопки «Back». Функциональность кнопки «Refresh» не очерчена в спецификации прямо, но к ней имеют отношение разделы, посвященные кешированию (Параграфы 13.1 – 13.12 ).

При нажатии кнопки «Back» браузер должен показывать в точности ту страницу, которую пользователь уже просматривал ранее (rfc 2616, параграф 13.13) . Согласно спецификации, браузер в ответ на нажатие кнопки «Back» не должен делать запрос к скрипту, а вместо этого должен показать пользователю страницу, которую браузер «запомнил» в кеш-памяти. В таких случаях, страница, которую пользователь увидел по нажатию кнопки «Back», будет не такой, какую ему выдал бы скрипт с сервера. Это означает, что она будет содержать устаревшую информацию, которая может ввести пользователя в заблуждение.

В ситуации, описанной выше, согласно rfc 2616, браузер должен предупредить пользователя. Internet Explorer 6 показывает в таких случаях следующий текст:

Иногда автор веб приложения предпочитает не смущать пользователей этим предупреждением.

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

К сожалению, спецификация не определяет никакого способа, которым это можно было бы сделать.

Есть еще одна возможная проблема с кнопкой «Back». Пользователю будет показана устаревшая версия страницы, и, если браузер не станет предупреждать об этом, пользователь может быть введен в заблуждение.

Третья возможная проблема – браузер запросит страницу с сервера заново. Либо он перед этим покажет пользователю предупреждение «Внимание: страница устарела» или даже не будет его показывать, а просто сделает запрос.

Тогда серверное приложение получит два запроса с одинаковыми параметрами. Это может нарушить работу приложения. Например, оно повторно отправит письмо, если это приложение — почтовая система. Если повторно запрошенная страница – это страница, на которой пользователь вводит своё имя и пароль , чтобы зарегистрироваться в системе, тогда приложение фактически получит просьбу ещё раз авторизовать уже авторизованного пользователя. Это в большинстве случаев означает, что пользователю будет выдана страница с сообщением об ошибке.

Вторая и третья из перечисленных проблем в той же мере относятся и к кнопке «Refresh».

Решения проблем связанных с кнопкой «Back» отличаются от решений, которые применимы к «Refresh» из- за следующего обстоятельства. В пункте 13.13 RFC 2616 определено, что браузер не должен учитывать «просьбы» сервера не кешировать страницы, когда он показывает их в ответ на нажатие кнопки «Back». Во всех остальных случая, например, при нажатии пользователем кнопки «Refresh» браузер обязан учитывать эти «просьбы».

Поэтому проблемы, вызванные тем, что браузер после нажатия кнопки «Refresh» показывает пользователю устаревшую версию страницы, которую он взял из кеша, можно решить простым запретом кеширования.

Варианты решения проблем, связанных с кнопкой «Back»:

2. Чтобы решить проблему кнопки «Back», можно заменить те ссылки, которые содержат в себе параметры (например, “http://www.servername.com/cgi-bin/script.cgi?parameter1=1&parameter2=2”) на ссылки, которые выглядят так — «http://www.servername.com/cgi-bin/script_parameter1_1_parameter2_2.html». Каждая такая ссылка выглядит для браузера как ссылка на отдельный html файл, в нашем примере этот файл называется script_parameter1_1_parameter2_2.html. Сервер сможет извлечь из имени файла всю необходимую информацию, которую он раньше извлекал из параметров. При этом способе требуется настройка веб сервера. Проще всего это сделать с помощью страницы – обработчика ошибки 404 (page not found). Если ваш сервер – это apache (www.apache.org) то документацию по его настройке можно прочитать здесь.

Недостаток – ваш хостинг провайдер может не позволить вам настраивать его сервер по вашему вкусу.

Преимущество – работает в любых браузерах с любыми настройками.

3. При этом способе сервер иначе обрабатывает запросы. Вместо того, чтобы выдать браузеру страницу, сервер посылает ему ответ, описанный в спецификации http (rfc 2616 параграф 10.3.4) смысл которого в том, что запрошенная браузером страница находится по другому адресу, и браузер должен перенаправить свой запрос на этот адрес.

В такой ситуации большинство браузеров не сочтут полученную ими в конечном счете страницу сформированной скриптом.

Например, сервер в ответ на запрос пошлет браузеру такой http ответ:

HTTP/1.1 303 See Other
Date: Tue, 10 Jun 2003 11:41:54 GMT
Server: Apache/1.3.27 (Red Hat Linux)
Location: /new_location_for_page.html

Браузер тогда запросит с сервера страницу /new_location_for_page.html и покажет её пользователю. Он не будет считать её страницей, сформированной скриптом и, соответственно, не будет показывать пользователю предупреждений, когда тот нажмет «Back», чтобы снова посмотреть её.

Проблемы с кнопкой «Refresh» решаются проще, чем с кнопкой «Back», благодаря тому, что в случае с кнопкой «Refresh» браузер обязан учитывать HTTP-заголовки, посылаемые ему сервером, с помощью которых сервер может изменять режим кеширования, который использует браузер.

Пользователи веб-приложений чаще всего сталкиваются с проблемой, связанной с кнопкой «Refresh», следующим образом: пользователь нажимает «Refresh», чтобы обновить страницу, но к его удивлению, браузер показывает ему совсем другую страницу с текстом наподобие следующего: “Внимание, страница устарела”. Это происходит из-за того, что авторы веб-приложения запретили браузеру кешировать эту страницу. В некоторых случаях это необходимо, но чаще всего этого можно избежать. Кеширование приходится запрещать, если веб-приложение использует cookies для реализации сессий. Веб-приложению для того, чтобы узнать, изменились ли данные, которые надо показывать пользователю на странице, почти всегда требуется его сначала авторизовать, для чего используется информация из cookies. Если браузер кеширует страницу, он не будет передавать cookie серверу. В таких случаях рекомендуется запрещать кеширование не для всей страницы, а только для одного заголовка HTTP-пакета, который и содержит в себе cookie.

Для этого ответ от сервера должен содержать следующий HTTP-заголовок:

Cache-Control: no-cache= cookie,set-cookie,set-cookie2

Этот метод работает только с браузерами, поддерживающими спецификацию 1.1. Впрочем, к таковым относятся браузеры Internet Explorer и Netscape Navigator, начиная с 4-х версий.

Вторая распространенная проблема с кнопкой «Refresh» следующая:

Нажав на кнопку «Refresh» пользователь заставляет свой браузер повторно послать точно такой же запрос, который был послан ранее. Это может нарушить работу вашего приложения. Например, ваше приложение попытается вставить такие же данные в базу данных или повторно послать такое же письмо. Чтобы избежать этого, автору приложения придется переделать его следующим образом: в каждом запросе, который браузер отправляет серверу, должен быть случайный параметр, который различается в каждом запросе от браузера и формируется, например, при помощи javascript.

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

Если после этого пользователь нажмет кнопку «Refresh», сервер получит два полностью идентичных запроса. Поскольку серверное приложение знает, что каждый запрос должен отличаться от предыдущего как минимум одним случайным параметром, второй запрос в такой ситуации он может проигнорировать.

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

Copyright Vlad Demenchuk © 2000-2005