相比于 Native App 和 Web App，Hybrid App 凭借其迭代灵活、控制自如、多端同步的优点在应用市场上愈加显得优胜，主要得力于，其将变动频繁的部分产品功能使用 H5 开发并在客户端中借助 WebView 控件嵌入应用当中。因此，开发中咱们总会遇到原生 Java 代码与网页中的 Js 代码之间相互调用从而产生的交互问题。

Java 与 Js 彼此调用的前提是设置 WebView 支持 JavaScript 功能：javascript

mWebView.getSettings().setJavaScriptEnabled(true);

Java 调用 Js

第一步，在网页中使用 Js 定义提供给 Java 访问的方法，就像普通方法定义同样，如：

<script type="text/javascript">
    function javaCallJs(message){
        alert(message);
    }
</script>

第二步，在 Java 代码中按照 "javascript:XXX" 的 Url 格式使用 WebView 加载访问便可：html

mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");

注意：String 类型的参数须要使用单引号 “'” 包裹，数组类型的参数则不用，如：javascript:javaCallJs([01, 02, 03])，其余复杂类型的参数能够转换为 Json 字符串的形式传递。java

Js 调用 Java

第一步，在 Java 对象中定义 Js 访问的方法，如：

@JavascriptInterface
public void jsCallJava(String message){
    Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}

注意事项：提供给 Js 访问的属性和方法必须定义为 public 类型，而且添加注解 @JavascriptInterface。在 API 17 及更高版本的系统中，任何暴露给 Js 访问的 Java 接口都须要添加这个注解，不然会报异常：Uncaught TypeError: Object [object Object] has no method 'XXX'。系统这种作法也是为了下降应用的安全隐患，由于在以前的版本中，Js 能够经过反射的方式访问注入 WebView 中的 Java 对象的 public 类型 field 和 method，从而随意修改宿主程序。

第二步，将提供给 Js 访问的接口内容所属的 Java 对象注入 WebView 中：android

mWebView.addJavascriptInterface(MainActivity.this, "main");

addJavascriptInterface(Object object, String name) 参数说明：object 表示 Js 访问的接口内容所在的 Java 对象；name 表示 Js 调用 Java 代码时的接口名称，与 Js 中的调用保持一致便可。web

第三步，Js 按照指定的接口名访问 Java 代码，有以下两种写法：数组

<button type="button" onClick="javascript:main.jsCallJava('Message From Js')" >Js Call Java</button>

<!--<button type="button" onClick="window.main.jsCallJava('Message From Js')" >Js Call Java</button>-->

这里简单提供一个可供测试的 Html 网页和 Activity 代码：安全

test.html:ide

<html>  
    <head>  
        <meta http-equiv="Content-Type"  content="text/html;charset=UTF-8">
        <script type="text/javascript">
            function javaCallJs(message){
                alert(message);
            }
        </script>
    </head>  
    <body>
        <button type="button" onClick="window.main.jsCallJava('Message From Js')" >Js Call Java</button>
    </body>  
</html>

MainActivity.java:post

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbarTb = (Toolbar) findViewById(R.id.tb_toolbar);
        setSupportActionBar(mToolbarTb);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(MainActivity.this, "main");

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });
    }

    public void javaCallJs(View v){
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }

    @JavascriptInterface
    public void jsCallJava(String message){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search, menu);
        return super.onCreateOptionsMenu(menu);
    }

}

效果图：测试

https://lc-gold-cdn.xitu.io/0cb1ac02567d72f4d69c.gif?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

注意：不管是 Java 调用 Js 仍是 Js 调用 Java，只能经过参数传递数据，而没法获取彼此方法的返回值！解决方案就是额外添加一层回调来达到这个目的。好比 Java 调用 Js 的方法，Js 计算结束所得结果不能经过 return 语句返回给 Java 调用者，而是再回调 Java 的另外一个方法，经过传参的形式传递给 Java。

注意事项

1.使用 loadUrl() 方法实现 Java 调用 Js 功能时，必须放置在主线程中，不然会发生崩溃异常。好比修改上面的代码：

new Thread(new Runnable() {
    @Override
    public void run() {
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }
}).start();

运行时会获得以下 logcat 异常信息：

java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'Thread-18022'. All WebView methods must be called on the same thread.

若是真的在子线程中遇到调用 Js 的功能，也要将其转换到主线程中去：

mWebView.post(new Runnable() {
    @Override
    public void run() {
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }
});

2.Js 调用 Java 方法时，不是在主线程 (Thread Name：main) 中运行的，而是在一个名为 JavaBridge 的线程中执行的，经过以下代码能够测试：

@JavascriptInterface
    public void jsCallJava(String message){
        Log.i("thread", Thread.currentThread().getName());
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

因此这里须要注意的是，当 Js 调用 Java 时，若是须要 Java 继续回调 Js，千万别在 JavascriptInterface 方法体中直接执行 loadUrl() 方法，而是像前面同样进行线程切换操做。

3.代码混淆时，记得保持 JavascriptInterface 内容，在 proguard 文件中添加以下相似规则 (有关类名按需修改)：

keepattributes *Annotation*
keepattributes JavascriptInterface
-keep public class com.mypackage.MyClass$MyJavaScriptInterface
-keep public class * implements com.mypackage.MyClass$MyJavaScriptInterface
-keepclassmembers class com.mypackage.MyClass$MyJavaScriptInterface { 
    <methods>; 
}

Url 拦截

除了上面这种 Java 与 Js 互调方法的方式，还能够利用 WebView 拦截 Url 的方式实现原生应用与 H5 之间的交互动做。经过 WebViewClient 提供的接口拦截网页内诸如二级跳转的 Url 连接，即可以进行业务逻辑上的判断处理、Url 参数传递等功能，如：

mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // request.getUrl()
        return super.shouldOverrideUrlLoading(view, request);
    }
});

Android WebView —— Java 与 JavaScript 交互总结

Java 调用 Js

Js 调用 Java

注意事项

Url 拦截