我正在尝试使WebView显示远程图像(具有某些样式调整)。通过将WebView加载引用该远程IMG以及其他内容的HTML片段,这非常有效。但唯一的问题是,有时这个远程图像不存在会导致图像图标损坏。
我想要做的是拦截远程图像的(un)可用性,并通过切换到另一个来恢复。我尝试使用onReceivedError()
的{{1}},但即使图片不可用,它也不会触发。
我当前的图像加载逻辑如下:
WebViewClient
我怀疑String url = "..."; // remote image URL
String html = String.format("<style>img{display: inline;" +
"height: auto;max-width: 100%%;}</style>" +
"<img src=\"%s\"></img>", url);
wv.setWebViewClient(new WebViewClient() {
@Override
public void onReceivedError(WebView view, WebResourceRequest req,
WebResourceError rerr) {
Log.e("WEB_VIEW_TEST", "error code: " + errorCode);
}
});
wv.loadData(html, "text/html", null);
只触发页面级错误,我不确定如何触发元素级错误。任何帮助都将非常感激。
PS。在输入这个时,我只考虑在JS中处理它 - 也就是说,使用JS片段加载webview,尝试加载远程图像,如果错误加载了另一个 - 所有这些都在JavaScript领域内。我会尝试一下,如果有效,也会在这里发布。
答案 0 :(得分:0)
好的,JavaScript解决方案有效,尽管关于Android实际拦截的问题仍然存在。这是JavaScript方式:
String url = "..."; // real image
String backup_url = "..."; // backup image
WebView wv = (WebView) findViewById(R.id.fullImageWebView);
WebSettings webSettings = wv.getSettings();
webSettings.setJavaScriptEnabled(true);
// FIXME: put into assets as an HTML file
String template = "" +
"<style>\n" +
" img {\n" +
" display: inline;\n" +
" height: auto;\n" +
" max-width: 100%%;\n" +
" }\n" +
"</style>\n" +
"\n" +
"<img id='image'></img>\n" +
"\n" +
"<script>\n" +
" var second_attempt = false;\n" +
" var img = document.getElementById('image');\n" +
" img.src = '%s';\n" +
"\n" +
" window.addEventListener('error', function(e) {\n" +
" if (!second_attempt) {\n" +
" second_attempt = true;\n" +
" img.src = '%s';\n" +
" }\n" +
" }, true);\n" +
"</script>";
String html = String.format(template, url, backup_url);
wv.loadData(html, "text/html", null);