Android webview javascript

WebView — создай свой браузер

Android позволяет создать собственное окно для просмотра веб-страниц или даже создать свой клон браузера при помощи элемента WebView. Сам элемент использует движок WebKit и имеет множество свойств и методов. Мы ограничимся базовым примером создания приложения, с помощью которого сможем просматривать страницы в интернете. В последних версиях используется движок от Chromium, но большой разницы в этом нет для простых задач.

Создадим новый проект MyBrowser и сразу заменим код в файле разметки res/layout/activity_main.xml:

Теперь откроем файл активности MainActivity.java и объявим компонент WebView, а также инициализируем его — включим поддержку JavaScript и укажем страницу для загрузки.

Так как приложение будет использовать интернет, необходимо установить разрешение на доступ к интернету в файле-манифесте.

Там же в манифесте модифицируем строчку для экрана, удалив заголовок из нашего приложения (выделено жирным):

Запустим приложение. В нашем распоряжении появился простейший вьювер веб-страниц, но с одним недостатком. Если вы щёлкнете на любой ссылке, то у вас автоматически запустится браузер по умолчанию и новая страница отобразится уже там. Точнее так было раньше. На новых устройствах при запуске приложения сразу открывается браузер.

Чтобы решить данную проблему и открывать ссылки в своей программе, нужно переопределить класс WebViewClient и позволить нашему приложению обрабатывать ссылки. Добавим в коде вложенный класс:

Затем в методе onCreate() определим экземпляр MyWebViewClient. Он может находиться в любом месте после инициализации объекта WebView:

Теперь в нашем приложении создан WebViewClient, который позволяет загружать любой указанный URL, выбранный в WebView, в сам контейнер WebView, а не запускать браузер. За данную функциональность отвечает метод shouldOverrideUrlLoading(WebView, String), в котором мы указываем текущий WebView и нужный URL. Возвращаемое значение true говорит о том, что мы не нуждаемся в запуске стороннего браузера, а самостоятельно загрузим контент по ссылке. В версии API 24 добавили перегруженную версию метода, учитывайте это обстоятельство.

Повторно запустите программу и убедитесь, что ссылки загружаются теперь в самом приложении. Но теперь возникла ещё одна проблема. Мы не можем вернуться к предыдущей странице. Если мы нажмём на кнопку BACK (Назад) на своем устройстве, то просто закроем свое приложение. Для решения новой проблемы нам необходимо обрабатывать нажатие кнопки BACK. Добавляем новый метод:

Мы должны проверить, что WebView поддерживает навигацию на предыдущую страницу. Если условие верно, тогда вызывается метод goBack(), который возвращает нас на предыдущую страницу на один шаг назад. Если таких страниц набралось несколько, то мы можем последовательно вернуться к самой первой странице. При этом метод всегда будет возвращать значение true. Когда мы вернёмся на самую первую страницу, с которой начали путешествие по интернету, то вернётся значение false и обработкой нажатия кнопки BACK займётся уже сама система, которая закроет экран приложения.

Запустите приложение ещё раз. У вас появился свой собственный веб-браузер, позволяющий ходить по ссылкам и возвращаться на предыдущую страницу. Изучив документацию, вы можете оснастить приложение и другим вкусными плюшками для своего браузера.

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

Универсальный метод, который все локальные ссылки откроет в приложении, остальные в браузере (меняем одну строчку):

А сейчас немного усложним пример, чтобы у пользователя появилась альтернатива стандартным браузерам.

Чтобы было понятнее, переделаем пример следующим образом. Создайте две активности. На первой активности разместите кнопку для перехода на вторую активность, а на второй активности разместите компонент WebView.

В манифесте прописываем у второй активности фильтр.

Код для кнопки для перехода на вторую активность.

Мы создали собственное намерение с указанием фильтра и предоставили данные — адрес сайта.

Вторая активность должна принять данные:

В фильтре для второй активность мы указали два действия.

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

Запустите второе приложение (первое приложение можно закрыть) и нажмите на кнопку. У вас запустится не первое приложение с начальным экраном, а сразу вторая активность с мини-браузером. Таким образом, любое приложение может запустить браузер, не зная имени класса вашей активности, а используя только строку «ru.alexanderklimov.Browser», передаваемую в Intent. При этом ваша активность с браузером должна иметь категорию по умолчанию и данные. Напомню:

Вы можете представить свою строку в виде строковой константы и сообщить всем потенциальным пользователям вашего браузера, как они могут запустить его у себя. Но в Android уже есть такая готовая константа ACTION_VIEW, которая по справке документации представляет собой следующее:

Перепишем код для кнопки у второго приложения

Что произойдёт на этот раз? Мы помним, что у нас прописано два действия, включая и android.intent.action.VIEW. А значит наше первое приложение с браузером тоже должно распознавать эту команду, когда какое-то приложение у пользователя использует этот код. На эмуляторе как минимум есть одна такая программа «Browser», и теперь к ней добавилась наша вторая активность из первого приложения. На экране появится выбор из двух приложений.

