Android的WebView中js与java代码相互调用

最新推荐文章于 2021-02-20 16:35:43 发布

紫竺

最新推荐文章于 2021-02-20 16:35:43 发布

阅读量1.2k

点赞数

分类专栏： Android开发文章标签： android html webview javascript

本文链接：https://blog.csdn.net/qq_21229739/article/details/50635858

版权

Android开发专栏收录该内容

30 篇文章 0 订阅

订阅专栏

现在越来越多的的项目中会采用webview的形式的展示自己的页面，通过这种形式的最大优点是展示的内容的可控性非常强，服务器可以通过更新服务端html文件来展示最新的内容。有些复杂html页面不单单是展示内容，可能还会有一些按钮，点击按钮后会跳转到android的本地页面，这个时候就需要通过js来调用android的本地代码了。核心代码如下：

一、JavaScript调用Java代码

[java]view plaincopyprint? 
   
 WebView mMainWV = (WebView) findViewById(R.id.wv_main);  
 WebSettings settings = mMainWV.getSettings();  
 settings.setJavaScriptEnabled(true);  
 mMainWV.addJavascriptInterface(new JavaScriptOnClick(),"flag");//注册js中响应事件的对象  
 mMainWV.loadUrl("file:///android_asset/test.html");  

上述代码为webview的初始化：

1.setJavaScriptEnabled(true)是必须要添加的，目的是为了webview允许执行js的事件。

2.addJavascriptInterface(new JavaScriptOnClick(),"flag")中的JavaScriptOnClick是一个自定的类，响应js的事件全部定义在这个类当中；“flag”是一个标记符，用来与js中响应的事件绑定的。

3.loadUrl("file:///android_asset/test.html")表示用webview加载assets根目录下的test.html文件

[java]view plaincopyprint? 
   
 class JavaScriptOnClick{  
     public JavaScriptOnClick() {  
     }  
   
     @JavascriptInterface  
     public void print(int num){  
         System.out.println("num: " + num);  
     }  
 }  

上述代码自定义的JavaScriptOnClick类：

1.print(int num)是在js中要调用的方法，可以随便定义的，只要能与js中的响应事件对应上就可以了；

2.该类中所有定义的方法必须加上@JavascriptInterface，否则无法被js识别

[html]view plaincopyprint? 
   
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Title</title>  
 </head>  
 <body>  
   
 <p id="my-p" onclick="window.flag.print(99)">hello-world</p>  
   
 </body>  
 </html>  

上述代码为test.html的代码：

1.οnclick="window.flag.print(99)"，js调用java代码的响应事件必须写在onclick中；解释下window.flag.print(99)，这种写法是一种规定的格式，第一个参数window是固定的，第二个参数flag是自定义的标记符要与java中的addJavascriptInterface声明的标记符对应，第三个参数print(99)是你要调用的方法的名字，该方法是必须要定义在addJavascriptInterface声明的类中；

二、Java调用JavaScript代码

这个就比较简单了，首先要在html代码中写一个你需要调用的js方法块

[html]view plaincopyprint? 
   
 <script language="javascript">  
         function callJS() {  
             document.getElementById("my-p").innerHTML="java调用了js";  
         }  
 </script>  

上述代码中声明了一个js方法名称为callJS,该方法的作用是修改一个p标签的内容

[java]view plaincopyprint? 
   
 findViewById(R.id.btn_call_js).setOnClickListener(new View.OnClickListener() {  
     @Override  
     public void onClick(View v) {  
         mMainWV.loadUrl("javascript:callJS()");  
     }  
 });  

上述代码为测试java调用js的代码，为了方便测试，我通过一个button的点击事件来调用js代码。基本格式就如上，通过webview的loadurl方法调用js，”javascript“为固定前缀，”callJS“为js中定义的方法名字。

三、关于WebView中跳转url时，是打开外部浏览器还是通过内部的WebView跳转的控制

[java]view plaincopyprint? 
   
 mMainWV.setWebViewClient(new WebViewClient(){  
     @Override  
     public boolean shouldOverrideUrlLoading(WebView view, String url) {  
         if(url != null){  
             if(isInWebView) {//webivew内部跳转  
                 view.loadUrl(url);  
             }else{//打开外部浏览器跳转  
                 Intent intent = new Intent(Intent.ACTION_VIEW);  
                 intent.setData(Uri.parse(url));  
                 startActivity(intent);  
             }  
         }  
         return true;  
     }  
 });  

上述代码已经写了跳转的两种方式了（见注释）。shouldOverrideUrlLoading的作用就是为了拦截跳转url的（href），他有一个返回值，boolean类型的。true:表示webview默认不做任何处理，完全根据return true之前的代码来处理；false表示url在webview内部执行。

谢谢大家！！！祝大家新年快乐！！！