Android平台，如何调用javascript操作网页和js调用系统功能

最新推荐文章于 2023-01-15 16:17:45 发布
最新推荐文章于 2023-01-15 16:17:45 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： Android 文章标签： javascript android 平台 java layout 电话

http://www.cnblogs.com/glony/articles/2145447.html

http://yoyotota.iteye.com/blog/1098707
预期效果：1、java编程实现显示一个网页显示（list，list中有电话号码），网页中的数据内容由程序传过去。
          2、点击网页中的电话号码部分，调用手机的打电话界面。
如图：



具体实现：
1、在assets中定义index.html文件，这个文件中table中的数据由javascript生成
ps：
(1) contactlist(jsons)将由java程序调用
(2) οnlοad="javascript:myjavascript.show():javascript调用java程序,详情见下文
Java代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <SCRIPT LANGUAGE="JavaScript">  
  4. <!--  
  5.   function contactlist(jsons){  
  6.   var table=document.getElementById("contactTable");//获得html中Table  
  7.   var arr = eval(jsons);//将jsons字符串转换为json对象数组  
  8.   for(var i=0;i < arr.length;i++){  
  9.     var jsonObj = arr[i];  
  10.     var tr = table.insertRow(table.rows.length);//添加tr  
  11.     var td1 = tr.insertCell(0);//td  
  12.     var td2 = tr.insertCell(1);  
  13.     td2.align = "center";  
  14.     var td3 = tr.insertCell(2);  
  15.   
  16.     td1.innerHTML = jsonObj.id;//设置每列对应的值  
  17.     td2.innerHTML = jsonObj.name;  
  18.     td3.innerHTML = jsonObj.phone;  
  19.     }  
  20.   }  
  21.   
  22.   //-->  
  23. </SCRIPT>  
  24.  <BODY οnlοad="javascript:myjavascript.show()">  
  25.    <table width="100%" border="0" cellspacing="0" id="contactTable">  
  26.     <tr>  
  27.       <td width="20%">编号</td>  
  28.       <td width="center">姓名</td>  
  29.       <td width="30%">电话</td>  
  30.     </tr>  
  31.    </table>  
  32.  </BODY>  
  33. </HTML>  


2、下面是java程序代码，首先是布局文件，很简单，就是一个webview
Java代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <WebView    
  8.     android:layout_width="fill_parent"   
  9.     android:layout_height="fill_parent"   
  10.     android:id="@+id/webview"  
  11.     />  
  12. </LinearLayout>  


3、HtmlUIActivity类,这个类负责html的加载显示、添加javascript支持，提供给javascript调用接口。
Java代码   收藏代码
  1. /** 
  2.  * HTML ui类  
  3.  */  
  4. public class HtmlUIActivity extends Activity {  
  5.     private WebView webView;  
  6.     private Handler handler = new Handler();  
  7.     @Override  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);          
  10.         setContentView(R.layout.main);  
  11.         webView = (WebView)findViewById(R.id.webview);  
  12.        //重要：让webview支持javascript  
  13.         webView.getSettings().setJavaScriptEnabled(true);  
  14.        //重要：添加可以供html中可供javascript调用的接口类  
  15.         webView.addJavascriptInterface(new MyJavaScript(this, handler), "myjavascript");  
  16.         //加载index.html  
  17.         webView.loadUrl("file:///android_asset/index.html");  
  18.     }  
  19. }  


4、MyJavaScript负责提供数据并显示html

