andorid之WebView与js交互方式

一、通过addJavascriptInterface方法进行添加对象映射

这种方式不多解释了，也是Android中最常用的方式，但是这种方式会存在风险就是上面说到的漏洞问题。

class JSObject {
    @JavascriptInterface // sdk17版本以上加注解
    public String getPwd(String txt) {
        return "123456";
    }
}

这里定义一个简单的本地对象，在需要被调用的方法加上约束注解。JS代码也很简单：

function clickone() {
    var result = myObj.getPwd("111");
    alert("one method result:" + result);
}

这种方式的好处在于使用简单明了，本地和JS的约定也很简单，就是对象名称和方法名称约定好即可，缺点就是存在漏洞问题(4.2系统之前版本会有漏洞)。

mWebView.addJavascriptInterface(new JSObject(), "myObj");

二、利用WebViewClient接口回调方法拦截url

这种方式其实实现也很简单，就是我们可以添加 WebViewClient 回调接口，在 shouldOverrideUrlLoading 回调方法中拦截url，然后解析这个url的协议，如果发现是我们约定好的协议就开始解析参数执行具体逻辑：

代码也很简单，这个方法可以拦截 WebView 中加载url的过程，得到对应的url，我们就可以通过这个方法，和网页JS约定好一个协议，看一下JS代码：

function clicktwo() {
    document.location = "js://demo?arg1=111";
}

这个JS代码执行之后，就会触发本地的 shouldOverrideUrlLoading 方法，然后进行参数解析，调用指定方法。

这个方法是不会存在第一种方法的漏洞问题，但是细心的同学可以发现，这里本地和JS之间的约定有点繁琐，比如要约定好协议，参数名称等信息，没有第一种方式方便。而且最主要的问题是，这个只能主动的调用本地化方法，如果想得到方法的返回值，只能通过 WebView 的 loadUrl 方法去执行JS方法，把返回值传递回去：mWebView.loadUrl("javascript:clicktworesult("+res+")");

function clicktworesult(result) {
    alert("three method result:" + result);    
}

看到这种方式是非常繁琐的。在Android中也是不提倡使用的。

注意：在 iOS 中没有像 Android 中的第一种方式，他也是为了安全考虑，所以 iOS 中的交互就是采用的第二种方式，通过拦截url 来进行操作的。

第三种方式：利用WebChromeClient回调接口的三个方法拦截消息

这个方法的原理其实和第二种方式差不多，只是拦截的接口方法不一样：

Android中的 WebView 添加 WebChromeClient 接口，可以拦截JS中的几个提示方法，也就是几种样式的对话框，在JS中有三个常用的对话框方法：

alert 是弹出警告框，在文本里面加入\n就可以换行。
confirm 弹出确认框，会返回布尔值，通过这个值可以判断点击时确认还是取消。true表示点击了确认，false表示点击了取消。
prompt 弹出输入框，点击确认返回输入框中的值，点击取消返回null。

那么这三种对话框都是可以在本地拦截到的，那么第三种方法的原理就是拦截这些方法，得到他们的消息内容，然后解析即可，比如这里我们拦截了 prompt 方法内容：

function clickthree() {
    var result = prompt("js://demo?arg1=111", "");
    alert("two method result:" + result);
}

为什么要拦截 prompt 方法，因为这个方法可以返回想要的值，而对于 alert 是无法得到返回值的，confirm 只能得到两个返回值。只有 prompt 方法可以返回各种类型的值，操作最方便。

然后在这个方法中和第二种方法一样的原理解析消息内容即可。

andorid之WebView与js交互方式

猜你喜欢