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 plaincopyprint?
  1. <html>
  2. <meta charset="GBK">
  3. <head>
  4. <title>js交互android</title>
  5. <script type="text/javascript">
  6. function show(){
  7. var a = document.getElementById("text").value;
  8. alert("警告，你输入的是："+a);
  9. }
  10. function rfInfo(jsonStr) {
  11. document.getElementById("info").innerHTML="从Android客户端传来的作者信息:"+jsonStr.Developer;
  12. }
  13. function cfm() {
  14. if(confirm("确认界面提示?")){
  15. return true;
  16. }else
  17. return false;
  18. }
  19. function pmt() {
  20. var place = prompt("请输入位置?","");
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. <form action="">
  26. <p><div id="info" >从Android客户端传来的作者信息:</div></p>
  27. <p><input type="text" id="text" value="input your msg"/></p>
  28. <p><div id="inputinfo" >输入的信息:</div></p>
  29. <p><input type="button" id="btn_alert" onclick="show()" value="Alert"/></p>
  30. <p><input type="button" id="btn_cfm" onclick="cfm()" value="Confirm"/></p>
  31. <p><input type="button" id="btn_pmt" onclick="pmt()" value="Prompt"/></p>
  32. <p><input type="button" id="btn_pmt" onclick="window.demo.adrdMethod()" value="调用android方法"/></p>
  33. </form>
  34. </body>
  35. </html>

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

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

[java] view plaincopyprint?
  1. package com.harlan.demo.activity;
  2. import android.annotation.SuppressLint;
  3. import android.app.Activity;
  4. import android.graphics.Bitmap;
  5. import android.os.Bundle;
  6. import android.os.Handler;
  7. import android.util.Log;
  8. import android.view.View;
  9. import android.webkit.JsPromptResult;
  10. import android.webkit.JsResult;
  11. import android.webkit.WebChromeClient;
  12. import android.webkit.WebSettings;
  13. import android.webkit.WebView;
  14. import android.webkit.WebViewClient;
  15. import android.widget.Button;
  16. import android.widget.Toast;
  17. @SuppressLint("SetJavaScriptEnabled")
  18. public class MainActivity extends Activity {
  19. private static final String TAG = "MainActivity";
  20. WebView webView;
  21. Handler handler = new Handler();
  22. Button btn;
  23. final String  jsonStr = "{\"Developer\":\"Harlan\",\"Place\":\"Nanjing\"}";
  24. @Override
  25. public void onCreate(Bundle savedInstanceState) {
  26. super.onCreate(savedInstanceState);
  27. setContentView(R.layout.activity_main);
  28. webView = (WebView) findViewById(R.id.myweb);
  29. btn = (Button) findViewById(R.id.mybtn);
  30. /*
  31. * webSettings 保存着WebView中的状态信息。
  32. * 当WebView第一次被创建时，webSetting中存储的都为默认值。
  33. * WebSetting和WebView一一绑定的。
  34. * 如果webView被销毁了，那么我们再次调用webSetting中的方法时，会抛出异常。
  35. */
  36. WebSettings webSettings = webView.getSettings();
  37. //允许在webview中执行JavaScript代码
  38. webSettings.setJavaScriptEnabled(true);
  39. //设置webview是否支持缩放
  40. webSettings.setSupportZoom(false);
  41. //加载本地html代码，此代码位于assets目录下，通过file:///android_asset/jsdroid.html访问。
  42. webView.loadUrl("file:///android_asset/jsdroid.html");
  43. /***
  44. *webChromeClient主要是将javascript中相应的方法翻译成android本地方法
  45. *
  46. * 例如：我们重写了onJsAlert方法，那么当页面中需要弹出alert窗口时，便
  47. * 会执行我们的代码，按照我们的Toast的形式提示用户。
  48. */
  49. class HarlanWebChromeClient extends WebChromeClient {
  50. /*此处覆盖的是javascript中的alert方法。
  51. *当网页需要弹出alert窗口时，会执行onJsAlert中的方法
  52. * 网页自身的alert方法不会被调用。
  53. */
  54. @Override
  55. public boolean onJsAlert(WebView view, String url, String message,
  56. JsResult result) {
  57. Toast.makeText(getApplicationContext(), message,
  58. Toast.LENGTH_LONG).show();
  59. Log.d(TAG, "弹出了提示框");
  60. /*此处代码非常重要，若没有，android就不能与js继续进行交互了，
  61. * 且第一次交互后，webview不再展示出来。
  62. * result：A JsResult to confirm that the user hit enter.
  63. * 我的理解是，confirm代表着此次交互执行完毕。只有执行完毕了，才可以进行下一次交互。
  64. */
  65. result.confirm();
  66. return true;
  67. }
  68. /*此处覆盖的是javascript中的confirm方法。
  69. *当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法
  70. * 网页自身的confirm方法不会被调用。
  71. */
  72. @Override
  73. public boolean onJsConfirm(WebView view, String url,
  74. String message, JsResult result) {
  75. Log.d(TAG, "弹出了确认框");
  76. result.confirm();
  77. return true;
  78. }
  79. /*此处覆盖的是javascript中的confirm方法。
  80. *当网页需要弹出confirm窗口时，会执行onJsConfirm中的方法
  81. * 网页自身的confirm方法不会被调用。
  82. */
  83. @Override
  84. public boolean onJsPrompt(WebView view, String url,
  85. String message, String defaultValue,
  86. JsPromptResult result) {
  87. Log.d(TAG, "弹出了输入框");
  88. result.confirm();
  89. return true;
  90. }
  91. /*
  92. * 如果页面被强制关闭,弹窗提示：是否确定离开？
  93. * 点击确定 保存数据离开，点击取消，停留在当前页面
  94. */
  95. @Override
  96. public boolean onJsBeforeUnload(WebView view, String url,
  97. String message, JsResult result) {
  98. Log.d(TAG, "弹出了离开确认框");
  99. result.confirm();
  100. return true;
  101. }
  102. }
  103. class HarlanWebViewClient extends WebViewClient{
  104. /*点击页面的某条链接进行跳转的话，会启动系统的默认浏览器进行加载，调出了我们本身的应用
  105. * 因此，要在shouldOverrideUrlLoading方法中
  106. */
  107. @Override
  108. public boolean shouldOverrideUrlLoading(WebView view,
  109. String url) {
  110. //使用当前的WebView加载页面
  111. view.loadUrl(url);
  112. return true ;
  113. }
  114. /*
  115. * 网页加载完毕(仅指主页，不包括图片)
  116. */
  117. @Override
  118. public void onPageStarted(WebView view, String url,
  119. Bitmap favicon) {
  120. // TODO Auto-generated method stub
  121. super.onPageStarted(view, url, favicon);
  122. }
  123. /*
  124. * 网页加载完毕(仅指主页，不包括图片)
  125. */
  126. @Override
  127. public void onPageFinished(WebView view, String url) {
  128. // TODO Auto-generated method stub
  129. super.onPageFinished(view, url);
  130. }
  131. /*
  132. * 加载页面资源
  133. */
  134. @Override
  135. public void onLoadResource(WebView view, String url) {
  136. // TODO Auto-generated method stub
  137. super.onLoadResource(view, url);
  138. }
  139. /*
  140. * 错误提示
  141. */
  142. @Override
  143. public void onReceivedError(WebView view, int errorCode,
  144. String description, String failingUrl) {
  145. // TODO Auto-generated method stub
  146. super.onReceivedError(view, errorCode, description, failingUrl);
  147. }
  148. };
  149. webView.setWebChromeClient(new HarlanWebChromeClient());
  150. webView.setWebViewClient(new HarlanWebViewClient());
  151. /*
  152. * 为js提供一个方法，注意该方法一般不写在UI线程中
  153. * addJavascriptInterface(Object obj, String interfaceName)
  154. * obj代表一个java对象，这里我们一般会实现一个自己的类，类里面提供我们要提供给javascript访问的方法
  155. * interfaceName则是访问我们在obj中声明的方法时候所用到的js对象，调用方法为window.interfaceName.方法名()
  156. */
  157. webView.addJavascriptInterface(new Object() {
  158. @SuppressWarnings("unused")
  159. public void adrdMethod() {
  160. handler.post(new Runnable() {
  161. @Override
  162. public void run() {
  163. Log.d(TAG, "js调用了Android方法");
  164. }
  165. });
  166. }
  167. }, "demo");
  168. btn.setOnClickListener(new View.OnClickListener() {
  169. @Override
  170. public void onClick(View v) {
  171. Log.d(TAG, "Android调用了js方法");
  172. /*
  173. * 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称
  174. * 为xxx的javascript方法
  175. */
  176. webView.loadUrl("javascript:rfInfo("+jsonStr+")");
  177. }
  178. });
  179. }
  180. }

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

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

Demo的下载地址：

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

WebView---Android与Javascript交互之入门相关推荐

  1. Android与Javascript交互之入门

    Android与JavaScript交互主要是使用的WebView. 关于WebView,一般涉及到2个类:WebChromeClient 和 WebViewClient . 开发的大致流程为(摘自A ...

  2. android js交互 数组,Android WebView —— Java 与 JavaScript 交互总结

    相比于 Native App 和 Web App,Hybrid App 凭借其迭代灵活.控制自如.多端同步的优势在应用市场上越发显得优胜,主要得力于,其将变更频繁的部分产品功能使用 H5 开发并在客户 ...

  3. Android与Javascript交互示例(二)

    MainActivity如下: package cn.testjavascript; import android.os.Bundle; import android.view.View; impor ...

  4. Android WebView JavaScript交互

    今天介绍一下,Android中Webview与JavaScript的交互,首先是在布局文件里添加webview控件: [html] view plaincopy <WebView android ...

  5. 高德地图组件在Android的应用以及Android与JavaScript的交互(一)

    最近在慕课网学习了关于高德地图组件的课程(其实就是一个广告,内容和官网的API完全一样),发现这个JavaScript API比Android API简单方便多了,于是就打算放在Android APP ...

  6. Android入门——WebView使用及Java和JavaScript交互小结

    文章大纲 引言 一.WebView 概述 二.WebView的常用的方法 1.构造方法 2.其他常用方法 3.WebSettings常用的方法 三.WebView的应用 1.使用WebView的基本步 ...

  7. Android WebView与JavaScript交互详解

    近期工作项目中遇到Android的WebView与js交互问题,之前也知道有这方面的技术可以实现.但在用的过程中,却发现还是需要用电心思. 现把我所了解的分享给大家,希望可以帮助到做类似项目的童鞋. ...

  8. Android开发笔记（一百五十一）WebView与JavaScript交互的四种形式

    WebView如果作为简单的网页浏览器,对于一般的浏览行为来说,已经足够了.可做为企业开发者,你的App通常要嵌入自家公司的网页,如此一来,还得考虑App与Web之间的消息传递,这就涉及到App的原生 ...

  9. android webview调js方法,Android中WebView与H5的交互，Native与JS方法互调

    项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...

  10. Android WebView使用与JavaScript使用

    WebView基本使用 WebView是View的一个子类,可以让你在activity中显示网页. 可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView: <?x ...

最新文章

  1. Get Started with Field Service
  2. P1145 约瑟夫 W（模拟）
  3. C语言三剑客之《C陷阱与缺陷》一书精华提炼
  4. OpenCV自带dnn的Example研究（3）— object_detection
  5. applicationContext配置文件模板1
  6. 《阿里巴巴Android开发手册》v1.0.1更新，优化部分内容和示例代码
  7. php自定义tcp协议,如何实现自定义协议？
  8. oracle除了什么之外,Oracle翻译
  9. 【报告分享】2019年12月郭广昌混沌课程ppt（附下载链接）
  10. c语言求一个数的位数不用循环_LeetCode基础算法题第181篇：将数字减少为零的步骤数...
  11. （转）首个比特币投资基金在加拿大获批上线！
  12. LLVM 系统入门¶
  13. iphone3GS iOS6.0.1不完美越狱详细图文教程
  14. [渝粤教育] 兴义民族师范学院 数据结构 参考 资料
  15. Tegra TX1 build tensorflow r1.1
  16. 高德地图自定义贴图图层
  17. 计算机大专考试题,计算机大专考试试题一.doc
  18. XXXXXXX\android-sdk\\tools\zipalign.exe”无效
  19. FileSystemWatcher 用法
  20. 《世界文化十万个为什么》读书笔记

热门文章

  1. ESP8266驱动RDA5807实现的FM收音机，可连接WiFi显示B站粉丝数
  2. html设置ie9兼容性视图,ie9兼容性设置在哪里 IE兼容性视图在哪里设置？
  3. 20145322 Exp5 MS08_067漏洞测试
  4. iPhone 12 Pro测量人的身高
  5. 带Fn的键盘linux能用吗,实用技巧：如何更有效率的使用Linux键盘
  6. 澳大利亚计算机博士几年,澳洲墨尔本大学博士读几年
  7. 一文带你了解常见的数据指标都有哪些【数据分析】
  8. matlab 中括号里面有分号是什么意思
  9. UE4 相对坐标转世界坐标
  10. 快递单号的正则提取试