WebView和JS的交互

一,Android调用JS接口

1,用到的HTML代码:
//assets/web_js.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
    function javaCallJavascriptNoParam() {
         document.getElementById("content").innerHTML = "Android中的Java通过WebView调用了javaScript的无参构造<br\>";
    }
    function javaCallJavascript(param) {
         document.getElementById("content").innerHTML = param;
    }
    
    </script>
</head>
<body>
<div id="content"></div>
<br/><br/>
</body>
</html>
2,在Activity中调用HTML中方法:

在初始化WebView时加入webView.getSettings().setJavaScriptEnabled(true); 表示允许AndroidJS交互。接下来在需要交互的地方调用JS方法:

            case R.id.btn_web_js:
                //wvWeb.loadUrl("javascript:javaCallJavascript('"+params+"')");
                wvWeb.loadUrl("javascript:javaCallJavascript('Android中的Java通过WebView调用了javaScript的有参构造方法')");
                break;
            case R.id.btn_web_js_01:
                wvWeb.loadUrl("javascript:javaCallJavascriptNoParam()");
                break;

注意:在调用传参的方法时,如果传入的参数没有提前定义,而是直接传入的话。加上单引号(‘’)。具体写法参考上面的

二,JS调用Android方法

1,用到的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h4>JS与Android(Java)的交互</h4>
    <input type="button" value="js调Java:方法一" onclick="ok()">
    <script type="text/javascript">
    function ok() {
        window.java_call_js.webMessage("JS与Android(Java)的交互");
    }
    </script>
</head>
<body>
<div id="content"></div>
<br/><br/>
</body>
</html>
2,在JS中调用Android中方法:

在初始化WebView时加入

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().addJavascriptInterface(new JavaScriptUtil(), "java_call_js");//其中“java_call_js”为双方约定好的标记
3,JavaScriptUtil中写交互的方法
    /*
     * 作为addJavascriptInterface()方法的第二个参数,该类将被映射为JavaScript对象
     */
    private final class JavaScriptUtil {

        JavaScriptUtil() {
        }

        @JavascriptInterface
        public void webMessage(String msg) {
            Log.e("LHC", "msg:" + msg);
            ToastUtil.show(msg);
        }
    }

注意:方法必须加入"@JavascriptInterface",不然js无法调用;方法传入的参数类型为基本类型,无法接受对象

三,JS调用Android方法,Android方法有调用JS方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h4>JS与Android(Java)的交互</h4>
    <script type="text/javascript">
    function javaCallJavascriptNoParam() {
         document.getElementById("content").innerHTML = "Android中的Java通过WebView调用了javaScript的无参构造<br\>";
    }
    function javaCallJavascript(param) {
         document.getElementById("content").innerHTML = param;
    }
    </script>
</head>
<body>
<br/><br/>
<input type="button" value="js调Android" onclick="java_call_js.javaCallJsMethod()">
<div id="content"></div>
<br/><br/>
</body>
</html>
2,JavaScriptUtil中写交互的方法
private final class JavaScriptUtil {

        JavaScriptUtil() {
        }

        @JavascriptInterface
        public void javaCallJsMethod() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    wvWeb.loadUrl("javascript:javaCallJavascriptNoParam()");
                }
            });
        }
    }

注意:JS调用的Android方法中在调用JS方法时,要写在主线程中,不然会报错

