Допустим, у всех нас есть отношения любви-ненависти с WebViews. Мы не можем жить с ними и не можем жить без них. Хотя использование WebView ухудшает работу пользователя с приложением, в некоторых случаях мы не можем обойтись без него. Поэтому, несмотря на нежелание, мы в конечном итоге используем WebView в нашем приложении.

В этом посте я постараюсь осветить следующие моменты, касающиеся WebView.

  • Загрузите локальный файл HTML в WebView с базовыми настройками WebView.
  • Обработка обратных вызовов Javascript от Javascript к клиенту.
  • Сделайте обратные вызовы Javascript от клиента к Javascript.
  • Установите WebViewClient на WebView
  • Отладка WebView

Демо-приложение:

Для этого поста я буду использовать демонстрационное приложение. Приложение имеет одну WebActivity, внутри которой загружен WebView. Страница html, загруженная в WebView, имеет 2 кнопки. (См. Изображение 1)

  • Нажмите, чтобы отобразить всплывающее сообщение. Эта кнопка выполняет обратный вызов javascript вместе со строкой, которая будет отображаться как тост в клиенте. (См. Изображение 2)
  • Кнопка Нажмите, чтобы загрузить текст в WebView. Эта кнопка выполняет обратный вызов javascript в клиенте. Получив обратный вызов, клиент вызовет функцию Javascript, которая установит текст внутри html. (См. Изображение 3).

Вступление

Чтобы использовать WebView, объявите следующий код в XML-файле.

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

setJavaScriptEnabled (boolean enabled)
Эта функция определяет, может ли клиент получать обратные вызовы от Javascript, а клиент может выполнять вызовы функций Javascript. Если установлено значение false, между клиентом и страницей Js / html не будет связи.

setCacheMode (режим int)
Эта функция - одна из наиболее важных функций для определения того, как будет работать WebView. Если отображаемая html-страница представляет собой статический HTML-код или HTML-код с ресурсами, которые с меньшей вероятностью изменятся с течением времени, то очень желательно включить кеширование для HTML-страницы. Обратитесь к этому методу, чтобы увидеть различные типы кеширования, доступные для веб-страниц.

setVerticalScrollBarEnabled (boolean enabled)
Как следует из названия, эта функция включает или отключает вертикальную прокрутку в WebView.

setHorizontalScrollBarEnabled (boolean enabled)
Как следует из названия, эта функция включает или отключает горизонтальную прокрутку в WebView.

setUseWideViewPort (включено логическое значение)
Если установлено значение true, страница html примет свой собственный размер. т.е. ширина и высота, объявленные на странице html. Если установлено значение false, страница будет содержать в пределах размеров устройства.

На основе вышеуказанных настроек мы инициализируем наш WebView.

Клиент, получающий обратные вызовы от Javascript:

Чтобы клиент мог получать обратные вызовы от Javascript, внутри него должен быть класс интерфейса Javascript, который будет реализовывать обратные вызовы. Обратные вызовы должны иметь то же имя и такое же количество аргументов, что и вызываемые через Javascript. Кроме того, все эти обратные вызовы должны быть аннотированы аннотацией @ JavascriptInterface. Без этой аннотации методы не будут вызываться. В приведенном ниже классе я объявил две функции handleMessage () и setWebViewTextCallback (), которые будут вызываться Javascript.

WebView добавляет такой интерфейс Javascript.

webView.addJavascriptInterface(new WebViewJsInterface(webView), "handler");

Вторым аргументом addJavascriptInterface будет обработчик, через который Javascript будет вызывать функции, реализованные в клиенте.

В Javascript реализованы следующие функции:

Поэтому, как только пользователь нажимает первую кнопку, в javascript будет выполнен следующий фрагмент кода.
handler.handleMessage (' Это всплывающее сообщение от Javascript !! ')

Поскольку handleMessage () реализован на клиенте, этот метод будет вызван, и будет отображено всплывающее сообщение.

Клиент, выполняющий вызовы функций в Javascript

Бывают случаи, когда клиент хочет вызвать функции Javascript. Предположим, у нас есть функция setText (), реализованная в нашем файле Javascript.

Чтобы вызвать эту функцию, нам нужно создать String, а затем вызвать функцию WebView со строковым аргументом. Строка построена следующим образом
functionName (Object… params).
Поэтому, если нам нужно вызвать указанную выше функцию, мы должны передать setText ('Это текст из Android, который задается на html-странице. ') в качестве аргумента.

Я написал служебную функцию, которая принимает имя вызываемой функции и параметры и возвращает сценарий.

Наконец, когда мы получаем строку, мы вызываем функцию WebView. Теперь, в зависимости от уровня API, нам нужно вызвать две разные функции.

Для уровня API 18 и ниже: нам нужно вызвать функцию loadUrl.
webView.loadUrl (javascript: + скрипт);

Для API уровня 19 и выше: нам нужно вызвать метод AssessmentJavascript. Эта функция принимает аргумент и дополнительно возвращает значение, возвращаемое вызывающим методом.

Я написал служебную функцию, которая принимает аргумент String для вызова и на основе уровня API Android вызывает соответствующую функцию.

Установите WebViewClient на WebView

С помощью WebViewClient клиент получает больше контроля над загружаемой веб-страницей. Клиент может получать различные обратные вызовы, например, когда WebView начал загрузку, когда WebView загружается и т. Д. Всегда рекомендуется расширять WebViewClient, а затем присоединять его к WebView.

В целях демонстрации я переопределяю несколько функций WebViewClient и помещаю их в журналы. В реальных приложениях эти переопределенные функции будут использоваться для гораздо большего.

Теперь установите клиент WebView следующим образом:

webView.setWebViewClient(new CustomWebViewClient());

Отладка WebView

Мы можем отлаживать WebView в инструментах разработчика Chrome как обычную веб-страницу. Чтобы включить отладку WebView, нам нужно добавить следующий код.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

Теперь, когда приложение запущено, откройте chrome: // inspect / # devices и выберите соответствующий WebView, и все готово. Подробнее об отладке WebView читайте в этой статье.

Хостинг проекта размещен на Github.
Спасибо, что прочитали статью. Если вы нашли статью полезной, порекомендуйте ее.

Ознакомьтесь с моими другими проектами Github здесь и другими моими статьями по среде здесь. Также давайте подключимся к LinkedIn.

Чтобы узнать больше о программировании, подпишитесь на Mindorks, чтобы получать уведомления, когда мы будем писать новые сообщения.

Присоединяйтесь к сообществу Mindorks и учитесь друг у друга.