А если удалить все альтернативные браузеры и оставить только вашу программу, то и выбора не будет. Ваш браузер станет основным. И если какое-то приложение захочет запустить веб-страницу указанным способом, то откроется ваша программа.

Небольшое замечание. Если заменить последнюю строчку на такую:

То в окне выбора программы вместо верхней строки «Open with» или её локального перевода появится ваша строка. Но не это главное. Если по каким-то причинам на устройстве не окажется ни одного браузера, то данный вариант кода не вызовет краха приложения, в отличие от первоначального варианта. Поэтому используйте предложенный вариант ради надёжности.

Взаимодействие WebView с JavaScript

WebView — это компонент, с помощью которого можно отображать веб-страницы. Однако нас интересует не только показ содержимого страницы, нам нужно также взаимодействовать с этим содержимым. В этой статье мы попытаемся объяснить некоторые детали этого процесса.

Важно! Прежде всего, если вы хотите загрузить веб-страницу из Интернета, не забудьте добавить следующее разрешение в файл AndroidManifest.xml.

Есть несколько способов задать содержимое для WebView.

Класс WebSettings

Этот класс позволяет управлять настройками состояния WebView. Когда WebView создаётся, он получает набор настроек по умолчанию. Эти настройки по умолчанию можно получить с помощью вызова геттера. Объект WebSettings, полученный из webView.getSettings(), привязан к времени существования этого объекта WebView. Если WebView был уничтожен, любой вызов метода WebSettings вызовет исключение IllegalStateException.

Чтобы использовать JavaScript, нужно включить его, вызвав у объекта WebSettings метод setJavaScriptEnabled().

Класс WebViewClient

WebViewClient вызывается, когда выполняется рендеринг содержимого страницы. Вы также можете перехватит здесь загрузку URL (с помощью метода shouldOverrideUrlLoading()).

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

Реализация экземпляра WebViewClient может быть, например, следующей.

Затем задать WebViewClient для WebView можно с помощью метода setWebViewClient().

Класс WebChromeClient

Этот класс позволяет прослушивать вызовы JavaScript, уведомления текущей страницы, такие как сообщения консоли, предупреждения, прогресс обновления страницы и другие вызовы JavaScript.

С помощью WebChromeClient мы можем обрабатывать события JS.

Затем задать экземпляр WebChromeClient можно следующим способом.

Привязка JavaScript к Android

WebView позволяет привязать код JavaScript к коду Android через интерфейс.

Для этого мы должны использовать метод addJavaScriptInterface(), в который передаются класс, предоставляющий интерфейс для JS, и имя, которое будет использоваться для отображения экземпляра в JS (например, «AndroidFunction«). В результате будет создан интерфейс с именем AndroidFuction для JavaScript, работающего в WebView.

С помощью этого способа мы можем:

1. Выполнить метод, описанный в Java, из JS.
2. Выполнить из Java метод, описанный в JS.

JavaScript вызывает Java

Например, опишем класс с нашими методами, которые мы хотим выполнить в JS.

Примечание: аннотация @JavascriptInterface обязательна для API 17 и выше.

Затем установим этот интерфейс в WebView.

Для взаимодействия с java-кодом в JS мы должны использовать имя интерфейса.

Java вызывает JavaScript

Допустим, у нас есть такой код на HTML.

Тогда в Java-коде нам нужно добавить вызов метода loadUrl(), в параметры которого нужно передать имя объявленного в JS метода.

После этого, загрузив страницу, мы можем выполнять код JavaScript прямо из Java.

Взаимодействие WebView с JavaScript : 5 комментариев

Спасибо большое! Гениальная статья

Так а все таки если из Java надо запустить JS функцию это надо постоянно перезапускать вебвью через loadurl по сути?

«После этого, загрузив страницу, мы можем выполнять код JavaScript прямо из Java.»

так вот это вот как.