四,调用Android相机,相册

    private ValueCallback<Uri> mUploadMessage;
    private ValueCallback<Uri[]> mUploadCallbackAboveL;
    private final static int PHOTO_REQUEST = 100;
    private final static int VIDEO_REQUEST = 120;
    private boolean videoFlag = false;

   //自定义 WebChromeClient 辅助WebView处理图片上传操作【<input type=file> 文件上传标签】
    public class MyChromeWebClient extends WebChromeClient {
        // For Android 3.0-
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg)");
            mUploadMessage = uploadMsg;
            if (videoFlag) {
                recordVideo();
            } else {
                takePhoto();
            }

        }

        // For Android 3.0+
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            Log.d(TAG, "openFileChoose( ValueCallback uploadMsg, String acceptType )");
            mUploadMessage = uploadMsg;
            if (videoFlag) {
                recordVideo();
            } else {
                takePhoto();
            }
        }

        //For Android 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg, String acceptType, String capture)");
            mUploadMessage = uploadMsg;
            if (videoFlag) {
                recordVideo();
            } else {
                takePhoto();
            }
        }

        // For Android 5.0+
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            Log.d(TAG, "onShowFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)");
            mUploadCallbackAboveL = filePathCallback;
            if (videoFlag) {
                recordVideo();
            } else {
                takePhoto();
            }
            return true;
        }
    }

    /**
     * 拍照
     */
    private void takePhoto() {
        File fileUri = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + ".jpg");
        imageUri = Uri.fromFile(fileUri);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            imageUri = FileProvider.getUriForFile(WebViewNewActivity.this, getPackageName() + ".fileprovider", fileUri);//通过FileProvider
            // 创建一个content类型的Uri
        }
        PhotoUtils.takePicture(WebViewNewActivity.this, imageUri, PHOTO_REQUEST);
    }

    /**
     * 录像
     */
    private void recordVideo() {
        Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
        intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1);
        //限制时长
        intent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, 10);
        //开启摄像机
        startActivityForResult(intent, VIDEO_REQUEST);
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PHOTO_REQUEST) {
            if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (mUploadCallbackAboveL != null) {
                onActivityResultAboveL(requestCode, resultCode, data);
            } else if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        } else if (requestCode == VIDEO_REQUEST) {
            if (null == mUploadMessage && null == mUploadCallbackAboveL) return;

            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (mUploadCallbackAboveL != null) {
                if (resultCode == RESULT_OK) {
                    mUploadCallbackAboveL.onReceiveValue(new Uri[]{result});
                    mUploadCallbackAboveL = null;
                } else {
                    mUploadCallbackAboveL.onReceiveValue(new Uri[]{});
                    mUploadCallbackAboveL = null;
                }

            } else if (mUploadMessage != null) {
                if (resultCode == RESULT_OK) {
                    mUploadMessage.onReceiveValue(result);
                    mUploadMessage = null;
                } else {
                    mUploadMessage.onReceiveValue(Uri.EMPTY);
                    mUploadMessage = null;
                }

            }
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
        if (requestCode != PHOTO_REQUEST || mUploadCallbackAboveL == null) {
            return;
        }
        Uri[] results = null;
        if (resultCode == Activity.RESULT_OK) {
            if (data == null) {
                results = new Uri[]{imageUri};
            } else {
                String dataString = data.getDataString();
                ClipData clipData = data.getClipData();
                if (clipData != null) {
                    results = new Uri[clipData.getItemCount()];
                    for (int i = 0; i < clipData.getItemCount(); i++) {
                        ClipData.Item item = clipData.getItemAt(i);
                        results[i] = item.getUri();
                    }
                }

                if (dataString != null)
                    results = new Uri[]{Uri.parse(dataString)};
            }
        }
        mUploadCallbackAboveL.onReceiveValue(results);
        mUploadCallbackAboveL = null;
    }

四,WebView中打开下载链接

 @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {//8.0以上
                Uri url = request.getUrl();
                String strUrl = url.toString();
                if (!TextUtils.isEmpty(strUrl)) {
                   if (strUrl.endsWith(".pdf")) {//打开一个pdf文件的下载链接
                       //                    openBrowsable(strUrl);
                    downloadBySystem(strUrl, "inline", "application/pdf");
                    }else{
                        view.loadUrl(strUrl);
                    }
                }
                return true;
            }

    /**
     * 直接用浏览器打开
     * @param strUrl 文件下载路径
     */
    private void openBrowsable(String strUrl) {
        Uri uri = Uri.parse(strUrl);
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        intent.addCategory(Intent.CATEGORY_BROWSABLE);
        startActivity(intent);
    }

    /**
     * 系统下载
     * @param url 文件下载路径
     * @param contentDisposition 描述
     * @param mimeType 类型
     */
    private void downloadBySystem(String url, String contentDisposition, String mimeType){
        if (TextUtils.isEmpty(url)) return;
        DownloadManager.Request request = new DownloadManager.Request(Uri.parse(url));//指定下载地址
        request.allowScanningByMediaScanner();//允许媒体扫描,根据下载的文件类型被加入相册,音乐等媒体库
        request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);//设置通知的显示类型,下载进行时和完成后进行通知
        String[] split = url.split("/");
        request.setTitle(split[split.length -1]);//设置通知栏的标题,默认使用文件名
        request.setDescription("Description");//设置通知栏的描述
        request.setAllowedOverMetered(false);//设置是否允许在计费流量下下载
        request.setVisibleInDownloadsUi(false);//设置是否允许记录在下载管理界面可见
        request.setAllowedOverRoaming(true);//设置是否允许在漫游时下载
        request.setAllowedNetworkTypes(DownloadManager.Request.NETWORK_WIFI);//设置允许下载的网络类型

        String fileName = URLUtil.guessFileName(url, contentDisposition, mimeType);
        Log.e("LHC", "fileName:"+ fileName);
        request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, fileName);//
        DownloadManager downloadManager = (DownloadManager) getSystemService(Activity.DOWNLOAD_SERVICE);
        long downloadId = downloadManager.enqueue(request);
        Log.e("LHC", "downloadId:"+ downloadId);

    }

    private class DownloadCompleteReceiver extends BroadcastReceiver{

        @Override
        public void onReceive(Context context, Intent intent) {
            if (intent != null){
                if (DownloadManager.ACTION_DOWNLOAD_COMPLETE.equals(intent.getAction())){
                    long downloadID = intent.getLongExtra(DownloadManager.EXTRA_DOWNLOAD_ID, -1);
                    Log.e("LHC", "downloadID:"+downloadID);
                    DownloadManager downloadManager = (DownloadManager) getSystemService(Activity.DOWNLOAD_SERVICE);
                    String mimeTypeForDownloadedFile = downloadManager.getMimeTypeForDownloadedFile(downloadID);
                    Log.e("LHC", "mimeTypeForDownloadedFile:"+mimeTypeForDownloadedFile);
                    if (TextUtils.isEmpty(mimeTypeForDownloadedFile)){
                        mimeTypeForDownloadedFile = "*/*";
                    }
                    Uri uriForDownloadedFile = downloadManager.getUriForDownloadedFile(downloadID);
                    Log.e("LHC", "uriForDownloadedFile:"+uriForDownloadedFile);
                    if (uriForDownloadedFile != null){
                        Intent handlerIntent = new Intent(Intent.ACTION_VIEW);
                        handlerIntent.setDataAndType(uriForDownloadedFile, mimeTypeForDownloadedFile);
                        context.startActivity(handlerIntent);
                    }
                }
            }
        }
    }

