Android與JS資料即時互動例子

廢話不多說，直接上代碼：

private WebView mWebView;
mWebView.getSettings().setJavaScriptEnabled(true);//這個沒的說，首先得支援js
mWebView.loadUrl("www.111cn.net");
mWebView.addJavascriptInterface(new MyJavascriptInterface(this), "imagelistner");//自訂一個MyJavascript介面
mWebView.setWebViewClient(new MyWebViewClient());//MyWebViewClient繼承於WebViewClient
MyJavascriptInterface:

// js通訊介面

public class MyJavascriptInterface {
    private Context context;
    public MyJavascriptInterface(Context context) {
        this.context = context;
    }
    @JavascriptInterface //值得注意的是，當你的openImage方法沒有被執行，也就是說mWebView.addJavascriptInterface沒有作用
那麼就請在這裡加上@JavascriptInterface,加之前記得先匯入
    public void openImage(String img) {
        System.out.println(img);
        Intent intent = new Intent();
        intent.putExtra("image", img);
        intent.setClass(context, ShowWebImageActivity.class);
        context.startActivity(intent);
        System.out.println(img);
    }
}
private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);
    }
    @Override
    public void onPageFinished(WebView view, String url) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageFinished(view, url);
        // html載入完成之後，添加監聽圖片的點擊js函數
        addImageClickListner();//這個方法在下面
    }
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageStarted(view, url, favicon);
    }
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
    }
}
 

// 注入js函數監聽

private void addImageClickListner() {
    // 這段js函數的功能就是，遍曆所有的img幾點，並添加onclick函數，在還是執行的時候調用本地介面傳遞url過去
    mWebView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByTagName(\"img\"); " +
            "for(var i=0;i<objs.length;i++)  " +
            "{"
            + "    objs[i].onclick=function()  " +
            "    {  "
            + "        window.imagelistner.openImage(this.src);  " +
            "    }  " +
            "}" +
            "})()");
}

顯示圖片的類

package cn.zmit.xiangrikui.test;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Display;
import android.view.View;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import cn.zmit.xiangrikui.R;

public class ShowWebImageActivity extends Activity {
    private String imagePath = null;
    private ImageView imageView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.show_webimage);
        imagePath = getIntent().getStringExtra("image");
        imageView = (ImageView) findViewById(R.id.show_webimage_imageview);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        com.squareup.picasso.Target target = new com.squareup.picasso.Target() {
            @Override
            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                imageView.setImageBitmap(big(bitmap));
            }

            @Override
            public void onBitmapFailed(Drawable errorDrawable) {

            }

            @Override
            public void onPrepareLoad(Drawable placeHolderDrawable) {

            }
        };
        Picasso.with(this).load(imagePath).into(target);
    }

    public Bitmap big(Bitmap b) {
        Display d = (ShowWebImageActivity.this).getWindowManager().getDefaultDisplay();
        int x = d.getWidth();//當前螢幕寬度   px
        int y = d.getHeight();//當前螢幕高度  px
       
        int w = b.getWidth();
        int h = b.getHeight();
       
        float sx = (float) x / w;//要強制轉換，不轉換我的在這總是死掉。
        float sy = (float) y / h;
        float total=Math.min(sx,sy);
        Matrix matrix = new Matrix();
        matrix.postScale(total, total); // 長和寬放大縮小的比例
        Bitmap resizeBmp = Bitmap.createBitmap(b, 0, 0, w,
                h, matrix, true);
        return resizeBmp;
    }
}