Java代码   收藏代码
  1. public class MyJavaScript {  
  2.     private WebView webview;  
  3.     //使用一个handler来处理加载事件  
  4.     private Handler handler;  
  5.     public MyJavaScript(Context context,Handler handler){  
  6.         this.handler = handler;  
  7.         webview = (WebView) ((Activity)context).findViewById(R.id.webview);  
  8.     }  
  9.     /* 
  10.      * java调用显示网页，异步 
  11.      */  
  12.     public void show(){  
  13.       handler.post(new Runnable() {           
  14.         public void run() {  
  15.         重要：url的生成,传递数据给网页  
  16.             String url = "javascript:contactlist('" + generateData() + "')";  
  17.            webview.loadUrl(url);  
  18.         }  
  19.        });  
  20.     }  
  21.     /* 
  22.      * 由java程序生成数据传到网页中显示 
  23.      */  
  24.     private String generateData(){  
  25.       try {  
  26.         //构造一个json对象  
  27.         JSONObject obj1 = new JSONObject();  
  28.         obj1.put("id", 12);  
  29.         obj1.put("name", "tom");  
  30.         obj1.put("phone", "66666666");  
  31.               
  32.         JSONObject obj2 = new JSONObject();  
  33.         obj2.put("id", 13);  
  34.         obj2.put("name", "jerry");  
  35.         obj2.put("phone", "88888888");  
  36.               
  37.         //将构造好的2个json对象加入到json数组中  
  38.         JSONArray arr = new JSONArray();  
  39.         arr.put(obj1);  
  40.         arr.put(obj2);  
  41.         return arr.toString();  
  42.         } catch (JSONException e) {  
  43.             // TODO Auto-generated catch block  
  44.             e.printStackTrace();  
  45.         }  
  46.         return "";  
  47.     }  
  48. }  


至此,java程序与javascript之间的双向调用已经完成了。至于我们预期目标的第2项，只需要:  
(1)、在MyJavaScript类中添加方法
Java代码   收藏代码
  1.  /* 
  2.  * 拨打电话方法 
  3.  */  
  4. ublic void call(final String phone){  
  5.       Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));  
  6. text.startActivity(intent);  
  7. }  
 
   (2)、在index.html中将
   
Java代码   收藏代码
  1. td3.innerHTML = jsonObj.phone;  

   修改为：
Java代码   收藏代码
  1. td3.innerHTML = "<a href=\"javascript:myjavascript.call('"+jsonObj.phone + "')\">" + jsonObj.phone + "</a>";  

   最后记得加上打电话的权限：
Java代码   收藏代码
<uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>