protected void initData() {
        downloadCompleteReceiver = new DownloadCompleteReceiver();
        IntentFilter intentFilter = new IntentFilter();
        intentFilter.addAction(DownloadManager.ACTION_DOWNLOAD_COMPLETE);
        registerReceiver(downloadCompleteReceiver, intentFilter);
    }

五,WebView中长按图片保存

        webView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                final WebView.HitTestResult hitTestResult = webView.getHitTestResult();
                // 如果是图片类型或者是带有图片链接的类型
                if (hitTestResult.getType() == WebView.HitTestResult.IMAGE_TYPE ||
                        hitTestResult.getType() == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
                    // 弹出保存图片的对话框
                    AlertDialog.Builder builder = new AlertDialog.Builder(WebActivity.this);
                    builder.setTitle("提示");
                    builder.setMessage("保存图片到本地");
                    builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            picUrl = hitTestResult.getExtra();//获取图片链接
                            //保存图片到相册
                            new Thread(new Runnable() {
                                @Override
                                public void run() {
                                    new SaveImage().execute();
                                }
                            }).start();
                        }
                    });
                    builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                        // 自动dismiss
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                        }
                    });
                    AlertDialog dialog = builder.create();
                    dialog.show();
                    return true;
                }
                return false;//保持长按可以复制文字
            }
        });

    /***
     * 功能:用线程保存图片
     *
     * @author wangyp
     */
    private class SaveImage extends AsyncTask<String, Void, String> {
        @Override
        protected String doInBackground(String... params) {
            String result = "";
            try {
                String sdcard = Environment.getExternalStorageDirectory().toString();
                File file = new File(sdcard + "/Download");
                if (!file.exists()) {
                    file.mkdirs();
                }
                int idx = picUrl.lastIndexOf(".");
                file = new File(sdcard + "/Download/" + new Date().getTime() + System.currentTimeMillis()+ ".png");
                InputStream inputStream = null;
                URL url = new URL(picUrl);
                HttpURLConnection conn = (HttpURLConnection) url.openConnection();
                conn.setRequestMethod("GET");
                conn.setConnectTimeout(20000);
                if (conn.getResponseCode() == 200) {
                    inputStream = conn.getInputStream();
                }
                byte[] buffer = new byte[4096];
                int len = 0;
                FileOutputStream outStream = new FileOutputStream(file);
                while ((len = inputStream.read(buffer)) != -1) {
                    outStream.write(buffer, 0, len);
                }
                outStream.close();
                result = "保存成功";
            } catch (Exception e) {
                result = "保存失败!";
            }
            return result;
        }

        @Override
        protected void onPostExecute(String result) {
            showToast(result);
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容