实现WebView中点击图片显示大图

在新闻资讯app中，点击图片可以查看大图显示，如华尔街见闻。实现该功能，主要在于如何响应网页图片的点击事件，并获取到图片链接地址。而WebView里的交互操作，我们很容易想到使用Java与Javascript交互。好的，思路已经有了，为网页里的图片添加点击事件，在js里调用java代码，跳转到查看大图的页面，并将图片地址传递过去。

下面，我们分三步来实现该功能。

(1).创建JavascriptInterface。JavascriptInterface是Google官方为我们提供的Javascript与Native通信的解决方案。这里创建一个类，名称为JavascriptInterface（可自定义），为其添加一个方法startPhotoActivity()，该方法接收图片地址，启动PhotoActivity显示大图。

public class JavascriptInterface {
@android.webkit.JavascriptInterface
public void startPhotoActivity(String imageUrl) {
Intent intent = new Intent(MainActivity.this, PhotoActivity.class);
intent.putExtra("image_url", imageUrl);
startActivity(intent);
}
}

接下来将创建好的JavascriptInterface设置到WebView中。调用WebView类的addJavascriptInterface()方法，该方法接收两个参数，参数1是JavascriptInterface对象，参数2是一个在JavaScript中公开对象的名称，这里定义为"mainActivity"，后面再JavaScript中会引用。

mWebView.addJavascriptInterface(new JavascriptInterface(), "mainActivity");

(2).实现JavaScript代码。我们需要编写一个函数，遍历所有的<img/>标签，为每个img对象添加onclick事件。当img执行onclick事件时，调用Java代码启动显示大图页面，并传递自身的src属性。

function()
{
// 获取"img"标签的对象的集合
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++)
{
// 添加点击事件
imgs[i].onclick = function()
{
// "mainActivity"是在上面Java代码中创建的
mainActivity.startPhotoActivity(this.src);
}
}
}

编写完成后，我们将这段代码存放到assets路径，名称为js.txt。

(3).JavaScript准备好之后，我们需要在网页加载完毕后，将其注入到网页中。WebView在页面加载完成时，会回调onPageFinished()方法，在这里实现js代码的注入。注入js代码的方法是通过调用WebView.loadUrl("javascript:xxxxxx")。

mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView webView, String s) {
mWebView.loadUrl("javascript:(" + readJS() + ")()");
}
});

好了，功能已经实现完毕，贴上Activity完整代码。

package net.csdn.blog.ruancoder;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

public class MainActivity extends AppCompatActivity {
private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWebView();
mWebView.loadUrl("http://mobile.mtedu.com/daniujingyanwenzhang-1301.html");
}

private void initWebView() {
mWebView = (WebView) findViewById(R.id.webview);

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView webView, String s) {
mWebView.loadUrl("javascript:(" + readJS() + ")()");
}
});
mWebView.addJavascriptInterface(new JavascriptInterface(), "mainActivity");
}

public class JavascriptInterface {
@android.webkit.JavascriptInterface
public void startPhotoActivity(String imageUrl) {
Intent intent = new Intent(MainActivity.this, PhotoActivity.class);
intent.putExtra("image_url", imageUrl);
startActivity(intent);
}
}

private String readJS() {
try {
InputStream inStream = getAssets().open("js.txt");
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
byte[] bytes = new byte[1024];
int len = 0;
while ((len = inStream.read(bytes)) > 0) {
outStream.write(bytes, 0, len);
}
return outStream.toString();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}

最后附上完整工程下载链接：
http://download.csdn.net/detail/ruancoder/9727736