Javascript-форум (https://javascript.ru/forum/)
-   Мобильный JavaScript (https://javascript.ru/forum/mobile/)
-   -   backbutton на смартфоне - как достучаться? (https://javascript.ru/forum/mobile/57740-backbutton-na-smartfone-kak-dostuchatsya.html)

Маэстро 17.08.2015 18:14

backbutton на смартфоне - как достучаться?
 
Есть на смартфонах сенсорная кнопка внизу экрана (на пластмассе). Вроде как называется "backbutton". Как можно в браузере ловить событие её нажатия?
Ведет она себя по-разному:
1. если на экране модальное окно, то её нажатие аналогично клавише Esc как на клавиатуре.
2. если модального окна нет, то срабатывает как кнопка "Back" в браузере, что приводит к перезагрузке страницы.
А мне не надо перезагрузки.. У меня аджакс-приложение.

По теме нашел некий фреймворк PhoneGap http://phonegap.com с библиотекой Cordova но мутно как-то там всё это..
Может кто-то знает как попроще?
Подскажите, пожалуйста.

Маэстро 18.08.2015 15:48

Разобрался.
По этой сенсорной кнопке в браузере не возникают никакие события типа ontouch или onkeydown. Однако, при нажатии этой кнопки меняется window.location.hash. А если изменилось значение hash, то возникает событие onhashchange.

Идея заключается в том, чтобы перед показом на экране своей псевдомодальной диалоговой панели (например, Меню) прописать в hash некое "секретное" слово. Оно изменится при нажатии backbutton и сработает событие onhashchange, которое мы ловим.

function openmenu()
{
// ... показываем панель на экране
window.location.hash = 'menu';
};

function closemenu()
{
// ...скрываем меню
window.location.hash = '';
};

window.onhashchange = function()
{
 var s = window.location.hash.toString();
 if (s != '#menu')
  {
  // ... проверить наличие панели и видимость её на экране
  // ... скрыть панель
  }
};

Но при манипуляции hash в адресной строке браузера к тексту добавляется секретное слово "#menu", что не всем понравится.
Что хуже, при стирании (hash = '') в адресной строке остается символ #. И лично мне такое совсем не нравится.
Поэтому надо использовать histAPI:
function openmenu()
{
// ... 
history.pushState('', document.title, window.location.pathname + '#menu');
};

function closemenu()
{
// ...
history.pushState('', document.title, window.location.pathname);
};


На закуску вопрос: backbutton - это внизу справа. Но на смартфоне есть аналогичная кнопка внизу слева, которая в основном вызывает стандартное меню. Вот как её перехватить в браузере? ;)


Часовой пояс GMT +3, время: 04:10.