Android-WebView与本地HTML (互调)
此篇博客是基于，上两篇博客，Android-WebView与本地HTML (HTML调用-->Java的方法) ， Android-WebView与本地HTML (Java调用--->HTML的方法) ；实现的一个综合实用案例
contacts.xml（HTML + JavaScript）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Web页面</title> <style type="text/css">
html,body{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
div.contact{
margin:3px;
position:relative;
text-align: center;
width:100%;
height:40px;
background-color:#e0dede;
}
</style> <script type="text/javascript">
//保存模板html代码
var template; //让java调用,生成联系人数据
function show(arr){
for(var i=0;i<arr.length;i++){
var innerHtml = document.body.innerHTML;
//利用模板替换生成每条数据
var row = template;
row = row.replace('name',arr[i].name);
row = row.replace('amount',arr[i].amount);
row = row.replace('phone',arr[i].phone);
row = row.replace('phone',arr[i].phone);
//将html拼接到body标签中
document.body.innerHTML = innerHtml+row;
}
} //初始化并且调用showcontacts去java请求数据
function initContacts(){
template = document.body.innerHTML;
document.body.innerHTML = "";
contact.showcontacts();
} //按钮点击 时调用java的call
function call(phone){
contact.call(phone);
} //页面加载时调用
// window.onload = initContacts(); </script> </head> <body onload="initContacts()"> <!-- 模板项 -->
<div class="contact">
<span style="position:absolute;left:5px">name</span>
<span style="position:absolute;top:20px;left:5px;font-size: 15px">amount</span>
<span style="position:relative;top:5px;">phone</span>
<button style="position:absolute;top:5px;right:5px" onclick="call('phone')">拨号</button>
</div> </body> </html>
描述实体Bean对象：
package cn.h5.java_and_html_call.bean;
public class ContactInfo {
private String name;
private String amount;
private String phone;
public ContactInfo() {
super();
// TODO Auto-generated constructor stub
}
public ContactInfo(String name, String amount, String phone) {
super();
this.name = name;
this.amount = amount;
this.phone = phone;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAmount() {
return amount;
}
public void setAmount(String amount) {
this.amount = amount;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
描述获得数据的服务对象：
package cn.h5.java_and_html_call.service; import java.util.ArrayList;
import java.util.List; import cn.h5.java_and_html_call.bean.ContactInfo; public class ContactService { /**
* 获取联系人的数据
* @return
*/
public List<ContactInfo> getContacts(){
List<ContactInfo> contactInfos = new ArrayList<ContactInfo>();
contactInfos.add(new ContactInfo("刘备", "10000000", "13900123456"));
contactInfos.add(new ContactInfo("关羽", "2000000", "18676868789"));
contactInfos.add(new ContactInfo("张飞", "6000000", "18900888888"));
contactInfos.add(new ContactInfo("曹操", "13000000", "18000888888"));
return contactInfos;
}
}
Activity：
package cn.h5.java_and_html_call; import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView; import org.json.JSONArray;
import org.json.JSONObject; import java.util.List; import cn.h5.R;
import cn.h5.java_and_html_call.bean.ContactInfo;
import cn.h5.java_and_html_call.service.ContactService; public class MainActivity extends Activity { private ContactService service;
private WebView webView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity_main5);
service = new ContactService(); /**
* 你可以把webview看成一个浏览器，webview里面有一个插件，可以把一个java对象传递给webview的插件，
* 当插件得到这个对象之后，就可以让网页里面的 javascript代码对这个java对象进行调用
*/
webView = findViewById(R.id.webview); /**
* 加载本地的 contacts.html 文件
*/
webView.loadUrl("file:///android_asset/contacts.html"); /**
* webview默认是不能够执行javascript
* 以下代码是设置允许webview能够执行javascript代码
*/
webView.getSettings().setJavaScriptEnabled(true); /**
* 把Java对象传递给WebView的插件
* 让JavaScript调用 ---> Java ContactPlugin类中的 方法
*/
webView.addJavascriptInterface(new ContactPlugin(),"contact" ); } /**
* 此ContactPlugin类中的方法，和JavaScript定义的一致
* 目的是为了让JavaScript调用 --> ContactPlugin类中的方法
*/
private final class ContactPlugin{ /**
* contacts.html 被加载就会 调用showcontacts方法来获得JSON数据 给 javascript:show(" + json + ")
*
* 注意：初始化数据，由JavaScript调用，
* 获得数据后 转换为JSON并且调用JavaScript的show方法，
* 把数据给 JavaScript的show方法，然后HTML就把列表数据展示出来了
*/
@JavascriptInterface
public void showcontacts(){
Log.d("@@@", "showcontacts 被JavaScript页面加载的时候 调用了");
try {
List<ContactInfo> contacts = service.getContacts();
JSONArray jsonArray = new JSONArray();
for(ContactInfo info:contacts){
JSONObject jsonObject = new JSONObject();
jsonObject.put("name", info.getName());
jsonObject.put("amount", info.getAmount());
jsonObject.put("phone", info.getPhone());
jsonArray.put(jsonObject);
}
final String json = jsonArray.toString(); // Log.d("@@@", "json=======" + json); /**
* webView.loadUrl("javascript:show(" + json + ")");
* 注意：像这种方法不能写在这里，否则没效果一直阻塞的，打印不了:json=======后
* 解决方案：
* 需要加入runOnUiThread，才能解决此问题；
* 这个问题解决了两个小时 才发现是这里的问题，开始一直以为是html/js有问题
*/
// webView.loadUrl("javascript:show(" + json + ")"); runOnUiThread(new Runnable() {
@Override
public void run() {
/**
* Android WebView执行----> javascript代码
* Java调用----> JavaScript的show方法 把这些列表JSON数据，给JavaScript的show方法，然后HTML就把列表数据展示出来了
*/
webView.loadUrl("javascript:show(" + json + ")");
}
}); Log.d("@@@", "json=======后"); } catch (Exception e) {
e.printStackTrace(); Log.d("@@@", "e.ttt:" + e.toString());
}
} /**
* 点击HTML列表上的电话号码后，此方法被JavaScript调用
* 让JavaScript调用 打电话
* @param phone
*/
@JavascriptInterface
public void call(String phone){
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
startActivity(intent);
}
}
}
activity的布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <!--
定义WebView
1.WebView可以展现处理本地的HTML相关;
2.WebView可以展现处理网络的HTML相关;
3.WebView可以制作自定义浏览器;
....
-->
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView> </LinearLayout>
执行结果：
Android-WebView与本地HTML (互调)的更多相关文章
- Android WebView选择本地文件上传
This sample demonstrate android webview choose file to upload. I just implement the client code ,the ...
- android webview load 本地文件需要注意的地方
记得在工程的main下必须是assets文件夹. 而webview.loadUrl时 必须是 android_asset 必须这样对应,否则无法加载本地html. 具体原因只能在深入学习后再总结了 ...
- [Android] WebView内的本地网页，使用XMLHttpRequest读取本地档案
[Android] WebView内的本地网页,使用XMLHttpRequest读取本地档案 问题情景 在Android里,可以使用WebView来呈现本地或是远程的网页内容.但是在显示本地网页时,如 ...
- Android WebView基本使用
转载请注明出处: http://blog.csdn.net/lowprofile_coding/article/details/77928614 WebView介绍 Android WebView在A ...
- android Webview Html5 相关文章
Android WebView的使用集锦(支持Html5) http://blog.csdn.net/l_215851356/article/details/69239643 WebView详解与简单 ...
- android webview开发问题及优化汇总
我们在native与网页相结合开发的过程中,难免会遇到关于WebView一些共通的问题.就我目前开发过程中遇到的问题以及最后得到的优化方案都将在这里列举出来.有些是老生常谈,有些则是个人摸索得出解决方 ...
- Android WebView 开发教程
声明在先:必须在AndroidMainfest.xml 里面声明权限,否则在Java里面编写的所有WebView浏览网页的代码都无法正常使用 <uses-permission android:n ...
- Android WebView 开发详解(三)
转载请注明出处 http://blog.csdn.net/typename/article/details/40302351 powered by miechal zhao 概览 Android ...
- Android WebView 开发详解(二)
转载请注明出处 http://blog.csdn.net/typename/article/details/39495409 powered by miechal zhao 概览: Androi ...
- Android WebView 开发详解(一)
转载请注明出处 http://blog.csdn.net/typename/article/details/39030091 powered by meichal zhao 概览: Android ...
随机推荐
- 工具类Utils的单元测试方式
数据质量功能已经开发完毕,但是要实现单元测试覆盖率80%以上,其他的还好,只是这个工具类实在让我摸不着头脑,其实工具类的单元测试是最简单的,只是自己想复杂了而已: 无返回值模拟: 有返回值模拟: 异常 ...
- CMDB 配置管理数据库
- eclipse安装提要
svn 插件安装http://subclipse.tigris.org/update_1.12.x教程地址http://jingyan.baidu.com/article/f71d60376b4c57 ...
- centos 7 禁止root登录及更改ssh端口号
vim /etc/ssh/sshd_config PermitRootLogin yes => PermitRootLogin no systemctl restart sshd.service ...
- fabric 安装
fabric 是一个python的库,fabric可以通过ssh批量管理服务器. 第一步安装依赖包 安装fabric依赖及pip yum install -y python-pip gcc pytho ...
- 如何将spring boot项目打包成war包
一.修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二.移除嵌入式tomcat插件 在pom.xml里找到spring-boot-s ...
- 2018.10.31 NOIP训练 锻造（方程式期望入门题）（期望dp）
传送门 根据题目列出方程: fi=pi∗(fi−1+fi−2)+(1−pi)∗(fi+1+fi)f_i=p_i*(f_{i-1}+f_{i-2})+(1-p_i)*(f_{i+1}+f_i)fi=p ...
- IDEA将项目导出war包方法（详细）
右上角点击进入配置页面(如图)选择Artifcts 点击绿色的那个+号,选择Web Application:Archive; 设置名称,选择输出路径 下面开始打war包在Build下面选择Build ...
- 文字过多以省略号代替，放在文字上会显示title信息提示
第一种: <td style="text-align:left; word-wrap:break-word;" title="${b.remarks}"& ...
- git 如何更改某个提交内容/如何把当前改动追加到某次commit上? git rebase
原文地址 http://www.jianshu.com/p/8d666830e826 [自己总结] 0, git diff git diff a b 是以a为基准,把b和a的区别展示出来 ...