Android通过使用webview实现和js的交互

通过webview可以加载本地文本数据或者网络数据，实现类似于浏览器的功能

public class MainActivity extends Activity{

     @Override

     protected void onCreate(Bundle savedInstanceState){

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         WebView wv_browser = (WebView)findViewById(R.id.wv_brouse);

         // wv_browser .loadUrl("http://www.zdc.net");//加载网络数据

          wv_browser .loadUrl("file:///android_asset/index.html");//加载assert目录下的html文件

         WebSettings settings =  wv_browser .getSettings();

         settings.setUseWideViewPort(true);

         settings.setSupportZoom(true);//支持缩放

         settings.setJavaScriptEnabled(true);//支持javascript

          wv_browser .setWebViewClient(new WebViewClient() {

              @Override

              public boolean shouldOverrideUrlLoading(WebView view, String url) {

                   view.loadUrl(url);

                   return true;//如果返回false就会通过本机浏览器加载

              }

          });

     }

}

补充：

① android调用js方法：

wv_browser .loadUrl("javascript:changeFont('min')");//字体变小

wv_browser .loadUrl("javascript:changeFont('norm')");// 正常

wv_browser .loadUrl("javascript:changeFont('max')");// 变大

WebView控件的其他方法：

  
  

   
   

    
    // 触摸焦点起作用（如果不设置，则在点击网页文本输入框时，不能弹出软键盘及不响应其他的一些事件）
   
   
   
   

    
    mWebView.requestFocus();
   
   
   
   

    
    // 取消滚动条
   
   
   
   

    
    mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
   
   
   
   

    
    // 允许网页缩放
   
   
   
   

    
    settings().setSupportZoom(true);
   
   
   
   

    
    // 把图片加载放在最后来加载渲染
   
   
   
   

    
    mWebView.getSettings().setBlockNetworkImage(true);
   
   
   
   

    
    回退WebView的加载层级，而不是退出Activity
   
   
   
   

    
    @Override
   
   
   
   

    
    publicboolean onKeyDown(int keyCode,KeyEvent event){
   
   
   
   

    
    // 是否按下返回键，且WebView现在的层级，可以返回
   
   
   
   

    
    if((keyCode ==KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack()){
   
   
   
   

    
    // 返回WebView的上一页面 
   
   
   
   

    
    		mWebView.goBack();
   
   
   
   

    
    returntrue;
   
   
   
   

    
    }
   
   
   
   

    
    returnfalse;
   
   
   
   

    
    }
   
   
   
   

    
    mWebView.setWebViewClient(newWebViewClient(){
   
   
   
   

    
    /**
   
   
   
   

    
    	   * 给WebView加一个事件监听对象（WebViewClient)并重写shouldOverrideUrlLoading，
   
   
   
   

    
    	   * 当按下某个连接时WebViewClient会调用这个方法并传递参数
   
   
   
   

    
    	   */
   
   
   
   

    
    @Override
   
   
   
   

    
    publicboolean shouldOverrideUrlLoading(WebView view,String url){
   
   
   
   

    
    // 此处可添加一些逻辑：是否拦截此url，自行处理
   
   
   
   

    
    // 下方2行代码是指在当前的webview中跳转到新的url
   
   
   
   

    
    		  view.loadUrl(url);
   
   
   
   

    
    returntrue;
   
   
   
   

    
    }
   
   
   
   

    
    });
   
   
   
   

    
    //在WebView开始加载时，显示进度框；加载完毕时，隐藏进度框
   
   
   
   

    
    mWebView.setWebViewClient(newWebViewClient(){
   
   
   
   

    
    /**
   
   
   
   

    
    	  * WebView加载url完成时，会回调此api，可在这个api中隐藏加载进度框
   
   
   
   

    
    	  */
   
   
   
   

    
    @Override
   
   
   
   

    
    publicvoid onPageFinished(WebView view,String url){
   
   
   
   

    
    // 此处可添加一些逻辑：隐藏加载进度框
   
   
   
   

    
    }
   
   
   
   

    
    /**
   
   
   
   

    
    	  * WebView开始加载url时，会回调此api，可在这个api中显示加载进度框
   
   
   
   

    
    	  */
   
   
   
   

    
    @Override
   
   
   
   

    
    publicvoid onPageStarted(WebView view,String url,Bitmap favicon){
   
   
   
   

    
    // 此处可添加一些逻辑：显示加载进度框
   
   
   
   

    
    }
   
   
   
   

    
    });
   
   
  
  

WebSettings常用API：

方法	说明
setAllowFileAccess	启用或禁用WebView访问文件数据
setBlockNetworkImage	是否显示网络图像
setBuiltInZoomControls	设置是否支持缩放
setCacheMode	设置缓冲的模式
setDefaultFontSize	设置默认的字体大小
setDefaultTextEncodingName	设置在解码时时候用的默认编码
setFixedFontFamily	设置固定使用的字体
setJavaScriptEnabled	设置是否支持Javascript
setLayoutAlgorithm	设置布局方式
setLightTouchEnabled	设置用鼠标激活被选项
setSupportZoom	设置是否支持变焦

WebViewClient 常用API：

方法	说明
doUpdateVisitedHistory	更新历史记录
onFormResubmission	应用程序重新请求网页数据
onLoadResource	加载指定地址提供的资源
onPageFinished	网页加载完毕
onPageStarted	网页开始加载
onReceivedError	报告错误信息
onScaleChanged	WebView发生改变
shouldOverrideUrlLoading	控制新的连接在当前WebView中打开

WebChromeClient常用API

方法	说明
onCloseWindow	关闭WebView
onCreateWindow	创建WebView
onJsAlert	处理Javascript中的Alert对话框
onJsConfirm	处理Javascript中的Confirm对话框
onJsPrompt	处理Javascript中的Prompt对话框
onProgressChanged	加载进度条改变
onReceivedlcon	网页图标更改
onReceivedTitle	网页Title更改
onRequestFocus WebView	显示焦点

实现Android代码和JS互调

1、Android代码与JS交互的大前提：

   
   

    
    

     
     // 启用WebView对JavaScript的支持
    
    
    
    

     
     mWebView.getSettings().setJavaScriptEnabled(true);
    
    
   
   

2、Android代码调用JS

     
     

      
      

       
       // WebView调用JS代码非常简单，直接调用loadUrl，加载JS方法即可：
      
      
      
      

       
       mWebView.loadUrl("javascript:javacalljs()");
      
      
     
     

      
      

       
       

        
        // Java调用JS并传递参数
       
       
       
       

        
        String content ="hello js, form Android code!";
       
       
       
       

        
        mWebView.loadUrl("javascript:javacalljswithargs('"+ content +"')");
       
       
      
      

HTML页面中的JS代码：

      
      

       
       

        
        <head>
       
       
       
       

        
        <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
       
       
       
       

        
        <scripttype="text/javascript">
       
       
       
       

        
        function javacalljs(){
       
       
       
       

        
        			document.getElementById("content").innerHTML +="<br\>java调用了js函数";
       
       
       
       

        
        }
       
       
       
       

        
        function javacalljswithargs(arg){
       
       
       
       

        
        			document.getElementById("content").innerHTML +=("<br\>"+arg);
       
       
       
       

        
        }
       
       
       
       

        
        </script>
       
       
       
       

        
        </head>
       
       
      
      

3、JS调用Android代码

①实现一个class，并在其中添加对应的方法，供JS调用：

       
       

        
        

         
         //Js调用的JavascriptInterface
        
        
        
        

         
         publicclassTestInterface{
        
        
        
        

         
         /**
        
        
        
        

         
         	 * 因为安全问题，在Android4.2以后(如果应用的android:targetSdkVersion数值为17+)
        
        
        
        

         
         	 * JS只能访问带有 @JavascriptInterface注解的Java函数。
        
        
        
        

         
         	 */
        
        
        
        

         
         @JavascriptInterface
        
        
        
        

         
         publicvoid startCall(){
        
        
        
        

         
         Intent intent =newIntent();
        
        
        
        

         
         		intent.setAction(Intent.ACTION_DIAL);
        
        
        
        

         
         		intent.setData(Uri.parse("tel:"+10086));
        
        
        
        

         
         		startActivity(intent);
        
        
        
        

         
         }
        
        
        
        

         
         @JavascriptInterface
        
        
        
        

         
         publicvoid showToast(String msg){
        
        
        
        

         
         Toast.makeText(mContent,"js调用了java函数并传递了参数："+ msg,0).show();
        
        
        
        

         
         }
        
        
        
        

         
         }
        
        
       
       

②调用WebView的addJavascriptInterface()方法，设置JS回调的对象:

       
       

        
        

         
         mWebView.addJavascriptInterface(newTestInterface(),"testInterface");// 第二个参数是一个别名
        
        
       
       

③HTML页面中的JS代码，回调Android代码的方式为： window.别名.方法名

       
       

        
        

         
         <aonClick="window.testInterface.startCall()">点击拨打10086</a><br/>
        
        
        
        

         
         <aonClick="window.testInterface.showToast('我弹了一个Toast')">点击弹出Toast</a>