Android五分钟轻松教会你掌握WebView与JS交互

[[189497]]

创新互联建站专注于企业营销型网站、网站重做改版、鼓楼网站定制设计、自适应品牌网站建设、H5建站成都做商城网站、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为鼓楼等各大城市提供网站开发制作服务。

背景:Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、JS的相关开发技术,以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖,通常会在原生的Android 嵌入部分的html了。

这样一来就避免不了为js数据交互。

我们新建一个简单的布局,只有一个webview控件

 
 
 
  1. android:layout_width="fill_parent" 
  2. android:layout_height="wrap_content" 
  3. /> 

我们找到这个webView,并加上载本地的main.html,其中main.html存储在工程文件的assets根目录下。

 
 
 
  1. WebView webView = (WebView) findViewById(R.id.webView); 
  2. webView.addJavascriptInterface(newJSObject(context), "aikaifa"); 
  3. WebSettings webSettings = webView.getSettings(); 
  4. webSettings.setJavaScriptEnabled(true);// 支持js 
  5. Handler handler = new Handler(); 
  6. handler.postDelayed(new Runnable() { 
  7. public void run() { 
  8. webView.loadUrl("file:///android_asset/main.html"); 
  9. }, 500); 

1.js调用Android方法

细心的你应该会注意到上面有个JSObject类,没错,就是这个开启了入口,前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示,可以随便改成你喜欢的。

我们来看一下JSObject这个类:

 
 
 
  1. public class JSObject { 
  2.  private Context context; 
  3.  public JSObject(Context context){ 
  4.  this.context=context; 
  5. @JavascriptInterface 
  6.  public void goBack({ 
  7.  Activity activity = (Activity) context; 
  8.  activity.finish(); 
  9.  } 

该类定义了goBack方法,注入JS可以调用。

js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。

这样前端就可以很方便调用我们Android这边的方法了。

2.Android调用JS方法

既然js可以调用我们的方法,那我们同样也调用js方法

例如我们想调用js 中getName方法。

我们可以这样写。

 
 
 
  1. public void getTestJS() 
  2.    Timertimer = new Timer(); 
  3.    final Handler handler = new Handler(){ 
  4.    public void handleMessage(Message msg) { 
  5.        switch (msg.what) { 
  6.           case 1: 
  7.          webView.loadUrl("javascript:getName()"); 
  8.          break; 
  9.     } 
  10.    super.handleMessage(msg); 
  11.   } 
  12. }; 
  13.    timer.schedule(new TimerTask() { 
  14.    public void run() { 
  15.             Message msg = new Message(); 
  16.             msg.what = 1; 
  17.              handler.sendMessage(msg); 
  18.        } 
  19.     }, 500, 500); 

其中getName方法是js中的一个方法,我们可以在需要的地方调用getTestJS方法就可以了。

这样WebView与js交互就大致完成了。

本文标题:Android五分钟轻松教会你掌握WebView与JS交互
浏览地址:http://www.shufengxianlan.com/qtweb/news32/139782.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联