JsBrage -- App中WebView与JS的交互桥梁

Posted 2020-11-12 猿来如此

在Hybrid App中网页都是显示在原生的WebView中，js与原生通信都是靠WebView提供的支持方式来实现的，而将这个实现方式抽象封装出来的模块，就是JsBrage。

android：

对于Android调用JS代码的方法有2种： 
1. 通过WebView的loadUrl（），目前项目中用的这种方式 

mWebView.loadUrl("file:///android_asset/javascript.html");
mWebView.loadUrl("javascript:callJS()");

2. 通过WebView的evaluateJavascript（），Android 4.4 后才可使用

mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
});

对于JS调用Android代码的方法有3种： 
1. 通过WebView的addJavascriptInterface（）进行对象映射 ， Android 4.2版本之前有安全漏洞问题

2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url 
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

各有优缺点，参考 https://blog.csdn.net/carson_ho/article/details/64904691

 

ios还没仔细研究：

Ios调用JS代码的方法：

1. loadURL方式可以

2. 在iOS代码处获取webView中javaScriptContext, 得到上下文。直接调用js方法

JS调用Ios代码的方法：

1. 与安卓一样，通过拦截url

2. 在iOS代码处获取webView中javaScriptContext, 得到上下文。注入方法，供js调用

3. 貌似还能直接调用js方法