forlong401
关注
专栏目录
【JavaScript 】语法
Homer
11-27 764
JavaScript 语法 JavaScript 是一个程序语言。语法规则定义了语言结构。 JavaScript 语法 JavaScript 是一个脚本语言。 它是一个轻量级，但功能强大的编程语言。 JavaScript 字面量 在编程语言中，一般固定值称为字面量，如 3.14。 数字（Number）字面量 可以是整数或者是小数，或者是科学计数
Android调用js简单方法
表叔很ok的博客
03-08 951
// 初始化 web_button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { WebSettings settings = webView.getSett...
Android WebView中H5调用Android原生方法
lw1389074的博客
01-15 2347
WebView中H5调用Android原生方法和可能出现的失误
Android原生WebView与网页js相互调用
04-09
博客说明地址： http://blog.csdn.net/xiaohao0724/article/details/64129423，Android原生WebView与网页js相互调用
Android和JavaScript相互调用的方法
10-23
这个例子展示了如何通过JavaScript调用Android方法进行电话拨打，以及如何从Android传递数据给JavaScript来更新网页内容。在实际应用中，这种交互方式可以用于实现更多复杂的业务逻辑，比如获取设备信息、发送网络...
android webview中使用Java调用JavaScript方法并获取返回值
10-24
如果需要在WebView中启用JavaScript调用Android代码的功能，还要在addJavascriptInterface()方法中声明一个Java类的实例，并为其指定一个可以在JavaScript中访问的接口名字。 在Java代码中定义一个内部类，用于接收...
android通过js调用安卓系统功能.zip
最新发布
09-18
在Android平台上，通过JavaScript调用安卓系统功能是一个常见的需求，特别是在开发混合应用或者Webview嵌入的场景下。本资源提供了实现这一功能的详细源码，对于理解和掌握Android与JavaScript的交互具有重要的学习...
Android webview和js互相调用实现方法
01-20
未标记的方法在高版本的Android系统中将无法被JavaScript调用，以防止跨域攻击。因此，所有要在JavaScript中调用的Android方法都需要添加这个注解： ```java @JavascriptInterface public void sayHello() { Log.d...
android使用html和js显示界面
06-08
解决在android 下的中文显示 解决js不生效 的问题
android怎么用assets,Android中assets的使用（用于读取内容）
weixin_28990605的博客
05-28 2754
assets目录下主要存放四种文件：文本文件、图像文件、网页文件(包括html中引用的js/ccs/jpg等资源)、音频视频文件。①加载assets目录下的网页webView.loadUrl("file:///android_asset/html/index.htmll");这种方式可以加载assets目录下的网页，并且与网页有关的css，js，图片等文件也会的加载。②加载assets目录下的图片...
让网页装进Android手机（将html+css+js打包成Android应用）（简单的）
有问题可关注公众号：前端研究院 后台输入问题回复
02-26 9257
   今晚尝试了一下，将自己简单写的网页（html+css+js）打包成Android应用装进手机。（当然如果网页做得好的话，采用响应式布局，即可在手机上完美展示）首先创建一个Android项目，在布局文件中加入WebView组件：activity_main.xml布局文件[html] view plain copy&lt;RelativeLayout xmlns:android="http://...
JavaScript打开APP
guxiansheng1991的博客
05-28 1万+
方法都是网上的方法,但是抄来的方法有一个缺陷就是, 打开APP后再返回网页,发现依然能跳转到下载页面 这里看到了一中解决方法,就是在setTimeout中加时间差值的判断,如果加载时间超出1秒,即代表用户没有安装APP // 打开APP openApp() { let ua = navigator.userAgent.toLowerCase(); ...
WebView详解与简单实现Android与H5互调
wjconn的博客
10-13 5万+
混合开发就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html 5来开发。 优势：使用H5实现的功能能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，节约了成本，提高了开发效率。
把网页放到安卓app中
qq_43373608的博客
05-14 480
目录创建空app 展示网页首先配置权限启用javascript方法一 直接代码修改方法二 手动修改xml 较为麻烦替换xml加载页面 创建空app 展示网页 首先配置权限 在 app/src/main/AndroidManifest.xml 添加网络权限 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" packa
Carson带你学Android：你要的WebView与 JS 交互方式都在这里了
热门推荐
Carson带你学Android
03-22 34万+
前言 现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现 今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本文前请先阅读：Android开发：最全面、最易懂的Webview详解 ...
Android中使用WebView与JS交互全解析
一个码农的博客
11-28 1万+
1.概述首先，需要提出一个概念，那就是hybrid，主要意思就是native原生Android和h5混合开发。为什么要这样做呢？大家可以想象一下针对于同一个活动，如果使用纯native的开发方式，Android和iOS两边都要维护同一套界面甚至是逻辑，这样开发和维护的成本会很大，而使用hybrid的开发方式的话，让前端的同学去写一套界面和逻辑，对于native端来说只要使用对应的容器去展示就可以了(
android系统框架
jsjxsy的专栏
09-28 101
Android系统的架构！ android的系统架构和其操作系统一样，采用了分层的架构。从架构图看，android分为四个层，从高层到低层分别是应用程序层、应用程序框架层、系统运行库层和linux核心层。 　　1.应用程序 　　Android会同一系列核心应用程序包一起发布，该应用程序包包括email客户端，SMS短消息程序，日历，地图，浏览器，联系人管理程序等。所有的应用程序都是使用JAV...
Android中使用WebView和JavaScript实现互相调用的方法详解
Android中实现WebView和JavaScript的互相调用详解 在 Android 开发中，使用 HTML5 开发 UI 界面可以非常轻松地实现出来，並具有很好的跨平台特性，让我们不必为了多个平台而重写代码，H5 学习成本也较低，上手快。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值