Android与Javascript交互之入门

最新推荐文章于 2023-10-30 12:28:42 发布

寂静代码

最新推荐文章于 2023-10-30 12:28:42 发布

阅读量314

点赞数

分类专栏： java / js 相关

本文链接：https://blog.csdn.net/mr_jianrong/article/details/72627134

版权

java / js 相关专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Android与JavaScript交互主要是使用的WebView。

关于WebView，一般涉及到2个类：WebChromeClient 和 WebViewClient 。

开发的大致流程为（摘自Android developer）：

A WebView has several customization points where you can add your own behavior. These are:

Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks).
Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).
Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().

Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.

好了，废话不多说，上Demo。

此demo完成了Android与Javascript交互的基础功能，并用json字符串进行了值传递。

秉持一贯的风格，知识内容都在代码注释中，这样方便以后复习。（布局就不贴了，比较简单）

整个工程结构比较简单：

首先是这个jsdroid.html文件的界面（贴界面其实有点2 --！）：

html代码比较简单：

[html]view plaincopy 
   
print?
 <html>  
 <meta charset="GBK">  
 <head>  
 <title>js交互android</title>  
 <script type="text/javascript">  
       
     function show(){  
     var a = document.getElementById("text").value;  
     alert("警告，你输入的是："+a);  
     }  
   
     function rfInfo(jsonStr) {   
             document.getElementById("info").innerHTML="从Android客户端传来的作者信息:"+jsonStr.Developer;   
         }   
   
     function cfm() {   
     if(confirm("确认界面提示?")){  
     return true;  
     }else  
      return false;  
     }   
   
     function pmt() {   
     var place = prompt("请输入位置?","");  
     }  
   
 </script>  
 </head>  
 <body>  
 <form action="">  
     <p><div id="info" >从Android客户端传来的作者信息:</div></p>  
     <p><input type="text" id="text" value="input your msg"/></p>  
     <p><div id="inputinfo" >输入的信息:</div></p>  
     <p><input type="button" id="btn_alert" onclick="show()" value="Alert"/></p>  
     <p><input type="button" id="btn_cfm" onclick="cfm()" value="Confirm"/></p>  
     <p><input type="button" id="btn_pmt" onclick="pmt()" value="Prompt"/></p>  
     <p><input type="button" id="btn_pmt" onclick="window.demo.adrdMethod()" value="调用android方法"/></p>  
 </form>  
 </body>  
 </html>  

其中，id为“btn_pmt”的button，监听器设置的是调用Android中的方法。

好了，上最重要的，android端实现的代码。

[java]view plaincopy 
   
