Webview with javascript android

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Working with the WebView

Finding these guides helpful?

We need help from the broader community to improve these guides, add new topics and keep the topics up-to-date. See our contribution guidelines here and our topic issues list for great ways to help out.

Check these same guides through our standalone viewer for a better browsing experience and an improved search. Follow us on twitter @codepath for access to more useful Android development resources.

Clone this wiki locally

If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. The WebView class is an extension of Android’s View class that allows you to display web pages as a part of your activity layout. Since Android 4.4, it is based on the Chrome on Android v33.0.0 according to this reference.

This document shows you how to get started with WebView and how to do some additional things, such as handle page navigation and bind JavaScript from your web page to client-side code in your Android application. See the official WebView docs for a more detailed look.

An alternative for using WebViews is Chrome Custom Tabs, which provides more flexibility in terms of customizing the toolbar, adding animations, or warming up the browser ahead of time. Chrome Custom Tabs only works if Chrome on Android is installed on the browser. For more information, see this guide.

To get Internet access, request the INTERNET permission in your manifest file. For example:

manifest . > uses-permission android:name="android.permission.INTERNET" /> . manifest>

To add a WebView to your Application, simply include the element in your activity layout:

xml version="1.0" encoding="utf-8"?> WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />

First, we need to configure the WebView to behave with reasonable defaults using WebSettings and creating a WebViewClient:

public class MainActivity extends Activity < private WebView myWebView; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myWebView = (WebView) findViewById(R.id.webview); // Configure related browser settings myWebView.getSettings().setLoadsImagesAutomatically(true); myWebView.getSettings().setJavaScriptEnabled(true); myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); // Configure the client to use when opening URLs myWebView.setWebViewClient(new WebViewClient()); // Load the initial URL myWebView.loadUrl("https://www.example.com"); > >

class MainActivity : Activity() < private lateinit var myWebView: WebView override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val myWebView = findViewByIdView>(R.id.webview) as WebView myWebView.apply < // Configure related browser settings this.settings.loadsImagesAutomatically = true this.settings.javaScriptEnabled = true myWebView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY // Configure the client to use when opening URLs myWebView.webViewClient = WebViewClient() // Load the initial URL myWebView.loadUrl("https://www.example.com") > > >

You can attach javascript functions and use them within the mobile webpages as described here in the official docs.

Handling responsive layouts

By default, the WebView does not account for the default scale size if HTML pages include viewport metadata. If you wish to enable the page to load with responsive layouts, you need to set it explicitly:

// Enable responsive layout myWebView.getSettings().setUseWideViewPort(true); // Zoom out if the content width is greater than the width of the viewport myWebView.getSettings().setLoadWithOverviewMode(true);

// Enable responsive layout myWebView.getSettings().setUseWideViewPort(true) // Zoom out if the content width is greater than the width of the viewport myWebView.getSettings().setLoadWithOverviewMode(true)

You can also enable the ability to zoom-in controls on the page:

myWebView.getSettings().setSupportZoom(true); myWebView.getSettings().setBuiltInZoomControls(true); // allow pinch to zooom myWebView.getSettings().setDisplayZoomControls(false); // disable the default zoom controls on the page

myWebView.getSettings().setSupportZoom(true) myWebView.getSettings().setBuiltInZoomControls(true) // allow pinch to zooom myWebView.getSettings().setDisplayZoomControls(false) // disable the default zoom controls on the page

In case you want to store a copy of a webpage locally to be loaded into a WebView , you can put it in the android assets folder. If you do not find one under your main/ directory, then you can create one. Place the html, css, js, etc in this folder.

For example, say I wanted to load a page entitled index.html . I would create my file under /app/src/main/assets/index.html

then, in your activity or fragment you can use the code

public class MainActivity extends Activity < private WebView myWebView; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myWebView = (WebView) findViewById(R.id.webview); myWebView.getSettings().setJavaScriptEnabled(true); myWebView.setWebViewClient(new WebViewClient()); String path = Uri.parse("file:///android_asset/index.html").toString(); myWebView.loadUrl(path); > >

