android中webview控件和javascript交互實例

更新時間：2014年07月09日 11:37:34 投稿：junjie

這篇文章主要介紹了android中webview控件和javascript交互實例,例子中包括javascript調(diào)用java的方法,java代碼中調(diào)用javascript的方法,需要的朋友可以參考下

當我們要實現(xiàn)豐富的圖文混排效果的時候，我們一般會使用webview，這是一個功能十分強大的的控件，來看看官方的解釋：

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the 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.

一個能顯示網(wǎng)頁內(nèi)容的View。該類是你實現(xiàn)一個自己的瀏覽器，或者只是在activity中顯示網(wǎng)頁內(nèi)容的基礎；它基于WebKit內(nèi)核來顯示網(wǎng)頁，并且包含了實現(xiàn)前后翻頁、放大縮小，文字搜索方法。

從上面你應該了解到了基本功能，也就是顯示網(wǎng)頁。這篇文章中我們主要討論webview和Javascript的交互。如果你的js基礎比java基礎好的話那么采用這種方式做一些復雜的處理是個不錯的選擇。

WebView和js的交互包含兩方面，一是在html中通過js調(diào)用安卓的java代碼；二是在安卓java代碼中調(diào)用js。

一、html中通過js調(diào)用java代碼

js中調(diào)用java代碼其實就記住一點，webview設置一個和js交互的接口（注意這里只是一般的意思，并不是java中接口的含義），這個接口其實是一個一般的類，同時為這個接口取一個別名。這個過程如下：

復制代碼代碼如下:

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");

new DemoJavaScriptInterface就是這個接口，demo就是這個接口的別名。
上面的代碼執(zhí)行之后在html的js中就能通過別名（這里是“demo”）來調(diào)用newDemoJavaScriptInterface類中的任何方法。

如我們想讓html中的一個button點擊之后調(diào)用java中的函數(shù)可以這樣：

復制代碼代碼如下:

<input type="button"  value="click me"  onclick="window.demo.clickOnAndroid()"/>

但是因為安全問題，在Android4.2中(如果應用的android:targetSdkVersion數(shù)值為17+)JS只能訪問帶有 @JavascriptInterface注解的Java函數(shù)。因此如果你的開發(fā)版本比較高，需要在被調(diào)用的函數(shù)前加上@JavascriptInterface注解。

下面是谷歌給出的代碼示例：
WebViewDemo.java

復制代碼代碼如下:

package com.google.android.webviewdemo;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

/**

 * Demonstrates how to embed a WebView in your activity. Also demonstrates how

 * to have javascript in the WebView call into the activity, and how the activity

 * can invoke javascript.

 * <p>

 * In this example, clicking on the android in the WebView will result in a call into

 * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code

 * will turn around and invoke javascript using the {@link WebView#loadUrl(String)}

 * method.

 * <p>

 * Obviously all of this could have been accomplished without calling into the activity

 * and then back into javascript, but this code is intended to show how to set up the

 * code paths for this sort of communication.

 *

 */

public class WebViewDemo extends Activity {

    private static final String LOG_TAG = "WebViewDemo";

    private WebView mWebView;

    private Handler mHandler = new Handler();

    @Override

    public void onCreate(Bundle icicle) {

        super.onCreate(icicle);

        setContentView(R.layout.main);

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

        WebSettings webSettings = mWebView.getSettings();

        webSettings.setSavePassword(false);

        webSettings.setSaveFormData(false);

        webSettings.setJavaScriptEnabled(true);

        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new MyWebChromeClient());

        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("file:///android_asset/demo.html");

    }

    final class DemoJavaScriptInterface {

        DemoJavaScriptInterface() {

        }

        /**

         * This is not called on the UI thread. Post a runnable to invoke

         * loadUrl on the UI thread.

         */

        public void clickOnAndroid() {

            mHandler.post(new Runnable() {

                public void run() {

                    mWebView.loadUrl("javascript:wave()");

                }

            });

        }

    }

    /**

     * Provides a hook for calling "alert" from javascript. Useful for

     * debugging your javascript.

     */

    final class MyWebChromeClient extends WebChromeClient {

        @Override

        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

            Log.d(LOG_TAG, message);

            result.confirm();

            return true;

        }

    }

}