print?
 package com.harlan.demo.activity;  
   
 import android.annotation.SuppressLint;  
 import android.app.Activity;  
 import android.graphics.Bitmap;  
 import android.os.Bundle;  
 import android.os.Handler;  
 import android.util.Log;  
 import android.view.View;  
 import android.webkit.JsPromptResult;  
 import android.webkit.JsResult;  
 import android.webkit.WebChromeClient;  
 import android.webkit.WebSettings;  
 import android.webkit.WebView;  
 import android.webkit.WebViewClient;  
 import android.widget.Button;  
 import android.widget.Toast;  
   
 @SuppressLint("SetJavaScriptEnabled")  
 public class MainActivity extends Activity {  
   
     private static final String TAG = "MainActivity";  
     WebView webView;  
     Handler handler = new Handler();  
     Button btn;  
     final String  jsonStr = "{\"Developer\":\"Harlan\",\"Place\":\"Nanjing\"}";  
   
             @Override  
             public void onCreate(Bundle savedInstanceState) {  
                 super.onCreate(savedInstanceState);  
                 setContentView(R.layout.activity_main);  
   
                 webView = (WebView) findViewById(R.id.myweb);  
                 btn = (Button) findViewById(R.id.mybtn);  
                 /* 
                  * webSettings 保存着WebView中的状态信息。 
                  * 当WebView第一次被创建时，webSetting中存储的都为默认值。 
                  * WebSetting和WebView一一绑定的。 
                  * 如果webView被销毁了，那么我们再次调用webSetting中的方法时，会抛出异常。 
                  */  
                 WebSettings webSettings = webView.getSettings();  
                 //允许在webview中执行JavaScript代码  
                 webSettings.setJavaScriptEnabled(true);  
                 //设置webview是否支持缩放  
                 webSettings.setSupportZoom(false);  
                 //加载本地html代码，此代码位于assets目录下，通过file:///android_asset/jsdroid.html访问。  
                 webView.loadUrl("file:///android_asset/jsdroid.html");  
   
                 /*** 
                  *webChromeClient主要是将javascript中相应的方法翻译成android本地方法 
                  * 
                  * 例如：我们重写了onJsAlert方法，那么当页面中需要弹出alert窗口时，便 
                  * 会执行我们的代码，按照我们的Toast的形式提示用户。 
                  */  
                 class HarlanWebChromeClient extends WebChromeClient {  
   
                     /*此处覆盖的是javascript中的alert方法。 
                      *当网页需要弹出alert窗口时，会执行onJsAlert中的方法 
                      * 网页自身的alert方法不会被调用。 
                      */  
                     @Override  
                     public boolean onJsAlert(WebView view, String url, String message,  
                             JsResult result) {  
                         Toast.makeText(getApplicationContext(), message,  
                                 Toast.LENGTH_LONG).show();  
                         Log.d(TAG, "弹出了提示框");  
                         /*此处代码非常重要，若没有，android就不能与js继续进行交互了， 
                          * 且第一次交互后，webview不再展示出来。 
                          * result：A JsResult to confirm that the user hit enter. 
                          * 我的理解是，confirm代表着此次交互执行完毕。只有执行完毕了，才可以进行下一次交互。 
                          */  
                         result.confirm();  
                         return true;  
                     }  
                       
                     /*此处覆盖的是javascript中的confirm方法。 
                      *当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法 
                      * 网页自身的confirm方法不会被调用。 
                      */  
                     @Override  
                     public boolean onJsConfirm(WebView view, String url,  
                             String message, JsResult result) {  
                         Log.d(TAG, "弹出了确认框");  
                         result.confirm();  
                         return true;  
                     }  
                       
                     /*此处覆盖的是javascript中的confirm方法。 
                      *当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法 
                      * 网页自身的confirm方法不会被调用。 
                      */  
                     @Override  
                     public boolean onJsPrompt(WebView view, String url,  
                             String message, String defaultValue,  
                             JsPromptResult result) {  
                         Log.d(TAG, "弹出了输入框");  
                         result.confirm();  
                         return true;  
                     }  
                       
                     /* 
                      * 如果页面被强制关闭,弹窗提示：是否确定离开？ 
                      * 点击确定 保存数据离开，点击取消，停留在当前页面 
                      */  
                     @Override  
                     public boolean onJsBeforeUnload(WebView view, String url,  
                             String message, JsResult result) {  
                         Log.d(TAG, "弹出了离开确认框");  
                         result.confirm();  
                         return true;  
                     }  
                 }  
                   
                 class HarlanWebViewClient extends WebViewClient{  
                     /*点击页面的某条链接进行跳转的话，会启动系统的默认浏览器进行加载，调出了我们本身的应用 
                      * 因此，要在shouldOverrideUrlLoading方法中 
                      */  
                     @Override  
                     public boolean shouldOverrideUrlLoading(WebView view,  
                             String url) {  
                          //使用当前的WebView加载页面  
                         view.loadUrl(url);  
                         return true ;  
                     }  
                       
                     /* 
                      * 网页加载完毕(仅指主页，不包括图片) 
                      */  
                     @Override  
                     public void onPageStarted(WebView view, String url,  
                             Bitmap favicon) {  
                         // TODO Auto-generated method stub  
                         super.onPageStarted(view, url, favicon);  
                     }  
                       
                     /* 
                      * 网页加载完毕(仅指主页，不包括图片) 
                      */  
                     @Override  
                     public void onPageFinished(WebView view, String url) {  
                         // TODO Auto-generated method stub  
                         super.onPageFinished(view, url);  
                     }  
                       
                     /* 
                      * 加载页面资源 
                      */  
                     @Override  
                     public void onLoadResource(WebView view, String url) {  
                         // TODO Auto-generated method stub  
                         super.onLoadResource(view, url);  
                     }  
                       
                     /* 
                      * 错误提示 
                      */  
                     @Override  
                     public void onReceivedError(WebView view, int errorCode,  
                             String description, String failingUrl) {  
                         // TODO Auto-generated method stub  
                         super.onReceivedError(view, errorCode, description, failingUrl);  
                     }  
                 };  
                   
                 webView.setWebChromeClient(new HarlanWebChromeClient());  
                 webView.setWebViewClient(new HarlanWebViewClient());  
                 /* 
                  * 为js提供一个方法，注意该方法一般不写在UI线程中 
                  * addJavascriptInterface(Object obj, String interfaceName) 
                  * obj代表一个java对象，这里我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法 
                  * interfaceName则是访问我们在obj中声明的方法时候所用到的js对象，调用方法为window.interfaceName.方法名() 
                  */  
                 webView.addJavascriptInterface(new Object() {  
                     @SuppressWarnings("unused")  
                     public void adrdMethod() {  
                         handler.post(new Runnable() {  
                             @Override  
                             public void run() {  
                                 Log.d(TAG, "js调用了Android方法");  
                             }  
                         });  
                     }  
                 }, "demo");  
                   
                 btn.setOnClickListener(new View.OnClickListener() {  
                     @Override  
                     public void onClick(View v) {  
                         Log.d(TAG, "Android调用了js方法");  
                         /* 
                          * 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称 
                          * 为xxx的javascript方法 
                          */  
                         webView.loadUrl("javascript:rfInfo("+jsonStr+")");  
                     }  
                 });  
   
         }  
 }  

这只是粗略地学习了下android和Javascript的交互，后面的，还需要继续深入研究下。

最终在手机上跑的效果图：

Demo的下载地址：

http://download.csdn.net/detail/singleton1900/5238800

寂静代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android与Javascript交互之入门

Android与JavaScript交互主要是使用的WebView。关于WebView，一般涉及到2个类：WebChromeClient 和 WebViewClient 。开发的大致流程为（摘自Android developer）：A WebView has several customization points where you can add your own
复制链接

扫一扫