class MainActivity : Activity() < private lateinit var myWebView: WebView override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val myWebView = findViewByIdView>(R.id.webview) as WebView myWebView.apply < // Configure related browser settings this.settings.loadsImagesAutomatically = true this.settings.javaScriptEnabled = true myWebView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY // Configure the client to use when opening URLs myWebView.webViewClient = WebViewClient() // Load the initial URL myWebView.loadUrl("https://www.example.com") val path: String = Uri.parse("file:///android_asset/index.html").toString() myWebView.loadUrl(path) > > >

Displaying a ProgressDialog in a WebView

Create your ProgressDialog in the setWebViewClient method

You can dismiss the dialog in onPageFinished method or in onPageCommitVisible . Setting dismis in the latter is convenient since your user won’t have to wait for the whole page to load to proceed.

webView.setWebViewClient(new WebViewClient() < ProgressDialog progressDialog = new ProgressDialog(Context); @Override public void onPageStarted(WebView view, String url, Bitmap favicon) < super.onPageStarted(view, url, favicon); progressDialog.setTitle("Loading. "); progressDialog.setMessage("Please wait. "); progressDialog.setCancelable(false); progressDialog.show(); > @Override public void onPageCommitVisible(WebView view, String url) < super.onPageCommitVisible(view, url); if (progressDialog != null)< progressDialog.dismiss(); > > >);

webView.setWebViewClient(object : WebViewClient() < val progressDialog: ProgressDialog? = ProgressDialog(Context) override fun onPageStarted( view: WebView, url: String, favicon: Bitmap ) < super.onPageStarted(view, url, favicon) progressDialog.setTitle("Loading. ") progressDialog.setMessage("Please wait. ") progressDialog.setCancelable(false) progressDialog.show() > override fun onPageCommitVisible( view: WebView, url: String ) < super.onPageCommitVisible(view, url) if (progressDialog != null) < progressDialog.dismiss() >> >)

Sharing cookies between WebViews and networking clients

WebViews currently use their own cookie manager, which means that any network requests you make outside of these web views are usually stored separately. This can cause problems when trying to retain the same cookies (i.e. for authentication or cross-site script forgery (CSRF) headers). The simplest approach as proposed in this Stack Overflow article is to implement a cookie handler that forwards all requests to the WebView cookie store. See this gist for an example.

Created by CodePath with much help from the community. Contributed content licensed under cc-wiki with attribution required. You are free to remix and reuse, as long as you attribute and use a similar license.

Источник

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

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

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

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

WebView webView = findViewById(R.id.WebView); // Пример 1: задать URL адрес webView.loadUrl("https://android-tools.ru"); // Пример 2: задать HTML-файл из папки raw webView.loadUrl("file:///Android_res/raw/some_file.HTML"); // Пример 3: задать HTML-файл из папки assets webView.loadUrl("file:///Android_asset/some_file.HTML"); // Пример 4: задать содержимое HTML в виде строки String rawHTML = ""+ "
HTML content
"+ ""; webView.loadData(rawHTML, "text/HTML", "UTF-8");

Класс WebSettings

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

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

WebView webView = findViewById(R.id.WebView); WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true);

Класс WebViewClient

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

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

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

private class MyWebViewClient extends WebViewClient < @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) < return super.shouldOverrideUrlLoading(view, request); >@Override public void onPageFinished(WebView view, String url) < >@Override public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) < super.onReceivedError(view, request, error); >>

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

webView.setWebViewClient(new MyWebViewClient());

Класс WebChromeClient

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

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

private class MyWebChromeClient extends WebChromeClient < @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) < return true; >@Override public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) < return true; >@Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) < return true; >>

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

webView.setWebChromeClient(new MyWebChromeClient());

Привязка JavaScript к Android

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

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

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

JavaScript вызывает Java

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

public class JavaScriptInterface < Context mContext; JavaScriptInterface(Context c) < mContext = c; >@JavascriptInterface public void showToast(String toast) < Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); >>

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

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

webView.addJavascriptInterface(new JavaScriptInterface(this), "AndroidFunction");

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

Java вызывает JavaScript

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

   Javascript 
0
 function increment() 

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

webView.loadUrl("javascript:increment()");

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

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

Источник