а понял. вызов не очищает вебвью. только медленно оно ((

Все получилось, спасибо! Долго не мог найти ответа

От веб-сервиса к андроид-приложению в два счета

Мы живем в эру мобильных устройств. Однажды нам в голову приходит идея создать супер-мега приложение для мобильных устройств и разместить его в магазине приложений. Однако, тут возникает одна небольшая проблема: мы всего лишь веб-разработчики. Мы не разбираемся в языках Java и Objective-C, и не располагаем лишним временем для их изучения.
Сегодня у нас появилась возможность воплотить свои мечты в реальность и улучшить мир, в котором мы живем, с помощью наших супер-мега приложений.

В этой статье мы опишем процесс создания гибридного приложения для операционной системы Андроид.

Гибридное приложение сочетает в себе свойства как нативных, так и веб-приложений. Как нативное приложение, оно может распространяться среди пользователей через магазин приложений, а также пользоваться преимуществами многочисленных функций мобильных устройств. Как веб-приложение, оно состоит из HTML, CSS и Javascript файлов.

Преимущества данного типа приложений заключаются в следующем:

• почти все приложения могут быть написаны на языке JavaScript для всех мобильных платформ;
• они могут использовать такие функции мобильного устройства, как камера, акселерометр, и др.;
• все HTML, CSS и JavaScript файлы можно обновить, не ожидая утверждения новой версии приложения.

Однако, гибридное приложение все же работает медленнее нативного. Но это не такая большая проблема, потому что самую медленную часть приложения можно написать на Java или Objective-C и добавить при следующем обновлении.

Давайте приступим к созданию приложения, а заодно и к изменению мира к лучшему!

Шаг первый. Готовимся захватить мир

Итак, давайте приступим к воплощению нашей идеи и создадим наше первое приложение для андроид. Прежде всего, необходимо скачать Android SDK и другие инструменты для эмуляции различных Android-устройств либо драйверы для тестирования приложения на реальном устройстве. Это совсем несложно: просто загрузите пакет . Здесь вы найдете IDE Eclipse с уже встроенным расширением ADT, Android SDK, SDK Manager и другие.

Теперь, когда у вас есть все эти файлы, запустите файл SDK Manager.exe (для ОС Mac или Linux откройте в командной строке директорию «tools/», которая находится в скачанном пакете Android SDK, затем выполните команду android sdk) и установите следующие инструменты:

1. SDK Tools. Этот пакет уже должен быть установлен, если же нет, то вы знаете, что делать;
2. SDK Platform-tools;
3. SDK для одной из версий Andro >

Отлично! Мы закончили с самой скучной частью создания приложений для андроид. Давайте запустим Eclipse IDE, загруженную вместе с SDK, и начнем изменять мир. Кроме того, если хотите, можете загрузить Android Studio (IDE на базе IntelliJ IDEA). Должны вас предупредить, что она все еще работает в бета-версии и может доставить дополнительные неудобства.

Шаг второй. Создаем приложение

Основой всех гибридных приложений является элемент WebView. Данный элемент отображает веб-страницы с помощью WebKit-движка. Это значит, что вы можете создать обычный HTML-файл, содержащий или
теги для подключения CSS, и

Android WebView

Display Web Pages as a part of your Activity Layout.

What is Andro > WebView is an Andro >TextView,EditText,Button etc. using this WebView we can load HTML pages as a part of your activity layout and it uses Webkit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more. by default WebView does not enable JavaScript so we can manually enable it by using WebSettings and can bind JavaScript code to client s >performing a network request and then parsing the respond data and rendering it an android layout.if you want full fledged web browser then you probably want to invoke the browser application with a URL intent rather than show it with a WebView.

In this post we will understand and work with the basic things and handling methods of Android WebView.

To get Internet access, request the INTERNET permission in your manifest file

Adding a WebView to Your Application

Using JavaScript in WebView

If the web page you want to load in your WebView is using JavaScript you must enable JavaScript for your WebView using WebSettings with getSettings() method then enable JavaScript with setJavaScriptEnabled() method.

WebSettings : prov >user agent,zoom control,file access,database settings etc.
setJavaScriptEnabled : to enable javascript execution.

Binding JavaScript code to Andro >If the loaded web page events that can communicate to the andro >JavaScript code and client side android code.

To bind a new interface between your JavaScript and Andro >addJavascriptInterface(), passing it a class instance to bind to your JavaScript and an interface name that your JavaScript can call to access the class.

addJavascriptInterface (Object object,String name)
this method allows JavaScript to access the java object’s method by injecting interface object using the supplied name. JavaScript interacts with java object on a private, background thread of this WebView so thread safety is an important task here.

Note : you must add the @JavaScriptInterface annotation if you set your targetedSdkVersion is 17 or higher.The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.

here i am using Handler this allows you to send and process Message and Runnable objects associated with a thread’s MessageQueue . Each Handler instance is associated with a single thread and that thread’s message queue

Caution : this produce a dangerous security issue because when the loaded HTML is untrustworthy this will mislead the application depends on attacker’s choice.

Handling Page Navigation

If you click the link in the web page by default it will launch the web browser and loads the appropriate URL. so we have to create a client for override this behavior to load the clicked link within your WebView and also can be navigate backward and forward through the web page history that’s maintain by your WebView. android provides 2 client systems they are,

WebViewClient using setWebViewClient()
If you won’t require too many features, rendering HTML is enough you can use WebViewClient.

WebChromeClient using setWebChromeClient()
If you want to handle javascript dialogs,favicons,titles and progress you should use WebChromeClient.

the following are the some override methods of WebViewClient

shouldOverrideUrlLoading (WebView view,String url)
This method returns false when the current WebView handles the requested URL so no need to override the URLloading else the host application handles the URLusing Intent.
onPageStarted (WebView view,String url,Bitmap favicon)
This method notify the host application that a page has started loading.
onPageFinished (WebView view,String url)
This method notify the host application that a page has finished loading.

Navigating Web Page History

WebView automatically stores the history of visited web pages so we can navigate backward and forward through the history with goBack() and goForward() methods.

goBack() goes back in the history of this WebView.
goForward() goes forward in the history of this WebView.
canGoBack() returns true if the web page history for the user to visit.
canGoForward() check whether there is a forward history.

Hope you have enjoyed this post,Feel free to comment below for doubts or chat with me in Facebook or drop me E-mail for replies. Share is care.