WebView中java和JavaScript相互调用

Java和JavaScript相互调用

今天我们介绍WebView 和JavaScript是这么相互调用的。

首先我们在assets目录下创建一个js2java的html文件（在AS中创建html的3中方式，https://www.jianshu.com/p/9a74d4700e31），如下图：

屏幕快照.png

html文件的内容也很简单：

    
    




    test

    吐司测试

我们在html中定义了两个js方法，test()和toastTest()，然后定义了两个按钮，并定义了点击事件，指向了两个方法。

Android代码中，定义布局：

Activity中的代码如下：

public class JavaJSActivity extends AppCompatActivity {
    Button test_js;
    WebView web_view;
    WebSettings webSettings;
    //file:///android_asset/ 这个路径是Android中访问本地asset目录的
    String url = "file:///android_asset/js2java";
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_javajs);

        web_view = findViewById(R.id.web_view);

        test_js =  findViewById(R.id.test_js);

        init();

    }

    @SuppressLint("JavascriptInterface")
    private void init() {
        webSettings = web_view.getSettings();
        webSettings.setJavaScriptEnabled(true);

        web_view.loadUrl(url);

        //java调用js的代码
       test_js.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               web_view.loadUrl("JavaScript:test("+"'wgp'"+")");
           }
       });

       //js代码调用Android中的java代码，需要添加两个注解
        //@SuppressLint("JavascriptInterface") 和 需要调用的方法加上注解@JavascriptInterface
       web_view.addJavascriptInterface(new Object(){
           @JavascriptInterface
           public void callFromJS(String text){
               Toast.makeText(JavaJSActivity.this,text,Toast.LENGTH_SHORT).show();
           }
       },"wgp");

       //设置上这个 我们就可以允许在webview中弹出JS的alert()了
       web_view.setWebChromeClient(new WebChromeClient(){
           @Override
           public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
               return super.onJsAlert(view, url, message, result);
           }
       });

    }


}

运行效果.gif

总结：

1. 在java中调用JS代码，需要web_view.loadUrl("JavaScript:函数"); 这个格式是固定的，方法名要和JavaScript中的函数名字保持一致，其实就是告诉webview，我是要调用JavaScript中的那个函数。
2. JavaScript代码调用java代码， 需要web_view.addJavascriptInterface(object,name),这里面第一个参数是一个对象，这个对象一定要有一个和JavaScript中的方法名字是一样的；name代表javascript中第一个参数中的方法名字之前的名字。说起来有点绕。如上面的代码window.wgp.callFromJS("我是JavaScript"); 这里name必须是wgp，也就是window和方法名之间的这段。