Android WebView系列文章2-WebView和js交互

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/m0_37700275/article/details/76715169

目录介绍
1.WebView和Js交互方式
2.Android调用JS脚本
3.JS调用Android方法
4.Android 调用HTML中的javascript脚本并传递参数
5.HTML中的javascript脚本调用Android本地代码并传递参数
6.案例:H5页面点击图片监听图片链接地址

1.WebView和Js交互的几种方式

Android去调用JS的代码
JS去调用Android的代码

对于android调用JS代码的方法有2种:

1. 通过WebView的loadUrl()
2. 通过WebView的evaluateJavascript()

对于JS调用Android代码的方法有3种:

1. 通过WebView的addJavascriptInterface()进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3. 通过 WebChromeClient 的onJsAlert()onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt()消息

2. Android调用JS脚本
对于Android调用JS代码的方法有2种:

- 通过WebView的loadUrl()
- 通过WebView的evaluateJavascript()
**通过WebView的evaluateJavascript()**

优点:该方法比第一种方法效率更高、使用更简洁。
1. 因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
2. Android 4.4 后才可使用

//只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        //此处为 js 返回的结果
    }
});

**通过WebView的loadUrl()**

直接Webview调用loadUrl方法,里面是JS的方法名,并可以传入参数,javascript:xxx()方法名需要和JS方法名相同
contentWebView.loadUrl("javascript:javacalljs()");

HTML代码
Paste_Image.png

使用建议

两种方法混合使用,即Android 4.4以下使用方法1,Android 4.4以上方法2

//Android版本变量
final int version = Build.VERSION.SDK_INT;
//因为该方法在 Android 4.4 版本才可使用,所以使用时需进行版本判断
if (version < 18) {
    mWebView.loadUrl("javascript:callJS()");
} else {
    mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

3. JS调用Android方法
在Java代码中添加下面这句,webview绑定javascriptInterface,js脚本通过这个接口来调用java代码, 第一个参数是自定义类对象,映射成JS对象,这里我直接传this,第二个参数是别名,JS脚本通过这个别名来调用java的方法,这个别名跟HTML代码中也是对应的

contentWebView.addJavascriptInterface(MainActivity.this,"android");

HTML代码
Paste_Image.png

4.Android 调用HTML中的javascript脚本并传递参数

WebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");

HTML代码

Paste_Image.png

5. HTML中的javascript脚本调用Android本地代码并传递参数

Android Java代码
@JavascriptInterface
public void startFunction(final String text){
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            new AlertDialog.Builder(WebViewFiftyActivity.this).setMessage(text).show();
        }
    });
}

HTML代码
function javacalljswith(arg){
    document.getElementById("content").innerHTML =
        ("<br\>"+arg);
}

6.案例:H5页面点击图片监听图片链接地址

settings.setJavaScriptEnabled(true);
wv_view.addJavascriptInterface(new ImageJs(this),"imageListener");

/**打开图片js通信接口*/
private class ImageJs {
    private final Activity activity;
    public ImageJs(Activity activity) {
        this.activity = activity;
    }
    // 下面的@SuppressLint("JavascriptInterface")最好加上。防止在某些版本中js和java的交互不支持。
    //@SuppressLint("JavascriptInterface")
    @android.webkit.JavascriptInterface
    public void openImage(String img) {
        Log.i("url地址","图片"+ img);
        **//跳转页面**
    }
}

/**添加图片点击事件的js代码,网上找到,就是这样写,不需要明白*/
private void addImageClickListner() {
    String jsCode="javascript:(function(){" +
            "var imgs=document.getElementsByTagName(\"img\");" +
            "for(var i=0;i<imgs.length;i++){" +
            "imgs[i].onclick=function(){" +
            "window.imageListener.openImage(this.src);" +    //imageListener自定义,openImage要与js通信接口相同
            "}}})()";
    wv_view.loadUrl(jsCode);
}

后续:
          知乎:https://www.zhihu.com/people/yang-chong-69-24/pins/posts
          领英:https://www.linkedin.com/in/chong-yang-049216146/
          简书:http://www.jianshu.com/u/b7b2c6ed9284
          csdn:http://my.csdn.net/m0_37700275
          网易博客:http://yangchong211.blog.163.com/
          新浪博客:http://blog.sina.com.cn/786041010yc
          github:https://github.com/yangchong211
          喜马拉雅听书:http://www.ximalaya.com/zhubo/71989305/

阅读更多
换一批

没有更多推荐了,返回首页