Controlling and directing browser’s back button with JavaScript
In js, we sometimes use the back or forward button when switching or redirecting pages. But sometimes we need to use the browser’s back or forward buttons, and in this case, if we want to control these buttons and redirect, the goBack() function may not work.For this reason, we may need to somehow control this action (the action of pressing the browser’s back button) and direct it to the pages we want.For example, you are building a platform and you are using a form on your page where members need to enter their information, or you use a rich text editor such as Ckeditor/jodid etc and you want to display the final version of it on your next page.and after you see the final version here, you want to go back to the form page and make the necessary changes by pressing the Borwsers back button to edit the places you don’t like.Yes, you can do this by defining the goBack( ) function to the Button you have defined and designed on our own page.
But what if the user uses the browser back button? your page can go to the main page or to two previous pages if you didn’t edit it.For this reason, you should control the browser’s back button and make it act as you want. How can we do this? We can do this in two ways, at least I found these two methods, if anyone finds different methods, you can share them in the comments so that we can learn new methods together.
1-The first method is to disable the browser’s back button, that is, to prevent this process when the user wants to click the back button in the browser. In this way, the user will press the back button that we defined to go back and our goBack function will work and go to the previous page.You can use one of the following for this:
b) <a href=”javascript: history.go(-1)”>Go Back</a>
c) <a href=”##” onClick=”history.go(-1); return false;”>Go back</a>
2-The second method is to control the browser’s back button and send it to the page you want. So how do we do this? There are many articles and questions about this on Stackoverflow, you can find various answers there, but I will share with you the method that I think is the easiest and most understandable one, of course for Js.
const onBackButtonEvent = (e) => <
e.preventDefault();var currentLocation = window.location.pathname;
Now I’ll try to briefly explain what’s going on here. First of all, in order for our application to realize that the browser has pressed the back button, we add into the useEffect : window.addEventListener(‘popstate’, onBackButtonEvent); Of course, after we get what we want later, we can remove this : window.removeEventListener(‘popstate’, onBackButtonEvent);Well, there may be a question here. What happens if we don’t add => window.removeEventListener(‘popstate’, onBackButtonEvent);?As an answer, I can say that it won’t be in your mind until you try it, so even if I say yes or no, you can try the code I shared above by copying it to make it more permanent.
By doing this, => window.addEventListener(‘popstate’, onBackButtonEvent); we now know that onBackButtonEvent will work thanks to addEventListener.Now it’s time to determine what this function will do when called.
const onBackButtonEvent = (e) => <
e.preventDefault();
var currentLocation = window.location.pathname;
Here we call our function hey bro you first make e.preventDefault(); and save me a burden and then the most important thing to me is to able to go to the page I want when I press the back button of the browser.We do this by taking the URL of the page, which I will explain in detail in my next article.
var currentLocation = window.location.pathname;
In short, to summarize the situation, we filled the information from the form page and went to the preview stage, then when the user wants to use the browser’s back button instead of the button we put on the page, we direct him to the page we want, I explained it here based on the example of redirecting to the previous page, but you can redirect to the page you want).
Как сделать HTML обратную ссылку?
Каков самый простой способ создать тег <a> , который ссылается на предыдущую веб-страницу? В основном имитированная кнопка возврата, но фактическая гиперссылка. Только на клиентских технологиях.
Изменить
Ищете решения, которые имеют преимущество при показе URL-адреса страницы, на которую вы собираетесь щелкнуть, когда наведите курсор, как обычная статическая гиперссылка. Я бы предпочел, чтобы пользователь не смотрел на history.go(-1) при зависании гиперссылки. Лучшее, что я нашел до сих пор:
Является document.referrer надежным? Кросс-браузер безопасен? Я буду рад принять лучший ответ.
12 ответов
Это решение имеет преимущество отображения URL-адреса привязанной страницы при наведении курсора, как это делает большинство браузеров по умолчанию, вместо history.go(-1) или аналогичного:
И еще один способ:
Самый простой способ — использовать history.go(-1);
вы можете попробовать javascript
ИЗМЕНИТЬ
и отправьте элемент a в onmouseover, как следует
Обратная ссылка — это ссылка, которая перемещает браузер назад на одну страницу, как если бы пользователь нажал кнопку «Назад», доступную в большинстве браузеров. Обратные ссылки используют JavaScript. Он перемещает браузер на одну страницу, если ваш браузер поддерживает JavaScript (что он делает), и если он поддерживает объект window.history , который необходим для обратных ссылок.
В общем случае обратная ссылка не нужна. обычно кнопка «Назад» обычно достаточно хорошо, и обычно вы также можете просто ссылаться на предыдущую страницу на своем сайте. Однако иногда вам может потребоваться ссылка на одну из нескольких «предыдущих» страниц, а также там, где вам понадобится обратная связь. Поэтому я отсылаю вас ниже учебника, если вы хотите сделать это более продвинутым способом:
Это решение дает вам лучшее из обоих миров
- Пользователи могут навести курсор мыши на ссылку, чтобы увидеть URL-адрес
- Пользователи не получают поврежденный back-stack
Подробнее в комментариях к коду ниже.
Самый простой способ привязать ваш браузер к предыдущей странице.
Для возврата на предыдущую страницу с помощью тега <a> ниже приведены 2 метода работы, из них 1-й является более быстрым и имеет одно большое преимущество при переходе на предыдущую страницу.
Я попробовал оба метода.
Выше метод (1) отлично работает, если вы нажали на ссылку и открыли ссылку в новой вкладке в текущем окне браузера.
Выше метод (2) работает нормально только если вы нажали на ссылку и открыли ссылку в текущей вкладке в текущем окне браузера.
History: back() method
The History.back() method causes the browser to move back one page in the session history.
It has the same effect as calling history.go(-1) . If there is no previous page, this method call does nothing.
This method is asynchronous. Add a listener for the popstate event in order to determine when the navigation has completed.
Syntax
Parameters
Return value
Examples
The following short example causes a button on the page to navigate back one entry in the session history.
HTML5 History API: смена URL без перезагрузки страницы
History API представляет собой одно из интересных новшеств HTML 5. Благодаря ему появляется возможность навигации по истории одного таба браузера без перезагрузки страницы, при этом браузер корректно отрабатывает функции «назад» и «вперед».
Это дает замечательные возможности при использовании History API совместно с Ajax. Теперь нет необходимости использовать традиционную конструкцию #!, можно просто заменить URL целиком. Благодаря этому мы получаем следующие преимущества:
-
- в URL теперь отображается реальный адрес страницы, пользователи могут спокойно копировать ссылку на страницу из адресной строки браузера и распространять ее;
- отказ от конструкции #! при использовании Ajax позволяет не беспокоиться о потерянных для индексации поисковыми системами ссылках;
- ссылки просто становятся чище и красивее.
В этой статье мы кратко рассмотрим HTML5 History API и создадим простой пример с использованием плагина History.js для популярного Javascript фреймворка jQuery. В качестве примера реализуем постраничную Ajaxнавигацию на странице листинга продуктов Magento.
Обзор HTML5 History API
За работу с историей отвечает объект History. Мы можем получить этот объект для текущего таба через readonly ссылку window.history.
Основные методы и свойства объекта History:
window.history.state
Возвращает текущий объект истории. С помощью этого объекта можно получить данные, которые передаются методами pushState и replaceState путем доступа к свойствам этого объекта.
window.history.length
Свойство lenght показывает количество записей в истории.
window.history.go(n)
Переход к определенной позиции в истории, в качестве аргумента передается смещение относительно текущий позиции. Этот метод существовал до появления HTML5.
window.history.back()
Переход к предыдущему элементу в истории, идентично вызову go(- 1).
window.history.forward()
Переход к следующему элементу в истории, идентичный вызову go(1).
Методы window.history.back() и window.history.forward() также существовали до HTML5.
window.history.pushState(data, title [, url])
Добавляет новый элемент в историю. Метод принимает три параметра:
- Данные состояния истории. Эти данные можно получить затем в обработчике события popstate. Если дополнительные данные не требуются можно передавать null;
- Заголовок страницы, который отобразится в окне браузер, так же можно передавать null;
- URL, который должен отображаться в адресной строке.
Если текущий URL был http://yoursite.com/path/to/page.html, то он будет заменен на http://yoursite.com/path/to/myurl.html, как если бы мы перешли по ссылке обычным способом.
URL, передаваемый третьим параметром, может быть как относительным так и абсолютными, но использование Ajax накладывает ограничение на использование только текущего домена.
window.history.replaceState(data, title [, url])
Этот метод очень похож на pushState и имеет те же параметры. Отличие заключается в том, что данный метод не добавляет новую запись, а изменяет текущую запись в истории.
Это событие срабатывает при переход от одного элемента истории к другому. При этом history.pushState() и history.replaceState() не приводят к вызову этого события. Только нажатие кнопок вперед/назад в браузере, либо вызов history.back() или аналогичной функции в Javascript.
Поддержка браузерами
History Api и jQuery
Существует интересный плагин History.js, который предоставляет единый интерфейс для всех популярных браузеров для работы с историей просмотра. Он базируется на HTML5 History API и содержит практически те же самые методы, что и объект window.history. Используя данный плагин, можно не беспокоиться о работе скрипта в старых браузерах. Если браузер не имеет поддержки History API, то для его эмуляции будет использован # (якорь URL).
Для обращения к функциям плагина используется объект History. Например, вызов функции History.pushState(data,title,url) практически аналогичен вызову history.pushState. Детально ознакомиться с Api плагина можно на его сайте. Однако, есть 2 момента, на которые стоит обратить внимание:
- Плагин использует собственное событие «statechange» вместо стандартного «popstate» для определения момента перехода по истории;
- Методы History.pushState и History.replaceState приводят к вызову события «statechange», тогда как аналогичные методы объекта window.history нет.
Живой пример
Для демонстрации работы плагина добавим Ajax с динамической сменой URL к стандартной постраничной навигации продуктов Magento.
Скачать плагин можно по этой ссылке https://github.com/browserstate/history.js/ . Нам потребуется только один файл jquery.history.js из папки scripts/bundled/html4+html5 (минимизированная версия с поддержкой HTML4). Подключаем файл плагина и библиотеку jQuery, если она еще не подключена. В версии Magento 1.9.0.1, которую я использовал для этого примера, jQuery подключен по умолчанию, поэтому мне достаточно подключить только файл плагина.
Копируем jquery.history.js в папку /skin/frontend/ / /js/lib/. В моем случае это папка skin/frontend/rwd/default/js/lib/. В файле разметки page.xml текущей темы в в самый конец блока «head» добавляем:
Кроме этого, нам потребуется отдельный файл для инициализации плагина и написания собственного кода обработчиков событий. Создадим файл main.js и так же поместим его в папку текущего скина по адресу skin/frontend/ / /js/.
Подключаем файл main.js:
В файл main.js добавляем следующий код:
Мы использовали именно такой синтаксис для избежания конфликтов с библиотекой Prototype, которую Magento использует по умолчанию.
Мы добавили обработчик события «click» на ссылки постраничной навигации и отменили стандартное поведение ссылок с помощью метода e.preventDefault. Затем мы используем History.pushState для добавления нового элемента в историю и в фоновом режиме загружаем новую страницу с помощью функции loadPage.
Этот код загружает страницу по указанному URL с помощью Ajax и помещает в элемент $categoryProducts содержимое блока с классом ‘.category-products’.
Рассмотрим подробнее вызов метода History.pushState.
Первым параметром передаем null, так как нам не требуется передавать дополнительные параметры в объект State. Вторым параметром передаем текущий заголовок документа, поскольку при переходе на следующую страницу нам не нужно менять заголовок. И третьим параметром передаем новый URL — ссылка, на которую нажал пользователь.
Для проверки работы этого примера нужно зайти в любую категорию с товарами, где количество товаров достаточно для появления постраничной навигации, и перейти на любую другую страницу. После этого URL в адресной строке заменяется на новый, как если бы мы перешли по этому URL, и после небольшой паузы подгружаются товары с новой страницы.
Наш пример справляется со своей задачей, однако при нажатии кнопки «назад» в браузере ничего не происходит. Для обработки события перехода истории нам требуется назначить обработчик на событие «statechange».
Поскольку событие «statechange» срабатывает всякий раз, когда происходит переход по истории, нам больше не требуется вызывать функцию loadPage после History.pushState.
После внесения необходимых правок, наш код выглядит следующим образом:
Теперь при нажатии в браузере кнопок вперед/назад срабатывает событие «statechange» и содержимое страницы корректно обновляется. Для наглядного отображения процесса загрузки немного изменим функцию loadPage, добавив изменение прозрачности блока с продуктами на время загрузки контента.
На этом наш простой пример завершен. Как видите, использование History API не представляет особых сложностей. Вы легко можете использовать красивые URL в Ваших Ajax-приложениях, не боясь проблем с поисковиками, а использованный в примере плагин позволит избежать проблем в старых браузерах.