Android总结之WebView与Javascript交互（互相调用）

本篇文章主要介绍了WebView与Javascript进行数据交互，详解的讲诉了WebView与Javascript进行数据交互的方法，有兴趣的可以了解一下。

前言：

最近公司的App为了加快开发效率选择了一部分功能采用H5开发，从目前市面的大部分App来讲，大致分成Native App、Web App、Hybrid App三种方式，个人觉得目前以Hybrid App居多，单纯的数据展示我们直接采用WebView来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript交互数据，关于如何将H5网页呈现在WebView上可以参考这篇博客文章：Android总结之WebView使用总结。

WebView与Javascript交互：

WebView与Javascript交互是双向的数据传递，1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数，具体实现以下面例子为主：

1.）mainfest.xml中加入网络权限

2.）WebView开启支持JavaScript

 mWebView.getSettings().setJavaScriptEnabled(true);

3.）简单的H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下

WebView与Javascript交互

调用打印信息

4.）Native实现与JS交互函数：actionFromJs()、actionFromJsWithParam()

 public class MainActivity extends Activity { private WebView mWebView; private TextView logTextView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mWebView = (WebView) findViewById(R.id.webview); // 启用javascript mWebView.getSettings().setJavaScriptEnabled(true); // 从assets目录下面的加载html mWebView.loadUrl("file:///android_asset/wx.html"); mWebView.addJavascriptInterface(this, "wx"); logTextView = (TextView) findViewById(R.id.text); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { // 无参数调用 mWebView.loadUrl("javascript:actionFromNative()"); // 传递参数调用 mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")"); } }); } @android.webkit.JavascriptInterface public void actionFromJs() { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show(); String text = logTextView.getText() + "\njs调用了Native函数"; logTextView.setText(text); } }); } @android.webkit.JavascriptInterface public void actionFromJsWithParam(final String str) { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show(); String text = logTextView.getText() + "\njs调用了Native函数传递参数：" + str; logTextView.setText(text); } }); } }

mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口，然后给这个起一个别名，我这里起的名字wx（微信哈哈）。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的，在4.2以后才有的。

5.）布局文件实现

6.）代码简单解说

（1.）js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： window.jsObj.actionFromJs()，这里的jsObj就是Native中添加接口的别名

（2.）Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript:actionFromNative()");

demo运行截图：