Js событие назад в браузере
Почему на земле нет кнопок браузера, запускающих собственные события!?
ОТВЕТЫ
Ответ 1
(Примечание. Согласно обратной связи Sharky, я включил код для обнаружения обратных пространств)
Большинство людей рекомендуют использовать:
Однако эта функция также вызывается, когда пользователь использует элемент внутри страницы, который изменяет хэш местоположения. Не лучший пользовательский интерфейс, когда пользователь нажимает, а страница идет назад или вперед.
Чтобы дать вам общую схему моей системы, я заполняю массив предыдущими хэшами, когда мой пользователь перемещается по интерфейсу. Это выглядит примерно так:
Довольно прямо. Я делаю это, чтобы обеспечить кросс-браузерную поддержку, а также поддержку старых браузеров. Просто передайте новый хэш функции, и он сохранит его для вас, а затем изменит хэш (который затем помещается в историю браузера).
Я также использую кнопку возврата на странице, которая перемещает пользователя между страницами с помощью массива lasthash . Это выглядит так:
Итак, это вернет пользователя к последнему хэшу и удалит последний хэш из массива (у меня нет прямой кнопки прямо сейчас).
Итак. Как определить, использовал ли пользователь мою кнопку возврата на странице или кнопку браузера?
Сначала я посмотрел на window.onbeforeunload , но безрезультатно - это только вызывается, если пользователь собирается менять страницы. Это не происходит в одностраничном приложении с использованием хэш-навигации.
Итак, после некоторого дополнительного копания, я увидел рекомендации по попытке установить переменную флага. Проблема с этим в моем случае заключается в том, что я попытаюсь установить его, но поскольку все будет асинхронным, оно не всегда будет установлено во времени для оператора if в изменении хэша. .onMouseDown не всегда вызывался кликом, а добавление его в onclick не вызывало бы его достаточно быстро.
Это когда я начал смотреть на разницу между document и window . Моим окончательным решением было установить флаг с помощью document.onmouseover и отключить его с помощью document.onmouseleave .
Что происходит, когда пользовательская мышь находится внутри области документа (читайте: отображаемая страница, но исключая рамку браузера), мое логическое значение имеет значение true . Как только мышь покидает область документа, логическое значение переворачивается до false .
Таким образом, я могу изменить свой window.onhashchange на:
Итак, короче говоря, для людей, которые не обязательно используют кнопку возврата на странице или массив для хранения истории:
И у вас это есть. простой, трехкомпонентный способ обнаружения использования кнопки обратной связи и элементов на странице в отношении хеш-навигации.
Чтобы гарантировать, что пользователь не будет использовать backspace для запуска события back, вы также можете включить следующее (Спасибо @thetoolman на этот вопрос):
Ответ 2
Вы можете попробовать popstate обработчик событий, например:
Примечание. Для достижения наилучших результатов вы должны загрузить этот код только на определенных страницах, где вы хотите реализовать логику, чтобы избежать любых других непредвиденных проблем.
Событие popstate запускается каждый раз, когда изменяется текущая запись истории (пользователь переходит в новое состояние). Это происходит, когда пользователь нажимает кнопки браузера Back/Forward или когда методы history.back() , history.forward() , history.go() запрограммированы.
Свойство event.state является событием, равным объекту состояния истории.
Для синтаксиса jQuery оберните его (чтобы добавить даже слушателя после того, как документ готов):
Это должно быть совместимо с Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ и т.д.
Ответ 3
Я довольно долго боролся с этим требованием и принял некоторые из решений выше, чтобы реализовать его. Тем не менее, я наткнулся на наблюдение и, похоже, работает в браузерах Chrome, Firefox и Safari + Android и iPhone.
Загрузка на страницу:
Сообщите мне, если это поможет. Если я что-то упустил, я буду рад понять.
Ответ 4
В javascript тип навигации 2 означает, что браузер нажимает кнопку "назад" или "вперед", и браузер фактически берет контент из кэша.
Ответ 5
Это определенно будет работать (для обнаружения нажатия кнопки назад)
Ответ 6
Ответ 7
Вот мой взгляд на это. Предполагается, что при изменении URL-адреса, но не обнаружено клика внутри обнаруженного document , это браузер назад (да или вперед). Пользовательский щелчок reset через 2 секунды, чтобы сделать эту работу на страницах, загружающих контент через Ajax:
Ответ 8
добавил этот код внизу страницы. см. эту кнопку обнаружения браузера baa
Ответ 9
Ответ 10
Правильный ответ уже есть, чтобы ответить на вопрос. Я хочу упомянуть новый JavaScript API PerformanceNavigationTiming, он заменил устаревший performance.navigation.
Следующий код будет входить в консоль "back_forward", если пользователь зашел на вашу страницу с помощью кнопки назад или вперед. Посмотрите на таблицу совместимости, прежде чем использовать ее в своем проекте.
Ответ 11
document.mouseover не работает для IE и FireFox. Однако я пробовал это:
Это работает для Chrome и IE, а не для FireFox. Все еще работаю над тем, чтобы получить FireFox. Любой простой способ обнаружения щелчка мыши назад/вперед браузера приветствуется, особенно не в JQuery, а также в AngularJS или в простом Javascript.
Ответ 12
Ответ 13
Я смог использовать некоторые ответы в этой теме и другие, чтобы заставить его работать в IE и Chrome/Edge. history.pushState для меня не поддерживается в IE11.
Ответ 14
Ответ 15
Это единственное решение, которое сработало для меня (это не одностраничный сайт). Работает с Chrome, Firefox и Safari.
Ответ 16
Я пробовал вышеуказанные параметры, но ни один из них не работает для меня. Вот решение
Почему же кнопки браузера не запускают свои собственные события !?
(Примечание: согласно отзывам Шарки, я включил код для обнаружения возврата)
Итак, я часто видел эти вопросы в SO, и недавно я столкнулся с проблемой управления функциональностью кнопки «назад». После нескольких дней поиска наилучшего решения для моего приложения («Одностраничная с хэш-навигацией») я разработал простую кросс-браузерную систему без библиотек для обнаружения кнопки «назад».
Большинство людей рекомендуют использовать:
Однако эта функция также будет вызываться, когда пользователь использует элемент на странице, который изменяет хэш расположения. Не лучший пользовательский опыт, когда ваш пользователь нажимает и страница перемещается назад или вперед.
Чтобы дать вам общее представление о моей системе, я заполняю массив предыдущими хэшами, когда мой пользователь перемещается по интерфейсу. Это выглядит примерно так:
Довольно прямо вперед. Я делаю это для обеспечения кросс-браузерной поддержки, а также поддержки старых браузеров. Просто передайте новый хеш функции, и он сохранит его для вас, а затем изменит хеш (который затем заносится в историю браузера).
Я также использую кнопку возврата на странице, которая перемещает пользователя между страницами с помощью массива lasthash . Это выглядит так:
Так что это вернет пользователя к последнему хешу и удалит этот последний хеш из массива (у меня сейчас нет кнопки вперед).
Так. Как определить, использовал ли пользователь мою кнопку возврата на странице или кнопку браузера?
Сначала я посмотрел на window.onbeforeunload , но безрезультатно - он вызывается только в том случае, если пользователь собирается менять страницы. Этого не происходит в одностраничном приложении, использующем хеш-навигацию.
Итак, после еще нескольких копаний я увидел рекомендации по установке переменной-флага. Проблема с этим в моем случае заключается в том, что я попытался бы установить его, но, поскольку все является асинхронным, он не всегда будет установлен вовремя для оператора if в изменении хеша. .onMouseDown не всегда вызывался в щелчке, и добавление его в onclick никогда не вызовет его достаточно быстро.
Это когда я начал смотреть на разницу между document и window . Мое окончательное решение состояло в том, чтобы установить флаг, используя document.onmouseover , и отключить его, используя document.onmouseleave .
Что происходит, когда мышь пользователя находится внутри области документа (читай: отображаемая страница, но исключая фрейм браузера), мой логический параметр установлен в true . Как только мышь покидает область документа, логическое значение переходит на false .
Таким образом, я могу изменить свой window.onhashchange на:
Итак, вкратце, и для людей, которые не обязательно используют кнопку возврата на странице или массив для хранения истории:
Чтобы убедиться, что пользователь не использует backspace для запуска события back, вы также можете включить следующее (благодаря @thetoolman на этот вопрос):
У меня есть приложение AJAX. Пользователь нажимает кнопку, и отображение страницы изменяется. Они нажимают кнопку «назад», ожидая перехода в исходное состояние, но вместо этого переходят на предыдущую страницу в своем браузере.
Ах, кнопка назад. Вы можете вообразить, что «back» запускает событие JavaScript, которое вы можете просто отменить следующим образом:
Нет так. Там просто нет такого события.
Если у вас действительно есть веб-приложение (в отличие от просто веб-сайта с некоторыми функциями ajaxy), разумно взять на себя кнопку возврата (с фрагментами в URL, как вы упомянули). Gmail делает это. Я говорю о том, когда ваше веб-приложение все на одной странице, все автономно.
Техника проста - всякий раз, когда пользователь предпринимает действия, которые изменяют вещи, перенаправляйте на тот же URL, на котором вы уже находитесь, но с другим фрагментом хеша. Например.
Если общее состояние вашего веб-приложения можно изменить, это отличное место для использования хэша. Скажем, у вас есть список электронных писем, может быть, вы объедините все их идентификаторы и прочитанные / непрочитанные статусы и возьмете хэш MD5, используя его в качестве идентификатора фрагмента.
Теперь самое сложное - заставить ваш JavaScript определять, когда пользователь наносит ответный удар (так что вы можете вернуть состояние). Все, что вам нужно сделать, это посмотреть расположение окна и посмотреть, когда оно изменится. С опросом. (Я знаю, черт, опрос. Ну, нет ничего лучше кроссбраузерного прямо сейчас). Вы не сможете определить, продвинулись ли они вперед или назад, поэтому вам придется проявить творческий подход к своим хеш-идентификаторам. (Возможно, хэш объединен с порядковым номером . )
Это суть кода. (Так же работает плагин jQuery History.)
Кнопка возврата в браузерах обычно пытается вернуться к предыдущему адресу. в javascript браузера отсутствует событие нажатия кнопки возврата на собственном устройстве , но вы можете взломать его, поиграв с местоположением и хэшем, чтобы изменить состояние приложения.
Представьте простое приложение с двумя видами:
- вид по умолчанию с кнопкой извлечения
- просмотр результатов
Чтобы реализовать это, следуйте этому примеру кода:
Проблема, с которой у меня возникли другие ответы, заключается в том, что событие hashchange не будет запущено. В зависимости от вашей ситуации, это может работать и для вас.
Я делаю что-то вроде этого. Я держу массив с предыдущими состояниями приложения.
Затем я слушаю изменения в хеше местоположения, и когда он меняется, я делаю это:
Таким образом, у меня есть несколько простой способ отслеживать историю пользователей. Теперь, если я хочу реализовать кнопку возврата в приложении (а не в браузере-боттоне), я просто заставлю это сделать:
Это создаст новую запись в стеке истории браузера. Ряд библиотек AJAX уже обрабатывают все скучные детали, такие как Действительно простая история.
Я разработал способ переопределения нормального поведения истории и создания отдельных событий кнопок back и forward , используя API истории HTML5 (он не будет работать в IE 9). Это очень забавно, но эффективно, если вы хотите перехватывать события кнопок «назад» и «вперед» и обрабатывать их так, как хотите. Это может быть полезно в ряде сценариев, например, если вы отображали окно удаленного рабочего стола и нуждались в воспроизведении нажатий кнопок «назад» и «вперед» на удаленном компьютере.
Следующее переопределяет поведение кнопок «назад» и «вперед»:
Если вы вернули false в любой из этих функций обратного вызова, вы бы позволили браузеру продолжить обычную операцию возврата / пересылки и покинуть свою страницу.
Вот полный скрипт, необходимый:
Это работает по простой концепции. Когда наша страница загружается, мы создаем 3 разных состояния истории (с номерами 1, 2 и 3) и переходим в браузер к состоянию номер 2. Поскольку состояние 2 находится в середине, следующее событие навигации по истории переведет нас в состояние 1 или 3, и из этого мы можем определить, в каком направлении нажал пользователь. И вот так, мы перехватили событие кнопки назад или вперед. Затем мы обрабатываем его так, как хотим, и возвращаемся в состояние номер 2, чтобы мы могли зафиксировать следующее событие истории навигации.
Очевидно, вам нужно будет воздержаться от использования методов history.replaceState и history.pushState при использовании сценария HistoryButtonOverride, иначе вы бы сломали его.
Отключить кнопку НАЗАД браузера очень просто, как показано в приведенном ниже коде JQuery:
Вы можете увидеть, как это работает, и другие примеры здесь dotnsf и здесь thecssninja
Я действительно ценю объяснение, приведенное в ответ darkporter, но я думаю, что его можно улучшить, используя " hashchange "событие. Как объяснил darkporter, вы хотите убедиться, что все ваши кнопки изменяют значение window.location.hash.
Затем вам нужно всего лишь добавить этот бит кода, который будет срабатывать при каждом изменении значения хеша (включая при нажатии кнопки назад ). Кажется, нет необходимости в опросе.
Используя jQuery, я сделал простое решение:
Пока что проверено только в Google Chrome.
Это решило проблему для моего веб-приложения, которое также основано на AJAX.
Это, возможно, немного хакерски - но я бы назвал это элегантным взломом ;-) Всякий раз, когда вы пытаетесь перейти назад, он добавляет хеш-часть в URI, которая технически то, что он затем пытается перейти назад.
Он перехватывает как нажатие кнопки браузера, так и кнопки мыши. И вы не можете перебить его задом наперед, щелкая несколько раз в секунду, что является проблемой, возникающей в решениях, основанных на setTimeout или setInterval.
Чтобы дать актуальный ответ на старый (но популярный) вопрос:
Could someone please share experience / code how we can detect the browser back button click (for any type of browsers)?
We need to cater all browser that doesn't support HTML5
11 Answers 11
The 'popstate' event only works when you push something before. So you have to do something like this:
For browser backward compatibility I recommend: history.js
"The 'popstate' event only works when you push something before." This is GOLDEN! There are many examples out there, but the most important bit is this exact quote!
In javascript, navigation type 2 means browser's back or forward button clicked and the browser is actually taking content from cache.
This no longer works. perfermance.navigation.type just gives a value of 0 and has been deprecated and its alternative is not supported by all browsers.
there are a lot of ways how you can detect if user has clicked on the Back button. But everything depends on what your needs. Try to explore links below, they should help you.
Detect if user pressed "Back" button on current page:
Detect if current page is visited after pressing "Back" button on previous("Forward") page:
Found this to work well cross browser and mobile back_button_override.js .
(Added a timer for safari 5.0)
Works like a charm on Firefox, but for some reason it doesn't always work on Chrome :/. Any suggestions on how to improve it to work on Chrome?
In case of HTML5 this will do the trick
You can use this awesome plugin
All you need to do is to write this code
In my case I am using jQuery .load() to update DIVs in a SPA (single page [web] app) .
Being new to working with $(window).on('hashchange', ..) event listener , this one proved challenging and took a bit to hack on. Thanks to reading a lot of answers and trying different variations, finally figured out how to make it work in the following manner. Far as I can tell, it is looking stable so far.
- If location.hash has the same value, it means Going Forward
- If location.hash has different value, it means Going Back
I realize using global vars isn't the most elegant solution, but doing things OO in JS seems tricky to me so far. Suggestions for improvement/refinement certainly appreciated
Set Up:
When calling .load() to update the DIV, update the global var as well :
On page ready, set up the listener to check the global var to see if Back Button is being pressed:
How do you definitively detect whether or not the user has pressed the back button in the browser?
Why on earth don't browser back buttons fire their own events!?
19 Answers 19
(Note: As per Sharky's feedback, I've included code to detect backspaces)
So, I've seen these questions frequently on SO, and have recently run into the issue of controlling back button functionality myself. After a few days of searching for the best solution for my application (Single-Page with Hash Navigation), I've come up with a simple, cross-browser, library-less system for detecting the back button.
Most people recommend using:
However, this function will also be called when a user uses on in-page element that changes the location hash. Not the best user experience when your user clicks and the page goes backwards or forwards.
To give you a general outline of my system, I'm filling up an array with previous hashes as my user moves through the interface. It looks something like this:
Pretty straight forward. I do this to ensure cross-browser support, as well as support for older browsers. Simply pass the new hash to the function, and it'll store it for you and then change the hash (which is then put into the browser's history).
I also utilise an in-page back button that moves the user between pages using the lasthash array. It looks like this:
So this will move the user back to the last hash, and remove that last hash from the array (I have no forward button right now).
So. How do I detect whether or not a user has used my in-page back button, or the browser button?
At first I looked at window.onbeforeunload , but to no avail - that is only called if the user is going to change pages. This does not happen in a single-page-application using hash navigation.
So, after some more digging, I saw recommendations for trying to set a flag variable. The issue with this in my case, is that I would try to set it, but as everything is asynchronous, it wouldn't always be set in time for the if statement in the hash change. .onMouseDown wasn't always called in click, and adding it to an onclick wouldn't ever trigger it fast enough.
This is when I started to look at the difference between document , and window . My final solution was to set the flag using document.onmouseover , and disable it using document.onmouseleave .
What happens is that while the user's mouse is inside the document area (read: the rendered page, but excluding the browser frame), my boolean is set to true . As soon as the mouse leaves the document area, the boolean flips to false .
This way, I can change my window.onhashchange to:
So, in short, and for people that aren't necessarily using an in-page back button or an array to store the history:
And there you have it. a simple, three-part way to detect back button usage vs in-page elements with regards to hash navigation.
To ensure that the user doesn't use backspace to trigger the back event, you can also include the following (Thanks to @thetoolman on this Question):
Читайте также: