求出現的原因是這樣的:

我們有一個 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 逛網看一看

dom 元素查找方法

這里小總結一下

 通過 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 的文檔，拿到想要的屬性、值等等信息。

這樣就能通過存儲原來的圖片信息，在點擊取消的時候把信息返回，解決了本次需求的問題。

謝謝大家的收藏、關注、轉發，持續更新！