Использование JavaScript в WebView. Привязка клиентского кода к скрипту веб-страницы

Это перевод второй части этого мануала

---

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

Включить JavaScript

По умолчанию, JavaScript в WebView отключен. Изменить эту опцию можно, получив объект WebSettings у WebView, а затем вызвав у него метод setJavaScriptEnabled() с аргументом true

Пример:

WebView myWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

Использование кода клиентского приложения при обработке событий в JavaScript коде веб-страницу

При разработке веб-приложения, мы можете заставить скрип веб-страницы исполнить код вашего android приложения.  Например, при нажатии на кнопку можно показывать пользователю диалог, созданный методами android, вместо вызова alert().

Чтобы привязать скрипт веб страницы к коду клиентского приложения, вызовете у WebView метод addJavaScriptinterface(),  первым аргументом указав класс, в котором определяются выполняемые методы, а вторым – идентификатор клиентского приложения для JavaScript кода.

 Например, мы можем определить следующий класс:

public class JavaScriptInterface {

    Context mContext;

    /** Instantiate the interface and set the context */

    JavaScriptInterface(Context c) {

        mContext = c;

    }

    /** Show a toast from the web page */

    public void showToast(String toast) {

        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();

    }

}

В этом примере JavaScriptInterface определяет операцию showToast(), которая показывает пользователю Toast средствами android.

Привяжем интерфейс веб-страницы к коду android, определив как Android идентификатор клиентского приложения:

WebView webView = (WebView) findViewById(R.id.webview);

webView.addJavaScriptInterface(new JavaScriptInterface(this), "Android");

Теперь в JavaScript коде можно вызвать определенный нами метод:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">

    function showAndroidToast(toast) {

        Android.showToast(toast);//У пользователя будет вызван Toast

    }

</script>

Внимание: Использование addJavaScriptInterface() может быть очень полезно, однако применять это надо с умом – иначе возникнет серьезная дыра в безопасности приложения. Если часть HTML кода страницы генерируется не вполне надежным источником, он может заставить ваше клиентское приложение выполнить некоторые операции. Кроме того, очень нежелательно заставлять позволять пользователю смотреть через ваше WebView какие-либо посторонние страницы – для этого лучше использовать стандартный браузер.