demo.html

復制代碼代碼如下:

<html>

    <script language="javascript">

        /* This function is invoked by the activity */

        function wave() {

            alert("1");

            document.getElementById("droid").src="android_waving.png";

            alert("2");

        }

    </script>

    <body>

        <!-- Calls into the javascript interface for the activity -->

        <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;

            margin:0px auto;

            padding:10px;

            text-align:center;

            border:2px solid #202020;" >

                <img id="droid" src="android_normal.png"/><br>

                Click me!

        </div></a>

    </body>

</html>

main.xml

復制代碼代碼如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >                                             

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/intro"

        android:padding="4dip"

        android:textSize="16sp"

        />

    <WebView

        android:id="@+id/webview"

        android:layout_width="fill_parent"

        android:layout_height="0dip"

        android:layout_weight="1"

        />

</LinearLayout>

二、android調(diào)用js

上面的代碼在演示如何在js中調(diào)用java代碼的同時也演示了如何在java中調(diào)用js
調(diào)用形式：

復制代碼代碼如下:

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一個方法，當然你可以把這個方法改成其他的方法，也就是android調(diào)用其他的方法。

demo的解釋：

現(xiàn)在你一定了解了android和js的交互了。是時候分析一些demo了，根據(jù)上面講的你也應該比較清楚了。具體交互流程如下：

①點擊圖片，則在js端直接調(diào)用android上的方法clickOnAndroid()；
②clickOnAndroid()方法（利用線程）調(diào)用js的方法。
③被②調(diào)用的js直接控制html。

個人總結(jié)：利用webView的這種方式在有些時候UI布局就可以轉(zhuǎn)成相應的html代碼編寫了，而html布局樣式之類有DW這樣強大的工具，而且網(wǎng)上很多源碼，很多代碼片。在UI和視覺效果上就會節(jié)省很多時間，重復發(fā)明輪子沒有任何意義。

您可能感興趣的文章:

Android開發(fā)Jetpack組件ViewModel使用講解
這篇文章主要介紹了Android?Jetpack架構(gòu)組件?ViewModel詳解，ViewModel類讓數(shù)據(jù)可在發(fā)生屏幕旋轉(zhuǎn)等配置更改后繼續(xù)存在，ViewModel類旨在以注重生命周期的方式存儲和管理界面相關的數(shù)據(jù)，感興趣可以來學習一下
2022-08-08
Android如何通過組合的方式自定義View
這篇文章主要介紹了Android如何通過組合的方式自定義View，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
Android自定義view實現(xiàn)列表內(nèi)左滑刪除Item
這篇文章主要介紹了微信小程序列表中item左滑刪除功能，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2023-02-02
Android自定義控件案例匯總1（菜單、popupwindow、viewpager）
這篇文章主要介紹了Android自定義控件案例匯總，優(yōu)酷菜單、popupwindow實現(xiàn)下拉列表、viewpager實現(xiàn)輪播圖,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Android開發(fā)之針對聯(lián)系人的封裝
本文給大家分享的是如何在Android開發(fā)中封裝聯(lián)系人模塊以及封裝后的使用及總結(jié)，最后奉上代碼，有需要的小伙伴可以參考下。
2016-02-02
完美解決客戶端webview持有的頁面緩存,不會立即釋放的問題
下面小編就為大家?guī)硪黄昝澜鉀Q客戶端webview持有的頁面緩存,不會立即釋放的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
Android自定義TextBanner實現(xiàn)自動滾動
這篇文章主要為大家詳細介紹了Android自定義TextBanner實現(xiàn)自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
flutter優(yōu)雅實現(xiàn)掃碼槍獲取數(shù)據(jù)源示例詳解
這篇文章主要為大家介紹了flutter優(yōu)雅實現(xiàn)掃碼槍獲取數(shù)據(jù)源示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
Android自定義View設定到FrameLayout布局中實現(xiàn)多組件顯示的方法分享
Android自定義View設定到FrameLayout布局中實現(xiàn)多組件顯示的方法分享，需要的朋友可以參考一下
2013-05-05
Android開發(fā)案例手冊Application跳出dialog
這篇文章主要為大家介紹了Android開發(fā)案例手冊Application跳出dialog，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06