WebView中Js與Android本地函數的相互調用

標籤：

介紹

隨著Html5的普及，html在表現力上不一定比原生應用差，並且有很強的擴充相容性，所以越來越多的應用是採用Html與Android原生混合開發模式實現。

既然要實現混合開發，那麼Js與Android原生函數的相互調用就必不可少了。這裡寫了一個demo，實現點擊html中的圖片進行本地展示。

原理

1、Android調用js很簡單，直接webView.loadUrl("javascript:JS中的方法名稱()");即可。

2、js調用Android方法，需要使用WebView.addJavascriptInterface(Object obj, String interfaceName）這個方法告訴WebView我要添加一個Js介面調用本地函數。

3、demo中用到了universalimageloader與PhotoView實現圖片載入與瀏覽

見http://www.cnblogs.com/leestar54/p/4220068.html，http://www.cnblogs.com/leestar54/p/4105726.html

4、demo中涉及到了一個JS閉包的問題，閉包中所記錄的自由變數,只是對這個變數的一個引用,而非變數的值,當這個變數被改變了,閉包裡擷取到的變數值,也會被改變.

見http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html

實現

MainActivity

package com.example.javascriptinterface;import java.util.ArrayList;import com.nostra13.universalimageloader.core.DisplayImageOptions;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import android.support.v7.app.ActionBarActivity;import android.app.ProgressDialog;import android.content.Context;import android.content.Intent;import android.os.Bundle;import android.os.Handler;import android.view.Menu;import android.view.MenuItem;import android.webkit.WebView;import android.webkit.WebViewClient;import android.graphics.Bitmap;public class MainActivity extends ActionBarActivity {    private WebView webView1;    private ProgressDialog pbar;    private Handler mHandler = new Handler();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        // 初始化通用圖片載入器        DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()                .cacheInMemory(true).cacheOnDisk(true).build();        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(                this).defaultDisplayImageOptions(defaultOptions).build();        ImageLoader.getInstance().init(config);        pbar = new ProgressDialog(MainActivity.this);        pbar.setTitle("提示");        pbar.setMessage("載入中…");        pbar.setIndeterminate(true);        webView1 = (WebView) findViewById(R.id.webView1);        webView1.setWebViewClient(new WebViewClient() {            @Override            public void onPageStarted(WebView view, String url, Bitmap favicon) {                super.onPageStarted(view, url, favicon);                pbar.show();            }            @Override            public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);                pbar.dismiss();                //網頁載入完成，Weiview中注入Js                addImageClickListner();            }        });        //允許webview執行JS        webView1.getSettings().setJavaScriptEnabled(true);        webView1.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);        webView1.loadUrl("http://news.163.com/jnews/mobile/#detail/99/AI8ESHB000964J4O");        //添加JS介面，這樣就可以在js中調用本地函數了。        webView1.addJavascriptInterface(new JavascriptInterface(this),                "imagelistner");    }    public class JavascriptInterface {        private Context context;        public JavascriptInterface(Context context) {            this.context = context;        }        //一定要聲明該函數是JavascriptInterface        @android.webkit.JavascriptInterface        public void openImage(String img, final int index) {            final String simg = img;            final int findex = index;            mHandler.post(new Runnable() {                @Override                public void run() {                    String[] imgs = simg.split(",");                    ArrayList<String> imgsUrl = new ArrayList<String>();                    for (String s : imgs) {                        imgsUrl.add(s);                    }                    Intent intent = new Intent();                    intent.putExtra("index", findex);//當前點擊圖片index                    intent.putStringArrayListExtra("infos", imgsUrl);//圖片連結數組                    intent.setClass(context, PhotosActivity.class);                    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);                    context.startActivity(intent);                }            });        }    }    private void addImageClickListner() {        //click函數解決了閉包，用來實現顯示當前點擊圖片        webView1.loadUrl("javascript:(function(){"                + "var objs = document.getElementsByTagName(\"img\");"                + "var imgurl=‘‘;"                + "for(var i=0;i<objs.length;i++)  "                + "{"                + "imgurl+=objs[i].src+‘,‘;"                + " objs[i].onclick=(function(j){return function(){window.imagelistner.openImage(imgurl,j);}; })(i);  "                + "}" + "} " + ")()");    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

完成之後看起來是這樣的

demo地址

連結：http://pan.baidu.com/s/1dDEPPkP 密碼：7y6g

 

WebView中Js與Android本地函數的相互調用