需求出现的原因是这样的:
我们有一个 h5 页面既需要嵌套到 App 内部进行用户的信息填写及提交，同时这个 h5 页面也能够单独使用。
而这些用户信息中就包括 `input`框选择图片。
<input type="file" name="avatar" id="avatar" />
出现了什么问题呢？
那么问题就出在 input 框这里，点击这个 input 框，调起 android 手机自带的拍照和选择文件的对话框。
小米手机系统调起
只要选择「图片」或者「拍照」都没有问题
问题就出现在选择「取消」的时候
出现了问题，需要先解决点击「取消」程序卡死的问题
这个问题，这篇文章已经介绍过了
H5 通过 input 标签，调起 Android 手机相册，点击取消时手机卡住
如果之前没有配置过，可以参考配置一下。
下面说今天的正题，就是点击取消之后，如果之前头像内有图片，那么取消后会把之前的图片干掉，展示出一个加载错误的样子
原因找到了：当取消的时候，为了避免卡顿，返回了一个图片的路径，但是这个图片路径上对应的图片是不存在的，从而导致了 H5 img 位置 显示加载失败
加载失败
那么现在问题就来了：
如果不返回，就会卡顿；
如果返回了，就把 img 之前的展示图片给干掉了
怎么办呢？
我这边的思路是:
将原来的 img 标签内的 src 的内容存储到本地，然后判断：如果用户点击了取消，那么就将这个原来的 src 内容返回回去
那么这样操作的话，就需要知道，如何拿到 img 标签中的 src 的内容。
那么实际需要做这么几部
1、这个需要和 H5 或者后台沟通一下，将 H5 中的 这个头像的 id 唯一，以保证能唯一找到这个头像。
2、根据 id 找到这个 img 标签后，再拿 src 中的内容存储到本地
3、判断用户点击取消时，将本地存储的图片 src 内容，返回给 H5。
第三点已经在
H5 通过 input 标签，调起 Android 手机相册，点击取消时手机卡住
这个文章中提到过了，找到合适的位置直接返回即可。
所以本篇文章中的重点就是第一步：根据 id 找到 src 的内容。
1、创建 addJavascriptInterface 需要的「操作对象」，这个操作对象就是一个类，名字随便起，不过内部的方法必须添加@JavascriptInterface注解
//内部类
final class InJavaScriptLocalObj {
private static final String TAG = "MainActivity";
/**
* @JavascriptInterface 必须要有的哦
* @param html
*
* 一旦检测到 html 匹配到了要找的元素或者属性，这里就会调用，否则不会调用这个方法
*/
@JavascriptInterface
public void showAvatar(String html) {
Log.e(TAG, "showAvatar: " + html);
}
}
2、配置 webview
private void initWebView() {
/**
* 三项均需配置
*/
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
/**
* ambassador_avatar 是和后台（h5）商议的唯一的 id
*/
view.loadUrl("javascript:window.local_obj.showAvatar(document.getElementById('ambassador_avatar').getAttribute('src'));");
}
});
}
那么找元素关键的一句，就是
view.loadUrl("javascript:window.local_obj.showAvatar(document.getElementById('ambassador_avatar').getAttribute('src'));");
备注
找元素的方法很相似，就是跟 html 中的找 dom 节点一样
可以移步到 w3school 逛网看一看
这里小总结一下
通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素
var myElement = document.getElementById("intro");//返回单个元素
var x = document.getElementsByTagName("p");//返回元素列表
var x = document.getElementsByClassName("intro");//返回元素列表
var x = document.querySelectorAll("p.intro");//返回元素列表
var x = document.forms["frm1"];//返回元素列表
返回元素列表的方法在使用是 需要像数组那样去取得对应的元素，如x[0]
拿到元素之后，通过 DOM 的文档，拿到想要的属性、值等等信息。
这样就能通过存储原来的图片信息，在点击取消的时候把信息返回，解决了本次需求的问题。
谢谢大家的收藏、关注、转发，持续更新！😘😘😘
网友评论