最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主要实现过程如下:通过加载本地的html文件(里面有js脚本),实现android本地方法和js中的交互。

第一步:

mainfest.xml中加入网络权限

  1. <uses-permission android:name="android.permission.INTERNET" />

第二步:

加载本地写好的html文件(定义好js中提供给android调用的方法 funFromjs(),和android提供给js调用的对象接口fun1FromAndroid(String name)),放在 assets目录下。

  1. <body>
  2. <a>js中调用本地方法</a>
  3. <script>
  4. function funFromjs(){
  5. document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
  6. }
  7. var aTag = document.getElementsByTagName('a')[0];
  8. aTag.addEventListener('click', function(){
  9. //调用android本地方法
  10. myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)!!");
  11. return false;
  12. }, false);
  13. </script>
  14. <p></p>
  15. <div id="helloweb">
  16. </div>
  17. </body>

第三步:

实现android工程与js交互的相关代码

android主题代码:

  1. @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
  2. @Override
  3. protected void onCreate(Bundle savedInstanceState) {
  4. super.onCreate(savedInstanceState);
  5. setContentView(R.layout.activity_main);
  6. //初始化
  7. initViews();
  8. //设置编码
  9. mWebView.getSettings().setDefaultTextEncodingName("utf-8");
  10. //支持js
  11. mWebView.getSettings().setJavaScriptEnabled(true);
  12. //设置背景颜色 透明
  13. mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
  14. //设置本地调用对象及其接口
  15. mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
  16. //载入js
  17. mWebView.loadUrl("file:///android_asset/test.html");
  18. //点击调用js中方法
  19. mBtn1.setOnClickListener(new View.OnClickListener() {
  20. @Override
  21. public void onClick(View v) {
  22. mWebView.loadUrl("javascript:funFromjs()");
  23. Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show();
  24. }
  25. });
  26. }

js调用的android对象方法定义

  1. public class JavaScriptObject {
  2. Context mContxt;
  3. public JavaScriptObject(Context mContxt) {
  4. this.mContxt = mContxt;
  5. }
  6. public void fun1FromAndroid(String name) {
  7. Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
  8. }
  9. public void fun2(String name) {
  10. Toast.makeText(mContxt, "调用fun2:" + name, Toast.LENGTH_SHORT).show();
  11. }
  12. }

android webview与jquery mobile相互通信的更多相关文章

  1. android中四大组件之间相互通信

    好久没有写有关android有关的博客了,今天主要来谈一谈android中四大组件.首先,接触android的人,都应该知道android中有四大组件,activity,service,broadca ...

  2. Android+Jquery Mobile学习系列(9)-总结和代码分享

    经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...

  3. PhoneGap+jQuery Mobile+Rest 访问远程数据

    最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...

  4. 使用Jquery Mobile设计Android通讯录

    本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用.其中在应用的界面部分,将使用jQuery Mobile框架,并且会指导大家如何使Android中提供的web ...

  5. jQuery Mobile发展新闻阅读器,适应iphone和android打电话

    程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...

  6. jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...

  7. JQuery Mobile+cordova构建一个Android项目

    1.安装Android开发环境     Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...

  8. Android+Jquery Mobile学习系列(6)-个人信息设置

    本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...

  9. Android+Jquery Mobile学习系列(3)-创建Android项目

    前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据. 首先创建一个Android Application项 ...

随机推荐

  1. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

  2. vue--axios异步请求及文件目录结构分析(个人记录)

    我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...

  3. LeetCode-012-整数转罗马数字

    整数转罗马数字 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...

  4. LeetCode-081-搜索旋转排序数组 II

    搜索旋转排序数组 II 题目描述:已知存在一个按非降序排列的整数数组 nums ,数组中的值不必互不相同. 在传递给函数之前,nums 在预先未知的某个下标 k(0 <= k < nums ...

  5. laravel7 数据迁移及填充数据

    1:置迁移数据表,创建生成模型和迁移文件: php artisan make:model Article -m 2:接着,在框架中的database/migrations文件夹中找到刚创建的用户表Ar ...

  6. 安装wkhtmltopdf

    思路 在网上查了下前后端都可以将html生成pdf,考虑到实现效果以及效率,最后决定将转化工作在服务端使用PHP完成.本着最好不要额外安装软件的原则,搜索过后分别尝试了 TCPDF MPDF FPDF ...

  7. 【Azure Developer - 密钥保管库 】使用 Python Azure SDK 实现从 Azure Key Vault Certificate 中下载证书(PEM文件)

    问题描述 在Azure Key Vault中,我们可以从Azure门户中下载证书PEM文件到本地. 可以通过OpenSSL把PFX文件转换到PEM文件.然后用TXT方式查看内容,操作步骤如下图: Op ...

  8. LGP5664题解

    厉害. 对于每一列选的数最多占一半,我们得设计一个三维 DP.然而状态刚好够,但是转移明显炸了(而且似乎还需要多项式?) 考虑正难则反,DP 不合法的方案数.总方案数很好算. 发现不合法的方案数只有某 ...

  9. Django-Multitenant,分布式多租户数据库项目实战(Python/Django+Postgres+Citus)

    Python/Django 支持分布式多租户数据库,如 Postgres+Citus. 通过将租户上下文添加到您的查询来实现轻松横向扩展,使数据库(例如 Citus)能够有效地将查询路由到正确的数据库 ...

  10. Windows XP系统搜索故障及处理办法点点通

    故障1:单击资源管理器工具栏上的"搜索"按钮或者按F3,系统无任何响应. 解决方法:首先进入C:\Windows\inf文件夹(该文件夹属性为隐藏),右键单击srchasst.in ...