mail_detail_v2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>mail</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body,ul,h1,h2,h3,h4,h5,h6 {
margin: 0;
}
hr {
border: none;
border-bottom: 1px #d4d4d4 solid;
}
.mail-header {
padding: 0.5rem 1.5rem;
font-size: 1rem;
font-weight: 600;
color: #adadad;
line-height: 1.5rem;
}
.mail-header h2 {
font-size: 1.14rem;
letter-spacing: 0.1rem;
color: #222;
padding: 0.3rem 0 0.5rem;
}
ul {
list-style: none;
padding: 0;
}
ul.mail-info>li.item {
font-size: 0;
padding: 0.2rem 0;
}
li.item>.item-title,li.item>.item-content {
display: inline-block;
vertical-align: top;
}
.item-title {
font-size: 1rem;
width: 4.2rem;
}
.item-content {
position: relative;
font-size: 1rem;
width: calc(100% - 4.2rem);
}
.mail-content {
padding: 0.5rem 1.5rem;
}
.mail-content>p {
margin: 0;
text-indent: 2rem;
line-height: 2rem;
font-weight: 600;
}
.mail-content>p:first-child {
text-indent: 0;
}
.sender,.receiver {
display: inline-block;
padding: 0 0.3rem;
margin-right: 0.2rem;
margin-bottom: 0.5rem;
border-radius: 0.2rem;
}
.sender.active,.receiver.active {
text-decoration: none;
color: white;
background-color: #0089df;
}
.time {
margin-bottom: 0.5rem;
}
.pull-right {
position: absolute;
right: 0;
top: 0;
}
a.btn-link {
color: #0089df;
}
.show {
position: relative;
display: block;
}
.hidden {
display: none ;
}
.padding {
padding-right: 2.0rem;
}
.attachments {
width: 100%;
}
.attachments>li{
position: relative;
padding: 0.5rem 0.8rem;
font-size: 1rem;
background-color: #eee;
border-bottom: 1px #c4c4c4 solid;
}
.icon {
position: absolute;
display: inline-block;
width: 1.5rem;
padding: 0.3rem;
font-size: 0.8rem;
line-height: 1.22rem;
border-radius: 0.2rem;
background-color: #01b700;
color: white;
}
.attachment {
min-height: 2rem;
margin-left: 2rem;
margin-right: 3rem;
font-size: 0.8rem;
font-weight: normal;
color: #222;
}
.attachment-options {
position: absolute;
top: 1.1rem;
right: 1rem;
display: inline-block;
height: 2rem;
width: 1.4rem;
text-align: center;
line-height: 0.7rem;
}
</style>
</head>
<body>
<article>
<section class="mail-header">
<div>
<h2 id="mail-title"></h2>
<i class="star-five"></i>
</div>
<ul class="mail-info">
<li class="item">
<span class="item-title">发件人：</span>
<div class="item-content" id="sender">
</div>
</li>
<li class="item">
<span class="item-title">时间：</span>
<div class="item-content time"><span id="time"></span></div>
</li>
<li class="item">
<span class="item-title">收件人：</span>
<div class="item-content">
<div id="receivers1"></div>
<a class="btn-link pull-right" οnclick="openPanel(this, 1)">展开</a>
<div class="hidden padding" id="receivers2"></div>
</div>
</li>
<li class="item">
<span class="item-title">抄送人：</span>
<div class="item-content">
<div id="ccers1"></div>
<div class="hidden padding" id="ccers2"></div>
</div>
</li>
<li class="item">
<span class="item-title">附件：</span>
<div class="item-content">
<span class="padding" id="attachments-len"></span>
<a class="btn-link" οnclick="openPanel(this,2)">展开</a>
</div>
<div id="attachments" class="hidden">
<ul class="attachments" id="attachments-area"></ul>
</div>
</li>
</ul>
</section>
<hr>
<section class="mail-content" id="mail-content"></section>
</article>
<script>
var $ = function(sign) {
switch (sign.substr(0, 1)) {
case '#':
return document.getElementById(sign.substr(1));
case '.':
return document.getElementsByClassName(sign.substr(1));
default :
return document.getElementsByTagName(sign.toUpperCase());
}
};
function findNext(el) {
while ((el = el.nextSibling)){
if(el.nodeType === 1){
return el;
}
}
}
function findPrev(el) {
while ((el = el.previousSibling)){
if(el.nodeType === 1){
return el;
}
}
}
/*展开*/
function openPanel(el, type) {
el.innerHTML = '收起';
if (type == 1) {
findPrev(el).style.display = 'none';
$('#ccers1').style.display = 'none';
findNext(el).style.display = 'block';
$('#ccers2').style.display = 'block';
el.setAttribute('onclick', 'closePanel(this, 1)');
} else {
$('#attachments').style.display = 'block';
el.setAttribute('onclick', 'closePanel(this, 2)');
}
}
/* 收起方法 */
function closePanel(el, type) {
el.innerHTML = '展开';
if (type == 1) {
findNext(el).style.display = 'none';
$('#ccers2').style.display = 'none';
findPrev(el).style.display = 'block';
$('#ccers1').style.display = 'block';
el.setAttribute('onclick', 'openPanel(this, 1)');
} else {
$('#attachments').style.display = 'none';
el.setAttribute('onclick', 'openPanel(this, 2)');
}
}
/* 此处为在浏览器测试使用，正式使用时请注释掉此部分*/
window.onload = function() {
showData(data);
};
/* 文档加载完毕之后，调用此方法进行数据填充，通过这个方法将数据 */
function showData(data) {
console.log(data)
console.log("Hellods安抚 world!0")
if (typeof data != 'object') {
console.log("Hello world! 阿道夫 1")
data = JSON.parse(data);
}
if (data.MailTitle) {
$('#mail-title').innerHTML = data.MailTitle;
}
if (data.MailPostPeople) {
$('#sender').innerHTML = '<a class="sender active" οnclick="gotoWriteMail(\'MailPostPeople\',0)">'+data.MailPostPeople+'</a>';
}
if (data.MailPostDate) {
$('#time').innerHTML = data.MailPostDate;
}
if (data.MailReceivedPeople.length > 0) {
var receivers = data.MailReceivedPeople;
for (var i = 0, len = receivers.length; i < len; i++) {
var text = receivers[i];
var options = [
{
name: 'onclick',
value: 'gotoWriteMail(\'MailReceivedPeople\','+ i +')'
},
{
name: 'class',
value: 'receiver active'
}
];
var receiver = createEl('a',text, options );
if (i < 3) {
$('#receivers1').appendChild(createEl('a',text, options));
}
$('#receivers2').appendChild(receiver);
}
}
if (data.MailCCPeople.length > 0) {
var ccers = data.MailCCPeople;
for (var i = 0, len = ccers.length; i < len; i++) {
var text = ccers[i];
var options = [
{
name: 'onclick',
value: 'gotoWriteMail(\'MailCCPeople\','+ i +')'
},
{
name: 'class',
value: 'receiver active'
}
];
var ccer = createEl('a', text, options);
if (i < 3) {
$('#ccers1').appendChild(createEl('a', text, options));
}
$('#ccers2').appendChild(ccer);
}
}
if (data.MailAttachments.length > 0) {
var attachments = data.MailAttachments;
$('#attachments-len').innerHTML=attachments.length+'个';
for (var i = 0, len = attachments.length; i < len; i++) {
var item = attachments[i];
var attachment ='<li><span class="icon">附件</span>' +
'<div class="attachment">' +
'<span class="attachment-name">'+item.Title+'</span>' +
'<br><span class="attachment-size">'+item.Size+'</span>' +
'</div>' +
'<a class="attachment-options" οnclick="gotoWriteMail(\'MailAttachments\','+ i +')">•<br>•<br>•</a> </li>';
$('#attachments-area').innerHTML += attachment;
}
}
if (data.MailContent) {
$('#mail-content').innerHTML = data.MailContent;
}
}
/*type:key, index: 下标*/
function gotoWriteMail(type, index) {
console.log(type + ":" + index)
window.jsObj.htmlToJava(type,index);
}
function createEl(tag, text, attrs) {
var el = document.createElement(tag);
el.innerHTML = text;
for (var i = 0, len = attrs.length; i < len; i++) {
el.setAttribute(attrs[i].name, attrs[i].value);
}
return el;
}
/**/var data = window.jsObj.HtmlcallJava();
/* var data = {
MailTitle: '关于2016中秋放假通知',
MailPostPeople: '小明',
MailPostDate: '2016年09月07日 15:00 星期三',
MailReceivedPeople: ['吴婷', '金蔷薇', '腾月', '吴婷', '金蔷薇', '腾月','吴婷', '金蔷薇', '腾月'],
MailCCPeople: ['吴婷', '金蔷薇', '腾月', '吴婷', '金蔷薇', '腾月','吴婷', '金蔷薇', '腾月'],
MailAttachments: [{
Title: 'xxxxxxx.doc',
Size: '16.23KB'
}],
MailContent: '<p>大家好：</p><p>根据《国务院办公厅关于2016年部分节假日安排的通知》和《全国xxxxxxxxxx放假方法》，2016年“中秋节”放假安排如下：</p><p>放假时间自2016年9月15日至2016年9月17日，放假3天，9月18日正常上班。</p>'
};
data = JSON.stringify(data);*/
</script>
</body>
</html>
TestActivity.java
package com.homer.jsandroid;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnKeyListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class TestActivity extends Activity {
private Activity mActivity=null;
private WebView mWebView=null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mActivity=this;
showWebView();
}
/**WebView与JS交互代码*/
@SuppressLint("SetJavaScriptEnabled")
private void showWebView() {
mWebView=new WebView(this);
setContentView(mWebView);
mWebView.requestFocus();//请求获得焦点
setOnWebClick(mWebView);
WebSettings webSettings=mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setBuiltInZoomControls(true); // 原网页基础上缩放 //0
webSettings.setSupportZoom(true);// 支持缩放 //0
webSettings.setDisplayZoomControls(false);// 不显示webview缩放按钮1
// setting.setDefaultZoom(ZoomDensity.FAR);
webSettings.setUseWideViewPort(true); 关键点
mWebView.setInitialScale(57);//适应全屏： 39适应竖屏 57适应横屏；0默认的，不做任何修改 ；
mWebView.setScrollContainer(true);//是否允许内容滑动X-Y
webSettings.setDefaultTextEncodingName("utf-8");
mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");//对象的大小写一定要注意
mWebView.loadUrl("file:///android_asset/"+getResources().getString(R.string.mail_detail_v2));
}
private void setOnWebClick(WebView webView) {
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
mActivity.setTitle("Loading...");
mActivity.setProgress(newProgress);
if (newProgress>=100) {
mActivity.setTitle("js与WebView 交互");
}
}
});
webView.setWebViewClient(new WebViewClient(){
/**
* 这个方法是，加载url（ 你选中的URL ）,就是你的点击事件,<br>
* 返回值表示拦不拦截这次点击事件。<br>
* 使用view.stopLoading(); 停止加载这个方法。
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Toast.makeText(mActivity, url, Toast.LENGTH_SHORT).show();
Log.e("webView zhong的View", url);
return super.shouldOverrideUrlLoading(view, url);//返回值表示拦不拦截这次点击事件。
}
});
webView.setOnKeyListener(new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode==KeyEvent.KEYCODE_BACK&&mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return false;
}
});
}
private Object getHtmlObject(){
Object object=null;
object=new Object(){
/** java向html中传递值===html调用java中的方法。@JavascriptInterface 4.2版本sdk17以后 要在每个方法上面加上这个注释
* <br>不然 这个方法window.jsObj.HtmlcallJava(); 找不到 对应的方法名字
**/
@JavascriptInterface
public String HtmlcallJava() {
JSONObject mailJsonObject=new JSONObject();
try {
mailJsonObject.put("MailTitle", "关于2016中秋放假通知");
mailJsonObject.put("MailPostPeople", "小名");
mailJsonObject.put("MailPostDate", "2016年09月07日 15:00 星期三");
JSONArray receive=new JSONArray();
receive.put("吴婷")
.put("蔷薇")
.put("腾月")
.put("吴婷")
.put("蔷薇")
.put("腾月");
mailJsonObject.put("MailReceivedPeople", receive);
JSONArray cc=new JSONArray();
cc.put("花花").put("吴婷")
.put("蔷薇")
.put("腾月")
.put("吴婷")
.put("蔷薇")
.put("腾月");
mailJsonObject.put("MailCCPeople", cc);
JSONArray attachArr=new JSONArray();
JSONObject attach0=new JSONObject();
attach0.put("Title", "xxxxxxx.doc")
.put("Size", "12.36KB");
JSONObject attach1=new JSONObject();
attach1.put("Title", "7898498.xls")
.put("Size", "63.21KB");
JSONObject attach2=new JSONObject();
attach2.put("Title", "撒的发放阿斯蒂芬.xls")
.put("Size", "521.125KB");
attachArr.put(attach0)
.put(attach1)
.put(attach2);
mailJsonObject.put("MailAttachments", attachArr);
String content="<p>大家好：</p><p>根据《国务院办公厅关于2016年部分节假日安排的通知》和《全国xxxxxxxxxx放假方法》，2016年“中秋节”放假安排如下：</p><br><br><br><p>放假时间自2016年9月15日至2016年9月17日，放假3天，9月18日正常上班。</p>";
mailJsonObject.put("MailContent", content);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(mailJsonObject.toString());
return mailJsonObject.toString();//发过去了这个好实用
// return mailJsonObject;
}
/**@JavascriptInterface 4.2版本sdk17以后 要在每个方法上面加上这个注释
* <br>不然 这个方法window.jsObj.HtmlcallJava2(...); 找不到 对应的方法名字
* */
@JavascriptInterface
public String HtmlcallJava2(final String param){
return "阿斯顿发士大夫撒即可对方阿斯蒂芬";
}
/** htm向java中传递参数。@JavascriptInterface 4.2版本sdk17以后 要在每个方法上面加上这个注释
* <br>不然 这个方法window.jsObj.htmlToJava(...); 找不到 对应的方法名字
*
* 详情看 mail_detail_v2.html 里面的
function gotoWriteMail(type, index) {
console.log(type + ":" + index)
window.jsObj.htmlToJava(type,index);
}
这个方法，有详细说明
* */
@JavascriptInterface
public void htmlToJava(final String type,final String index){
Toast.makeText(mActivity, type+"=="+index, Toast.LENGTH_SHORT).show();
Log.e("webView zhong的View", type+"=="+index);
}
/** java 调用html 中的方法。@JavascriptInterface 4.2版本sdk17以后 要在每个方法上面加上这个注释
* <br>不然 这个方法window.jsObj.JavacallHtml2(); 找不到 对应的方法名字
* */
@JavascriptInterface
public void JavacallHtml2() {
runOnUiThread(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:showFromHtml2('爱上对方就爱上的ssssssssssss咖啡阿斯蒂芬按时')");
Toast.makeText(mActivity, "电机 btn 2", Toast.LENGTH_SHORT).show();
}
});
}
};
return object;
}
}
生成JSONObject （我传递的是 toString，传递这个object 不能解析不知道怎么回事）
var data = {
MailTitle: '关于2016中秋放假通知',
MailPostPeople: '小明',
MailPostDate: '2016年09月07日 15:00 星期三',
MailReceivedPeople: ['吴婷', '金蔷薇', '腾月', '吴婷', '金蔷薇', '腾月','吴婷', '金蔷薇', '腾月'],
MailCCPeople: ['吴婷', '金蔷薇', '腾月', '吴婷', '金蔷薇', '腾月','吴婷', '金蔷薇', '腾月'],
MailAttachments: [{
Title: 'xxxxxxx.doc',
Size: '16.23KB'
}],
MailContent: '<p>大家好：</p><p>根据《国务院办公厅关于2016年部分节假日安排的通知》和《全国xxxxxxxxxx放假方法》，2016年“中秋节”放假安排如下：</p><p>放假时间自2016年9月15日至2016年9月17日，放假3天，9月18日正常上班。</p>'
};JSONObject mailJsonObject=new JSONObject();
try {
mailJsonObject.put("MailTitle", "关于2016中秋放假通知");
mailJsonObject.put("MailPostPeople", "小名");
mailJsonObject.put("MailPostDate", "2016年09月07日 15:00 星期三");
JSONArray receive=new JSONArray();
receive.put("吴婷")
.put("蔷薇")
.put("腾月")
.put("吴婷")
.put("蔷薇")
.put("腾月");
mailJsonObject.put("MailReceivedPeople", receive);
JSONArray cc=new JSONArray();
cc.put("花花").put("吴婷")
.put("蔷薇")
.put("腾月")
.put("吴婷")
.put("蔷薇")
.put("腾月");
mailJsonObject.put("MailCCPeople", cc);
JSONArray attachArr=new JSONArray();
JSONObject attach0=new JSONObject();
attach0.put("Title", "xxxxxxx.doc")
.put("Size", "12.36KB");
JSONObject attach1=new JSONObject();
attach1.put("Title", "7898498.xls")
.put("Size", "63.21KB");
JSONObject attach2=new JSONObject();
attach2.put("Title", "撒的发放阿斯蒂芬.xls")
.put("Size", "521.125KB");
attachArr.put(attach0)
.put(attach1)
.put(attach2);
mailJsonObject.put("MailAttachments", attachArr);
String content="<p>大家好：</p><p>根据《国务院办公厅关于2016年部分节假日安排的通知》和《全国xxxxxxxxxx放假方法》，2016年“中秋节”放假安排如下：</p><br><br><br><p>放假时间自2016年9月15日至2016年9月17日，放假3天，9月18日正常上班。</p>";
mailJsonObject.put("MailContent", content);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(mailJsonObject.toString());
注意要领：上图
上篇文章在:webView 分类 里面 自定义MerchantWebView.java中
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
