您的位置：首页 > 移动开发 > Android开发

Android webview和js的相互调用

2015-11-24 11:35 363 查看 

function  javaToJs(params){alert(params);}

    最近发现公司很多项目用到了很多h5,有很多界面还需要使用js和android的相互调用.虽然说不难,但是对于刚接触的新手来说难免为遇到一些小问题.下面我就从h5代码和android代码简单的叙述一下.   先写一个H5的代码:

  

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js和android</title><script>function shareToPlat(paras){window.jsObj.shareToPlatJava(paras);}function  javaToJs(params){alert(params);}</script><style>#button {height: 100px;color: black;}</style></head><body><button id="button" onclick="shareToPlat('js调用java,我是传递的参数')">js调用android代码</button></body></html>

代码解释:

<pre name="code" class="html">window.jsObj.shareToPlatJava(paras);


  window代表当前的窗体,jsObj是在java代码中绑定的js对象,shareToPlatJava()是绑定的对象中需要调用的方法.
</pre><p><pre name="code" class="html">function  javaToJs(params){alert(params);}
 这个是java调用js的方法,代码很简单只是简单的弹出一个提示框而已,并从Java代码中传递了一个参数过来.

下面看看android的代码
 
MainActivity:
package com.example.jsclickjava;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends Activity implements OnClickListener {private WebView wv;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);wv = (WebView) findViewById(R.id.wv);findViewById(R.id.javaTojs).setOnClickListener(this);wv.getSettings().setJavaScriptEnabled(true);//很重要,表明支持js代码wv.addJavascriptInterface(new JsObject(this).onClickShare(), "jsObj");//wv.loadUrl("file:///android_asset/sharesdk.html");//加载本地文件的时候是放在assert文件夹内wv.setWebChromeClient(new WebChromeClient());//如果希望弹出对话框必须加上这句话}@Overridepublic void onClick(View v) {wv.loadUrl("javascript: javaToJs('java调用js代码,我是传递的参数')");//调用Js代码}}
JsObject:
package com.example.jsclickjava;import android.app.Activity;import android.app.Dialog;import android.webkit.JavascriptInterface;/**** @author chenhaigen**  js和java代码相互调用的方法卸载这个类里面*/public class JsObject {private Activity activity;public JsObject(Activity activity) {this.activity=activity;}/*** @return 返回需要绑定到js的对象** 对象里面的方法名称一定要和js里面调用的方法名和参数一致*/public  Object onClickShare(){return  new Object(){@JavascriptInterface/*这句代码很重要,4.2以上的版本必须加载这句代码*/public void shareToPlatJava(String params){Dialog dialog = new Dialog(activity);dialog.setCancelable(true);dialog.setCanceledOnTouchOutside(true);dialog.setTitle(params);dialog.show();}};}}


XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="@android:color/white"tools:context="com.example.jsclickjava.MainActivity" ><WebViewandroid:id="@+id/wv"android:layout_width="fill_parent"android:layout_height="wrap_content"/><Buttonandroid:id="@+id/javaTojs"android:layout_width="100dip"android:layout_height="100dip"android:text="java调用js代码并带参数"/></LinearLayout>


以上就是全部代码

几个常见的错误:
1:11-24 06:01:17.900: I/chromium(28017): [INFO:CONSOLE(9)] "Uncaught TypeError: Object [object Object] has no method 'shareToPlatJava'", source: file:///android_asset/sharesdk.html (9)
出现一般是由于你没有加响应的注解导致的:
在js调用java代码的时候在4.2版本以上需要加上:@JavascriptInterface  这个注解.
具体可以看这篇文章:
http://blog.csdn.net/zgjxwl/article/details/9627685

2:怎么都不弹出alert:
webview只是一个承载体,真正的渲染等还需要使用webviewChromClient去实现,所以只需要增加默认的WebChromeClient();就可以了
wv.setWebChromeClient(new WebChromeClient());


3:js无法调用Java代码:
 首先确定你绑定的对象的别名.和你h5里面调用的是一模一样的,像我上面使用的别名就是"jsObj",所以我在h5里面写js的时候也必须是这个
window.jsObj.shareToPlatJava(paras);
如果不一样就无法调用成功,在就是需要看下你抵用的方法有没有返回一个object对象回来,如果没有返回一个具体的绑定对象,也无法绑定成功

最后附上运行的效果图:


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航