Android WebView与JS交互全面详解(小结)-前端开发

下面我来为你详细讲解“Android WebView与JS交互全面详解(小结)”的完整攻略。

下面我来为你详细讲解“Android WebView与JS交互全面详解(小结)”的完整攻略。

了解Android WebView和JS交互的基本概念

在开始介绍Android WebView与JS交互的具体内容前，我们需要先了解一些基础概念：

WebView：Android中的一个内置控件，提供了一个用于显示web界面的View。WebView可以加载网页上的HTML、CSS、JavaScript脚本等内容。
JavaScript：一种脚本语言，最初被设计用于网页的交互和动态变化。JS可以通过在网页中内联代码或链接外部文件的方式被引入到网页中。
JS Bridge：指在WebView中，实现Java和JavaScript交互的桥梁。

Android WebView与JS交互的方法

实现Android WebView与JS交互的方法大致可分为以下四种：

通过WebView.loadUrl()方法实现

该方法适合于Java调用JS代码。Java代码可以通过WebView的loadUrl方法来向JS中注入JavaScript代码或者调用JS中的JavaScript函数。具体实现步骤如下：

调用WebView的loadUrl()方法，将JS中的JavaScript代码或者JavaScript函数注入到WebView中，这样JS就可以访问该代码或函数。例如：

webView.loadUrl("javascript:document.getElementById('xxx').innerHTML='xxx'");

在JS中编写JavaScript代码或给JavaScript函数取一个名字，调用Java中的方法，例如：

// JS代码
function jsFunction() {
  window.androidFunction.showMsg();
}

// Java代码
WebView webView = findViewById(R.id.webView);
webView.addJavascriptInterface(new JsInterface(),"androidFunction");

class JsInterface {
    @JavascriptInterface
    public void showMsg() {
        Toast.makeText(MainActivity.this, "JS调用了Java的方法", Toast.LENGTH_LONG).show();
    }
}

通过WebView.evaluateJavascript()方法实现

该方法适合于Java调用JS代码并获取返回值。Java代码可以通过WebView的evaluateJavascript()方法来调用JS中的JavaScript函数，并获取返回值。具体实现步骤如下：

在JS中编写需要被Java调用的JavaScript代码或函数并给其取一个名字，例如：

// JS代码
function jsFunction(s) {
  return "返回值为：" + s;
}

在Java中调用evaluateJavascript()方法并传入JavaScript函数名和需要传递的参数，此时可以设置一个回调函数，来获取JS函数返回值。例如：

webView.evaluateJavascript("jsFunction('参数值')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(MainActivity.this, value, Toast.LENGTH_LONG).show();
            }
        });

通过添加JS Interface实现

该方法适用于JS调用Java方法。Java代码可以使用addJavascriptInterface()方法将一个Java对象暴露给JS使用，此时JS可以通过该Java对象来调用Java方法。具体实现步骤如下：

在Java中，创建一个对象并注解@JavascriptInterface，例如：

class JsInterface {
    @JavascriptInterface
    public void showToast(String msg) {
        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_LONG).show();
    }
}

在WebView中添加JS Interface，例如：

webView.addJavascriptInterface(new JsInterface(), "android");

在JS中使用JavaScript调用该Java对象的方法，例如：

<script type="text/javascript">
    function showToast() {
        window.android.showToast("Javascript调用了Java方法");
    }
</script>

通过 WebViewClient 的方法实现

该方法适用于捕获JS调用Java的方法。当JS需要调用Java中的方法时，WebView会调用一个shouldOverrideUrlLoading()方法，此时可以通过该方法捕获JS调用的URL并做出相应的处理。具体实现步骤如下：

在JS中，调用某个特定的URL，并添加一些特定的参数，例如：

function JsToJava() {
   var url= "myApp://actionName?params1"+params1+"&params2="+params2;
   location.href=url;         
}

在shouldOverrideUrlLoading()方法中，解析URL并调用Java方法，例如：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
   Uri uri=Uri.parse(url);
   if (uri.getScheme().equals("myApp")) {
      if (uri.getHost().equals("actionName")) {
          String params1 = uri.getQueryParameter("params1");
          String params2 = uri.getQueryParameter("params2");
          Toast.makeText(WebviewActivity.this, "JS调用了Java方法：" + params1, Toast.LENGTH_LONG).show();
      }
      return true;
   }
   return super.shouldOverrideUrlLoading(view, url);
}

示例说明

下面给出两个示例说明：

示例一

在JS中调用Java方法，并返回结果。具体实现步骤如下：

<!--在HTML中编写调用Java的JS代码-->
<button onclick="getAndroidVersion()">获取Android系统版本号</button>
<script type="text/javascript">
function getAndroidVersion() {
    var version = window.android.getAndroidVersion();
    alert(version);
}
</script>

// 在MainActivity中调用evaluateJavascript方法
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //JS代码执行完成后，调用JS中的方法获取Android系统版本号
        webView.evaluateJavascript("javascript:getAndroidVersion()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(MainActivity.this, value, Toast.LENGTH_LONG).show();
            }
        });
    }
});
webView.loadUrl("file:///android_asset/index.html");

// 在JsInterface中添加getAndroidVersion方法
@JavascriptInterface
public String getAndroidVersion() {
    return Build.VERSION.RELEASE;
}

示例二

在Java中调用JS代码。具体实现步骤如下：

// 在MainActivity中调用loadUrl方法
webView.loadUrl("javascript:document.getElementById('xxx').innerHTML='Hello World!'");

// 在JS中编写需要被调用的函数
function jsFunction() {
    window.androidFunction.showMsg();
}

// 在JsInterface中添加showMsg方法
@JavascriptInterface
public void showMsg() {
    Toast.makeText(MainActivity.this, "JS调用了Java方法", Toast.LENGTH_LONG).show();
}

以上就是Android WebView与JS交互的完整攻略，希望对你有所帮助。