JavaScript与Android的数据交互，js与安卓数据交互WebView

来源：互联网发布：淘宝店铺怎么刷销量编辑：程序博客网时间：2024/04/30 08:12

本文思路：
1，webview介绍，
2，android中的书写
3，js中的书写，
4，出现的问题，一定要看完。不然。。。就出错了

说道数据交互，首先要先说一下交互需要使用的控件WebView;

简单的介绍下用法：

1，和正常控件一样，声明，初始化，

WebView myWebView = (WebView) findViewById(R.id.webview);

加载网络的url

myWebView.loadUrl(“http://www.google.com“);

加载本地的url,在asset目录下
myWebView.loadUrl(“file:///android_asset/XX.html“);

打开设置，添加js支持，才可以进行与js交互。相当于许可证。

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

//在JSHook类里实现javascript想调用的方法，并将其实例化传入webview, "hello"这个字串告诉javascript调用哪个实例的方法

这是核心方法，

webView.addJavascriptInterface(new JSHook(), "hello");

定义一个类，将方法封装，用来供js调用；

public class JSHook{
public void javaMethod(String p){
Log.d(tag , "JSHook.JavaMethod() called! + "+p);
}

public void showAndroid(){
String info = "来自手机内的内容！！！";
webView.loadUrl("javascript:show('"+info+"')");
}

public String getInfo(){
return "获取手机内的信息！！";
}
}

接下来就是在js脚本中的书写，android中，重要的就这些使用方法，当然还有很多，直说传递用的方法。其他忽略

下面，一个完整的例子：

JavaScript中的书写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>调用Android组件测试</title><script type="text/javascript">    function show(info){        document.getElementById("shows").innerHTML = info;    }</script></head><body><b>测试</b><br /><button onClick="window.hello.javaMethod('param')">启动hello world Activity</button><br /><hr  color="#99FF00"/><button onClick="window.hello.showAndroid()">显示android内容</button><br /><textarea id= "shows"  cols="20" rows="10"> 暂无记录 </textarea><br /></body></html>

安卓中的书写：

public class MainActivity extends ActionBarActivity {    //private static final String URL = "http://shouji.baidu.com/";    private static final String URL = "file:///android_asset/helloworld.html";    private WebView webView;    public String tag = "MainActivity";    private Context mContext;        @SuppressLint("JavascriptInterface")     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);                //this.requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        // 进行全屏        mContext = this;        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,                WindowManager.LayoutParams.FLAG_FULLSCREEN);        webView = (WebView) this.findViewById(R.id.wv);        webView.loadUrl(URL);        webView.getSettings().setJavaScriptEnabled(true);        webView.addJavascriptInterface(new JSHook(), "hello");        webView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                Log.d(tag, " url:"+url);              view.loadUrl(url);// 当打开新链接时，使用当前的 WebView，不会使用系统其他浏览器                return true;            }         });    }      public class JSHook{        @JavascriptInterface        public void javaMethod(String p){            Log.d(tag , "JSHook.JavaMethod() called! + "+p);        }        @JavascriptInterface        public void showAndroid(){            final String info = "来自手机内的内容！！！";            MainActivity.this.runOnUiThread(new Runnable(){                @Override                public void run() {                    webView.loadUrl("javascript:show('"+info+"')");                }            });        }        public String getInfo(){            return "获取手机内的信息！！";        }    }    @Override     //设置回退      //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法      public boolean onKeyDown(int keyCode, KeyEvent event) {          if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {              webView.goBack(); //goBack()表示返回WebView的上一页面             this.finish();            return true;          }          return false;  }}public class JSHook{        public void javaMethod(String p){            Log.d(tag , "JSHook.JavaMethod() called! + "+p);        }                public void showAndroid(){            String info = "来自手机内的内容！！！";            webView.loadUrl("javascript:show('"+info+"')");        }                public String getInfo(){            return "获取手机内的信息！！";        }    }注意的问题：！！！！！！！！！！！！！！！！！！！！
上面这段代码在android4.4版本及之前是没有问题的， 4.4之后就会出现以下两个异常错误。07-10 10:25:21.417: I/chromium(27333): [INFO:CONSOLE(19)] "Uncaught TypeError: Object [object Object] has no method 'showAndroid'", source: file:///android_asset/helloworld.html (19) 解决方法：在js调用方法上面加注解@JavascriptInterface07-10 10:42:58.437: I/chromium(27621): [INFO:CONSOLE(19)] "Uncaught Error: Error calling method on NPObject.", source: file:///android_asset/helloworld.html (19)解决方法：在对界面进行修改时必须在UI线程进行，即便它是Html的界面，因此在出现这个错误的时候可以用handler或runOnUiThread()方法去执行更新UI操作。注：实例代码是排除了在高版本中出现异常的最终代码。异常原因：webview允许JavaScript 控制宿主应用程序，这是个很强大的特性，但同时，在4.2的版本前存在重大安全隐患，因为JavaScript 可以使用反射访问注入webview的java对象的public fields，在一个包含不信任内容的WebView中使用这个方法，会允许攻击者去篡改宿主应用程序，使用宿主应用程序的权限执行java代码。因此4.2以后，任何为JS暴露的接口，都需要加@JavascriptInterface注解，这样，这个Java对象的fields 将不允许被JS访问。

1 0

JavaScript与Android的数据交互，js与安卓数据交互WebView

本文思路：1，webview介绍，2，android中的书写3，js中的书写，4，出现的问题，一定要看完。不然。。。就出错了

JavaScript中的书写：

安卓中的书写：

注意的问题：！！！！！！！！！！！！！！！！！！！！

本文思路：
1，webview介绍，
2，android中的书写
3，js中的书写，
4，出现的问题，一定要看完。不然。。。就出错了