WebView和Web的交互的两种方式

最新推荐文章于 2024-09-27 04:15:00 发布

SammieZhang

最新推荐文章于 2024-09-27 04:15:00 发布

阅读量600

点赞数

分类专栏： android 文章标签： webview js

本文链接：https://blog.csdn.net/weiwei00200/article/details/52636591

版权

android 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

方式一

H5页面

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
	//提供这个方法给java调用
    function callJs(jsonString){
    	//处理业务
		//业务处理完毕，如果需要的话可调用window.android.call(jsonString) 通知Java
    }
    
    function s(){
    	var jsonString = '{"action": "JumpToPageA","data": {"id": 0}}'
		var resultJson = window.android.call(jsonString) ;   //android是UA, call是Java的方法
		document.getElementById("p").innerHTML=resultJson ;
    }

    </script>
</head>
<body>
	<button onclick="s()">调用Java方法</button>
	<a href="file:///android_asset/test2.html">点击</a>
	<p id="p"></p>
</body>
</html>

Android的WebView页面

public class WebViewControlActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_js);
        mWebView = (WebView) findViewById(R.id.id_webview);

        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(new JsInteration(), "android");
        WebSettings setting = mWebView.getSettings();
        setting.setJavaScriptEnabled(true);
        setting.setDomStorageEnabled(true);//H5如果有缓存功能会用到
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.equals("file:///android_asset/test2.html")) {
                    Toast.makeText(WebViewControlActivity.this, "点击了对应的链接", Toast.LENGTH_SHORT).show();
                    return true;
                } else {
                    mWebView.loadUrl(url);
                    return false;
                }
            }
        });
    }

   /**
     * Java调用js方法
     *
     * @param methodName JS方法名
     * @param jsonStr    返回给JS的Json
     */
    @NotProguard
    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void javaCallJs(String methodName, String jsonStr) {
        //调用JS方法必须在UI线程执行
        webView.post(() -> {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                //Android4.4以上
                webView.evaluateJavascript(methodName + "(" + jsonStr + ")", value -> {
                            //这个回调暂时用不上
                        }
                );
            } else {
                webView.loadUrl("javascript:" + methodName + "(" + jsonStr + ")");
            }
        });
    }

    public class JsInteration {
        @JavascriptInterface
        public String call(jsonString) {
        	//step1：根据jsonString中的action字段得知js需要java做什么事情
            //step2：如果需要通知js结果，就调用javaCallJs方法通知js
        }
    }
}

Android调用JS：
mWebView.evaluateJavascript();作用是调用了JS方法并监听返回值,这种方式最低支持Android4.4，如果是以下的版本，就用loadUrl的方式调用，然后在JS中再调用java的接口回调出返回结果。 ps:这种JS注入的方法只是在使用api的时候注意区分Android版本即可，最低安卓版本限制为4.0。
JS调用Android：
1）在Java端定义Class，并将方法标注为@JavascriptInterface
2）Java调用mWebView.addJavascriptInterface(new JsInteration(), “android”)

建议做法：
1）java端提供call(jsonString)方法。
2）web端提供call(jsonString)方法。
3）互相传递的json格式如下，通过action来告知此次的动作是用来做什么的并把需要的业务参数放在data中。

{
"action": "",
    "data": {
        "id": 0
    }
}

方式二

js调用java方面可以拦截URL做判断，java调用js还是跟方式一一样。

	webView.setWebViewClient(new WebViewClient() {
	    @Override
	    public boolean shouldOverrideUrlLoading(WebView view, String url) {
	        if(url.contains("toPay")){
				//拦截做自己的事情
				//......
				return true;
			}
	        view.loadUrl(url);
	        return false;
	    }
	 }

总结：建议使用方法一，简洁，通用，不用建立过多的方法给对方