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 ...
随机推荐
- Java中关键字static的使用
static 关键字 1).static只能修饰成员变量或成员方法,所有非静态是对象相关的,所有静态是类相关的. 2)被static修饰的成员变量成员方法独立于该类的任何对象,它不依赖类的特定的实例, ...
- Vim 基本配置
1.关闭vi的一致性模式 set nocompatible 2.配置backspace的工作方式 set backspace=indent,eol,start 3.显示行号 set number 4. ...
- python——处理xls表格
因为工作需要,现有一个运营商导出的xls固定电话话费账单. 账单比较详细,而我最终需要的数据只有那个号码这个月用了多少话费的统计结果. 当年没有好好学office,以致于无从下手.泪奔/(ㄒoㄒ)/~ ...
- js对象通过属性路径获取属性值 - getPropByPath
function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...
- Gazebo: Could not find parameter robot_description on parameter server
robot_state_publisher looks for the parameter "robot_description" by default. The robot_st ...
- 【Web】CSS实现绝对定位元素水平垂直居中
网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...
- 买铅笔（NOIP2016）
先给题目链接:买铅笔 这题非常水,没啥可分析的,先给代码: #include<bits/stdc++.h> //1 using namespace std; int main(){ int ...
- 团队-Python 爬取豆瓣电影top250-成员简介及分工
姓名:周鑫 班级:软件6班 团队名称:咣咣踹电脑 擅长:Python,java 分工:编写数据库
- Java课堂测试01及感想
上周进行了Java的开学第一次测验,按要求做一个模拟ATM机功能的程序,实现存取款.转账汇款.修改密码.查询余额的操作.这次测验和假期的试题最大的不同还是把数组存储改成的文件存储,在听到老师说要用文件 ...
- 在table中tr的display:block在firefox下显示布局错乱问题
[转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需 ...