Передача переменных из webview

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

Что такое webview я описывать не буду, если вы читаете это, то наверное знаете и понимаете, что это и зачем это нужно.
Скажу лишь вкратце, что это такой объект в сфере разработки мобильных приложений, который позволяет отображать html код, то есть этакий внутренний браузер для веб страничек.

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

Если стоит задача не просто отобразить какую-то веб страничку, но и скажем передать информацию (например, что нажал юзер, куда нажал и так далее) в само приложение, то на помощь придут html якоря!:)

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

Суть довольно проста. Каждый webview элемент имеет несколько свойств, одним из этих свойств является URL (адрес страницы), его то мы и будем использовать для передачи переменных из webview в приложение.

Теперь не много про html якоря. Это такая штука, которая позволяет быстро перемещаться внутри html страницы, встречается довольно много где, и повсеместно используется, как по прямому назначению (например в википедии), так и не по не очень прямому (например на всяких аякс сайтах).

Записывается якорь через хеш #, то есть идет адрерс страницы, потом # и название якоря, получается такой хештег, для примера https://en.wikipedia.org/wiki/HTML#Markup если вы перейдете по этой ссылки на википедию, то сразу окажитесь в разделе Markup страницы посвященной HTML, вот именно #Markup тут является якорем.

Ключевой момент тут в том, что при переходе на странице по якорям, страница не перезагружается, а ее адрес фактически меняется. Понимаете к чему я веду?

Итого, если у нас в коде приложения доступно свойство текущего адреса страницы элемента вебвью, и мы из html кода самой страницы можем менять адрес, то все становится ясно, передаем нужные данные из вебвью через html якоря!

Писать конкретный код я не буду, он везде будет разный (для мобильного приложения), но html и javascript код я напишу, так как он примерно одинаковый.

Например у нас есть какие то кнопки в виде дивов, нам надо отследить нажатие этих кнопок. Тут сразу стоит отметить, что для тача есть специальные события, которые работают только с тачем, не реагируя на мышь, и в тоже время события мыши (например onmousemove) никак не будут реагировать на тач.

    Событий тача не так много
  • touchstart - начало тача
  • touchend - окончание тача
  • touchmove - передвижение нажатым пальцем
  • touchcancel - прерывание тача

Более подробно вы можете почитать про тачи тут http://www.w3.org/TR/touch-events/

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

Далее в самом приложении мы просто проверяем не поменялся ли наш адрес webview, и если поменялся получаем доступ к ее хеш части, анализируем и делаем какие то действия исходя из полученных данных.


comments powered by Disqus